Building A Blog With Eleventy And Netlify CMS — Part 1: Creating The Eleventy Project
--
This post has been published first on CodingTheSmartWay.com.
Episodes
Eleventy is a simple static site generator based on JavaScript. The great thing about Eleventy is that it is zero-config by default but can also be run with configurations options which makes it flexible and extremely easy to use at the same time.
In contrast to other static site generators Eleventy does not force you to use a specific template engine. Eleventy works with many different template languages.
If you’d like to get started with Eleventy you can take a look at our beginner’s tutorial: 11ty | Eleventy — A Simple Static Site Generator.
Netlify CMS is a simple, open-source content management system. By using Netlify CMS we’re able to manage all types of content (e.g. blog posts etc) by using a back-end user interface.
In this tutorial we’ll combine the power of Eleventy and Netflify CMS to create a blog from start to finish. We’ll use Netflify CMS to manage the content of the blog (posts) and Eleventy to generate optimized static sites for this content.
Creating The Project
Let’s start by creating a new eleventy project from scratch. Therefore we need to create a new empty project folder:
$ mkdir eleventy-netlify-01
And then change into the newly created folder by typing in:
$ cd eleventy-netlify-01
Inside this folder we need to create a new package.json file, so that we’re able to use NPM to manage dependencies:
$ npm init -y
As a first dependency add the Eleventy NPM package to the project by using the npm command in the following way:
$ npm install @11ty/eleventy --save-dev
Next we need to extend the project structure with a few additional folders:
$ mkdir _includes
$ mkdir images
$ mkdir images/uploads
$ mkdir admin
$ mkdir posts
Furthermore add an Eleventy configuration file in the root project folder:
$ touch .eleventy.js
Insert the following lines of code into the configuration file:
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("images");
eleventyConfig.addPassthroughCopy("admin");
};By using the addPassthroughCopy method of the Eleventy configuration object we’re able to specifiy that project folders should just be copied to the output folder (_site) without further processing. We’re using this option to make sure that the images and the admin folder are copied without any changed to the output folder.
Next, Create another subfolder named layouts inside of the _includes folder:
$ mkdir _includes/layouts
In the newly created folder create a new file base.njk. This file should contain the template code of the base template which will be used for our blog.
$ touch _includes/layouts/base.njk
The file extension (*.njk) is already indicating that we’ll be using the Nunjucks template language. The following template code needs to be inserted:
<html>
<head>
<title>Eleventy + Netlify CMS Blog Example</title>
</head> <body>
<h1>
Eleventy + Netlify CMS Blog Example
</h1>
{{ content | safe }}
</body>
</html>
This is just a very simple base template adding the HTML structure with a head and a body section.
Inside the body section of the template code you can also find the following line of code:
{{ content | safe }}The content keyword inside a pair of double curly braces is used to insert the content from the file which is making use of this layout template. Furthermore Nunjucks build-in safe filter is applied. This means that in an environment with automatic escaping enabled the content will not be escaped.
Next let’s create another Nunjucks file inside the project’s root folder:
$ touch index.njk
Insert the following code inside this file:
---
layout: layouts/base.njk
permalink: /
---
Hello! Welcome to the Eleventy + Netlify from scratch homepage.The code start with a front matter section. Front matter allows you to keep metadata attached to content. In this case we’re using the front matter section to set the layout template and the permalink for that file. As content we’re adding a line of text at the end of the file.
Now it’s time to start Eleventy and see the result of the static site generation process. Execute the following command:
$ npx eleventy --serve
This is startic the site generation process of static sites and a web server at the same time. The web server is started on port 8080, so that you should be to see the following output when accessing the URL in the browser:
What’s Next
Now that we’ve setup a working Eleventy project we’re able to move on in the next part and start adding some blog related content to our sample website.
JavaScript Course Recommendation
The Complete JavaScript Course: Build Real Projects *
Master JavaScript with the most complete course! Projects, challenges, quizzes, JavaScript ES6+, OOP, AJAX, Webpack
Go To Course … *
Modern JavaScript From The Beginning *
Learn and build projects with pure JavaScript (No frameworks or libraries)
Go To Course … *
The Modern JavaScript Bootcamp *
Learn JavaScript by building real-world apps. Includes 3 real-world projects, 80 programming challenges, and ES6/ES7!
Go To Course … *
* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!
