Let's Learn 11ty Part 5: Deploying the Site

Let's Learn 11ty Part 5: Deploying the Site

Read 730 times

#tutorial

#ssg

#eleventy

#webdev

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:

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

# 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

---
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:

"scripts":  {
  "start": "npx eleventy --serve",
  "build": "eleventy"
}

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

[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.

Connecting Repo to Netlify

Now, head over to Netlify

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

Site Is Live!

Live Site

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:

Thank you for reading, let’s connect!

Thank you for visiting this little corner of mine. Let’s connect on Twitter, Polywork and LinkedIn

Back to articles