Web Development

Building A Blog With Eleventy And Netlify CMS – Part 3: Managing Blog Content With Netlify CMS


Subscribe On YouTube

Episodes

This is part 3 of the Building A Blog With Eleventy And Netlify CMS From Start To Finish tutorial series on CodingTheSmartWay.com. In the first two parts of this series we’ve started to create an Eleventy project for implementing a simple blog example and have also started to add some content to the application. The static site generation process is already fully working so that we’re now able to move and add Netlify CMS to our application.

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. 

We’ll also use the Netlify services for hosting and deploying our application. The great thing here is that we’re able to connect Netlify hosting to a Git repository and therewith establish an automatic deploy and build process. Netlify detects the changes which are pushed to the Git repository and triggers automatic build and deployment steps. 

Creating A GitHub Repository For Our Project

First of all we’re creating a new GitHub repository for our project. Go to https://github.com/ create a new account or login with your existing account. Choose option Create Repository and choose a repository name:

10.png

 In order to push the content of the project folder to the new GitHub repository you need to execute the following command:

$ git init

$ git add .

$ git commit -m “first commit”

$ git branch -M master

$ git remote add origin [URL of GitHub Repository]

$ git push -u origin master

Using Netlify To Connect To GitHub Repository

Now that we’ve a GitHub repository we need connect that repository to Netlify. Go to Netlify’s website (https://www.netlify.com/) create a new account and login. Select New site from Git and you’ll see the following page:

20.png

 The first step is to connect to a Git Provider. You can choose between GitHub, GitLab, or Bitbucket. Select GitHub and you should be able to see the following screen:

30.png

 You first need to authenticate for GitHub and then you should be able to see a list of all of your GitHub repositories. You can use the search field type in the name of the GitHub repository you’d like to connect to. Select the previously created repository and you’ll be redirected to the next page where you need to enter additional build and deployment settings for this connection.

In the Basic build settings sections, set the Build command to npx eleventy and the Publish directory to _site. Finally click on button Deploy site

This is initialing the deploy process and you should end up receiving a Netlify URL which under which the deployed app is available:

40.png

 Next click on button Site settings and then on the Identity tab:

50.png

 Click on button Enable Identity to activate Netlify’s identity service. You should then be able to see the identify service overview page:

60.png

 In order to prepare for setting up Netlify CMS we also need to enable the Git Gateway service which can be found when clicking on the Services link in the Identify section:

70.png

 In order to enable the Git Gateway service you need to click on the button Enable Git Gateway. By enabling this service you’re exposing an API that will let Netlify CMS commit changes to the Git repository without needing to re-authenticate or give anybody access directly. 

After having enabled Git Gateway you should be able to see the connection to the GitHub repository on the page:

80.png

Adding Netlify CMS To The Project

In the last steps we’ve created a live website on Netlify which is connected to our GitHub repository. We’ve also enabled the Identify and the Git Gateway service which is needed to run Netlify CMS within our project.

With those preparations in place we’re ready to install Netlify CMS into our project and configure the content management system for our needs. 

First of all add a new file index.html in the admin folder of the project:

$ touch admin/index.html

The following HTML code needs to be inserted in order to include Netlify CMS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>

This HTML code can also be found in the documentation of Netlify CMS at https://www.netlifycms.org/docs/add-to-your-site/#app-file-structure

In addition to this HTML code we need to create a Netlify CMS configuration file as well in the same folder:

$ touch admin/config.yml

This YAML file is used to configure the content management system for our needs. First we need to add a backendsection with configuration properties name and branch included:

backend:
  name: git-gateway
  branch: master 

Here we’re setting the name property to value git-gateway and branch to value master. Git Gateway is a Netlify service which we’ve enabled before and which is an API that acts as a proxy between authenticated users of your site and your site repository. 

Next, add two more configuration settings in config.yml without indentation:

media_folder: "_site/images/uploads"
public_folder: "/images/uploads"

The media_folder configuration property is used to set the folder in which images should be saved which have been uploaded in Netlify CMS. In or case we’re using the folder _site/images/uploades.

In addition we need to set the public_folder property to the string values /images/uploads. This is the folder in which images can be found in the published site, e.g. used for setting the src attribute for image elements. 

Finally we need to add configuration code for defining the content type (collection) which should be managed with Netlify CMS, in our example posts:

collections:
  - name: "posts"
    label: "Posts"
    folder: "posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - { label: "Layout", name: "layout", widget: "hidden", default: "layouts/post.njk" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Date", name: "date", widget: "date", default: "" }
      - { label: "Post Body", name: "body", widget: "markdown" }
      - { label: "Featured Image", name: "featuredImage", widget: "image" }

As you can see we’re defining the posts collections by using various configuration properties. 

  • name: Name of the collection
  • label: The name of the collection which is used in Netlify CMS’s user interface
  • folder: The folder in which new files for the collection should be stored
  • create: Needs to be set to value true in order to allow users to create new file in this collection. 
  • slug: Defining the template for filenames
  • fields: A list of fields for this collection type which are shown in the content editor

Each fields is specified by using the following properties:

  • label: The name of the field which is displayed in Netlify CMS’s content editor
  • name: Name of the field which is used in the document’s front matter section
  • widget: Determines the user interface style and value data type
  • default: Optional, to be used to set a default value

Using Netlify CMS To Manage Blog Posts

After having commit and pushed all changes to the GitHub repo (and therewith initiated a new build process on Netlify as well) you should be able to access Netlify CMS by using URL path admin/:

90.png

 Once logged in you can see that Netlify CMS is aware of the previously configured post collection type. Now you can hit on button New Posts to create new blog post. Netflify CMS is offering a content editor which enables you to enter the content:

100.png

 Once a new entry is published the changes are pushed to the repo in the background automatically. That triggers the build process in Netlify and the new static sites become available. 

Conclusion

In this series you’ve learned how to combine the power of a simple and powerful static site generator (Eleventy) with the Netlify platform and Netlify CMS as a content management system. We’ve implemented a very simple blog example and have seen how Netflify CMS can now be used to manage the content (blog posts) of our site very easily. As a result the build process is running on Netlify and outputting static sites as an output. 

Advertisement: The Complete JavaScript Course: Build Real Projects

Master JavaScript with the most complete course! Projects, challenges, quizzes, JavaScript ES6+, OOP, AJAX, Webpack

The Complete JavaScript Course: Build Real Projects *

  • Go from a total beginner to an advanced JavaScript developer
  • JavaScript and programming fundamentals: variables, boolean logic, if/else, loops, functions, arrays, etc.
  • Asynchronous JavaScript: The event loop, promises, async/await, AJAX and APIs
  • A true understanding of how JavaScript works behind the scenes
  • Practice your new skills with coding challenges (solutions included)

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!


Using and writing about best practices and latest technologies in web design & development is my passion.