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
Site Is Live!
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: Part 5: 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. Let's connect on Twitter, Polywork and LinkedIn
Top comments (0)