# Learn 11ty Part 5: Deploying the Site

I've been debating what part of Eleventy to showcase next. My initial thought was to improve our styling by adding Tailwind. But that would be introducing something that isn't Eleventy.

So I think it's best that we deploy our site first, then add the accoutrements later. We currently have a lot of the elements that constitute a site.

* * *

## Configure Source Files

Eleventy let's us to various platforms. For this series we'll be using Netlify

Let's begin shall we...

### Handle Ordering of Pages and Posts

If we went ahead and deployed our site the way it is, our resulting site would be ordered alphabetically. Meaning for starters, our navigation would be About, Blog then Home. We don't want that do we?

Let's make some modifications...

#### Page Sorting

In `eleventy.config.js` add this:

```js
eleventyConfig.addCollection("page", function (collections) {
  return collections.getFilteredByTag("page").sort(function (a, b) {
    return a.data.order - b.data.order;
  });
});
```

The code above takes all the files in the collection **page** that we setup in a previous tutorial , and outputs them according to the order data in the frontmatter. But we don't currently have order data in our frontmatter, do we?

Let's add it

```md
# src/index.njk

---

layout: base
title: Home
tags: page
order: 1 # add this

---
```

Do the same for `about.md` and `blog.njk` , with the order 2 and 3 respectively

#### Blog Post Sorting

Blog post sorting is a little simpler, all we have to do is add a **date** key to our post frontmatter

```md
---
title: First Post
description: This is my first post
date: 2022-05-27 # add this
---
```

* * *

### Add Build Scripts

The next thing we need to do is modify our `package.json` scripts like this:

```json
"scripts":  {
  "dev": "exec eleventy --serve",
  "build": "exec eleventy",
  "write": "exec prettier --write ."
}
```

Then we add a `netlify.toml` file in our project root with this in it:

```toml
[build]
    publish = "_site"
    command = "npm run build"
```

### Setup Git Repository

Over the course of this series I have been sharing the working repository for this series. That is what we are going to use to deploy our site to Netlify.

If you haven't already, add your project to git and push to [github](https://github.com).

* * *

## Connecting Repo to Netlify

Now, head over to [Netlify](https://netlify.com)

Either login or create an account. Once logged in go to the **Sites** tab. click the **Add new site**, then **Import an existing site**

![add project](https://dev-to-uploads.s3.us-east-2.amazonaws.com/uploads/articles/3xyspprsoq9avpvnyui9.png align="center")

*   Next, we connect to a Git Provider. Github for us
    

![connect gihub](https://dev-to-uploads.s3.us-east-2.amazonaws.com/uploads/articles/fzbz1naj3sv82nk3uxbe.png align="center")

*   Select the repo we made
    

![select repo](https://dev-to-uploads.s3.us-east-2.amazonaws.com/uploads/articles/zoig70pmx8fahp4yh2c2.png align="center")

*   Scroll down click **Deploy site** , sit back and let Netlify do the rest
    

![deploy](https://dev-to-uploads.s3.us-east-2.amazonaws.com/uploads/articles/bjeg637rvfl666p5q40u.png align="center")

> **IMPORTANT** Usually Netlify is clever enought to detect the branch you are deploying and your build command. Cross check just in case

* * *

> ### Site Is Live!
> 
> ![live site](https://dev-to-uploads.s3.us-east-2.amazonaws.com/uploads/articles/bjjpj1pjyascrcyzm9if.png align="center")

Our site is LIVE!!!!

* * *

## Update 07 July 2022

A member of the Eleventy community brought it my attention that I hadn't shown what goes into the `.gitignore` file for when we push to github.

That file looks like this:

```plaintext
/node_modules
/_site
# Local Netlify folder
.netlify
```

The most important things are to ignore the `node_modules` folder and the rendered `_site` one

* * *

### Conclusion

Up to this point we have made use of features inherent in Eleventy - which was what I intended. Together, we have seen that it is not only possible but simple enough to achieve.

As we move on with this series, we are going to be adding more spice to make our site work even better.

So please join me in the next one...

**As always**:

*   The live site: https://learneleventy.netlify.app
    
*   The working repo: [Part 5: Deployment](https://github.com/Psypher1/learneleventy/tree/part5-deployment)
    
*   The docs: https://www.11ty.dev/docs/
    
*   The discord: https://www.11ty.dev/blog/discord/
    

* * *

### Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. My email and DMs are always open; if you want to chat or collaborate on something, [shoot me a email](mailto:jamesmidzi@gmail.com)

Where you can get hold of me:

*   [Twitter](https://twitter.com/Psypher1)
    
*   https://discord.com/users/Pharaoh#5441/
    
*   [LinkedIn](https://www.linkedin.com/in/jamesmidzi/)