Netlify CMS Jekyll Minimum Viable Build
Tags: webdev, jekyll, netlify, tutorial
Published: 2020-02-21 22:58:38

---
title: "Netlify CMS Jekyll Minimum Viable Build"
description:  "Enough to see what the product can do"
published: true
date: 2020-02-21 15:00:00 UTC
tags: webdev,jekyll,netlify,tutorial
canonical_url: https://katiekodes.com/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](https://www.netlify.com/pricing/) 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](https://netlifycms.org) today and build another **minimum viable [Jekyll](https://jekyllrb.com/) 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
<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.


```yaml
# 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`


```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)


[jekyll-organization]: https://github.com/jekyll
```


---

### Site 2:  `Gemfile` and `Gemfile.lock`

Grab the most recent versions found at [Netlify's official starter site](https://github.com/netlify-templates/jekyll-netlify-cms)

_(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.)_