TheLazy.Dev
Portfolio GitHub

Blog

webdev |jekyll |netlify |tutorial

Netlify CMS Jekyll Minimum Viable Build

katiekodes

Katie

Posted on February 21, 2020

Netlify CMS Jekyll Minimum Viable Build

I'm trying to figure out if a friend currently on Wordpress could ever enjoy using a static page builder accompanied by a CMS, or if they just really need the comfort of knowing they can use Wordpress Visual Composer / Squarespace / Wix to move things around their web pages at will. Netlify's free tier (thank you!!) is going to be really helpful in letting me set up a prototype for them to test drive.

This is a "note to self"-type post from my first steps exploring the option. Here's what I'd need to do to retrace my steps in Netlify CMS today and build another minimum viable Jekyll site with Netlify CMS.

The process is a bit convoluted, but I wanted to isolate different processes (like working with Git repositories and connecting Netlify.com to GitHub) to make sure I understood which settings and files were responsible for which business processes.

Process

  1. Get a Netlify.com free account
  2. Set up a Netlify.com site that you build from "drag-and-drop," doing just 3 files:
    • /index.html
    • /im_an_admin/index.html
    • /im_an_admin/config.yml
    • Make config.yml kind of fancy, and set the backend name to test-repo. Code sample below.
    • TEST IT: Go to https://yoursite1.netlify.com/im_an_admin and make sure the CMS UI is as you'd expect based on your config. For example, for the code below, is there a "Live on site?" toggle whose flippy-button flips left and right?
    • Note that nothing you do, Jekyll-wise, will build, with Netlify.com's drag-and-drop-a-folder-based site "building," so don't bother building out *.md pages in this site.
  3. Set up a different Netlify.com site, this one connected to a GitHub private repository, doing just 6 files:
    • /_config.yml
    • /index.md
    • /about.md
    • /Gemfile
    • /Gemfile.lock
    • /_layouts/default.html
    • TEST IT: Make sure you can visit https://yoursite2.netlify.com/ and https://yoursite2.netlify.com/about as expected, without "page not found" errors.
  4. Add back in the following 2 files
    • /im_an_admin/index.html
    • /im_an_admin/config.yml
    • Make config.yml kind of fancy, and set the backend name to test-repo. Code sample below.
    • TEST IT: Go to https://yoursite2.netlify.com/im_an_admin and make sure the CMS UI is as you'd expect based on your config. For example, for the code below, is there a "Live on site?" toggle whose flippy-button flips left and right?
  5. To do: Do all the truly hard work about mastering /im_an_admin/config.yml and setting up a good-looking site in Jekyll.
  6. To do: Profit

Files

Site 1: index.html 

<html>
<head>
</head>
<body>
Hello World
</body>
</html>

Both sites: /im_an_admin/config.yml

More commonly lives at /admin/, but I wanted to see what I could do. No idea if it would actually truly write files properly in production.

# config.yml

backend:
  name: test-repo
media_folder: 'assets/uploads'
collections:
  - name: 'blog'
    label: 'Blog'
    folder: '_posts/'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Live On Site?', name: 'published', widget: 'boolean', default: false }
      - { label: 'Body', name: 'body', widget: 'markdown' }
  - name: 'pages'
    label: 'Pages'
    editor:
      preview: false
    files:
      - label: 'About Page'
        name: 'about'
        file: 'about.md'
        fields:
        - { label: 'Title', name: 'title', widget: 'hidden', default: 'about' }
        - { label: 'Layout', name: 'title', widget: 'hidden', default: 'about' }
        - { label: 'Body', name: 'body', widget: 'markdown' }

Both sites: /im_an_admin/index.html 

<!-- adminindex.html -->
<!DOCTYPE html>
<html>
  <head>
    <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>

Site 2: index.md 

---
title: My page
layout: default
---

# {{ page.title }}

Hello world

Site 2: about.md

Note that Netlify's build logs include a complaint that the "page" layout doesn't exist. Great. It does, however, still build and render at its expected URL.

---
layout: page
title: About
permalink: /about/
---

This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](https://jekyllrb.com/)

You can find the source code for Minima at GitHub:
[jekyll][jekyll-organization] /
[minima](https://github.com/jekyll/minima)

You can find the source code for Jekyll at GitHub:
[jekyll][jekyll-organization] /
[jekyll](https://github.com/jekyll/jekyll)

Site 2: Gemfile and Gemfile.lock

Grab the most recent versions found at Netlify's official starter site

(Of course, they publish this "starter site" so that you don't have to do things "the hard way" as outlined here if you're already a Jekyll fiend ... but I'm unfamiliar with Jekyll and wanted to work my way up to "hello world" by hand.)

💖 💪 🙅 🚩
katiekodes
Katie

Posted on February 21, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Netlify CMS Jekyll Minimum Viable Build
webdev Netlify CMS Jekyll Minimum Viable Build

February 21, 2020