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
- Get a Netlify.com free account
- 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.ymlkind of fancy, and set the backend name to test-repo. Code sample below. -
TEST IT: Go to
https://yoursite1.netlify.com/im_an_adminand 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
*.mdpages in this site.
- 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/andhttps://yoursite2.netlify.com/aboutas expected, without "page not found" errors.
- Add back in the following 2 files
/im_an_admin/index.html/im_an_admin/config.yml- Make
config.ymlkind of fancy, and set the backend name to test-repo. Code sample below. -
TEST IT: Go to
https://yoursite2.netlify.com/im_an_adminand 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?
- To do: Do all the truly hard work about mastering
/im_an_admin/config.ymland setting up a good-looking site in Jekyll. - 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.)
Top comments (0)