Let's Learn 11ty Part 5: Deploying the Site
Tags: tutorial, ssg, eleventy, webdev
Published: 2022-06-10 13:37:45

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.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":  {
  "start": "npx eleventy --serve",
  "build": "eleventy"
}
```

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 existing site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90rsi1un813e3s03ssy4.png)

- Next, we connect to a Git Provider. Github for us
![connect provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdzsmnaptgg7mcv67cbn.png)

- Select the repo we made
![connect repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xi83zbftpkb0kh1t0vy.png)

- Scroll down click **Deploy site** , sit back and let Netlify do the rest
![Deploy site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22jgrfxly4ogvxxb2o6s.png)

---

> ### Site Is Live!
> ![Live Site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3x3chyvxo7xh4seq5k4l.png)

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:

```
/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: https://github.com/Psypher1/learneleventy
- 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. Let's connect on [**Twitter**](https://twitter.com/Psypher1), [**Polywork**](https://www.polywork.com/psypher1) and [**LinkedIn**](https://www.linkedin.com/in/jamesmidzi/)