jekyll, tutorial,

Using Netlify As A CMS For Your Jekyll Blog

Jules Lee Jules Lee Follow Oct 27, 2019 · 3 mins read
Using Netlify As A CMS For Your Jekyll Blog
Share this

I was actually intimidated by the idea of trying out Netlify for my blog but not so much anymore. It turned out pretty easy to do.

First thing’s first, Netlify is some kind of web hosting. Although you can opt to just run a local server from your computer by just running bundle exec jekyll serve.

Let’s create our Netlify account and follow this guide by Thomas Bradley:

This is actually a part of his Jekyll + NetlifyCMS hosting setup playlist. I didn’t find the rest to be that useful, so I’ve written down below the next steps you should take.

To create the Netlify Dashboard, you need to create a folder. This folder is a subdirectory of your blog. So, if you set your baseurl from your _config.yml to \blog, then this folder, let’s say, admin can be accessed through \blog\admin. This folder has to be created at the root of your Jekyll project folder. Then there are only two files you need to create under the admin folder. index.html and config.yml. This is another config.yml different from the root’s _config.yml.

I copied the contents of index.html from Add to Your Site.

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</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>

Now comes the tricky part, which is setting up the look of our admin dashboard in config.yml. If you reverse engineer it, it’s easier than reading through html.

There are ways to login to your dashboard, but I chose to login with Github. To do that, here’s what you’ll have to put in admin/config.yml:

backend:
  name: github
  branch: gh-pages # Branch to update (optional; defaults to master)
  repo: iosjunkie/blog # Repository of your blog in Github

publish_mode: editorial_workflow
media_folder: "assets/images"

collections:
  - name: "posts"
    label: "Posts"
    folder: "_posts"
    create: true
    slug: "---"
    fields:
      - { label: "Layout", name: "layout", widget: "hidden", default: "post" }
      - { label: "Title", name: "title", widget: "string" }
      - label: "Featured Image"
        name: "image"
        widget: "image"
        required: false
        media_library:
          config:
            multiple: false
      - { label: "Tags", name: "tags", widget: "list", required: false }
      - { label: "Categories", name: "categories", widget: "string", required: true }
      - { label: "Draft", name: "draft", widget: "boolean", default: true }
      - label: "Body"
        name: "body"
        widget: "markdown"
  - name: "website-settings"
    label: "Settings"
    files:
      - label: "Settings"
        name: "site"
        file: "_config.yml"
        fields:
          - label: "Name"
            name: "name"
            widget: "string"
          - label: "Description"
            name: "description"
            widget: "markdown" 

I just came up with this from the tutorials I watched. The images below are the results of what we just typed in our config.yml.

This is what it looks like when I go to http://localhost:4000/blog/admin/#/collections/website-settings:



And this is what it looks like in http://localhost:4000/blog/admin/#/collections/posts:

Once done, commit and push it to your Github. Go back to https://app.netlify.com/sites/your-blog/deploys and make sure it is deployed. After deploying, you will be able to access Netlify admin dashboard thru https://your-blog.netlify.com/admin.

Take

I like the UI of Netlify CMS. Reminds me of Netflix all the time and as I’m typing this article, I often get a typo of Netflix.

Would I use it?

No!

The list of posts is not sorted by date. I’m used to having it sorted by date. The images in the /assets/images/ folder are also not sorted and there’s no way of sorting any collection in this CMS. Sad, but true.

That’s my only problem with it, but if that’s not a problem for you, then give it a go.

Jules Lee
Written by Jules Lee
Hi, I am Jules, the author of iOS Junkie. Demystifying complex instructions from the internet.