3 min read

Summary

We will be going over how to create a content management system (CMS) using GitHub Desktop, GitHub, and Atom. This workflow will create a CMS that is built on the Static Site Generator Jekyll, and GitHub Pages. This guide DOES NOT require Jekyll to be set up or any knowledge of Jekyll

Set Up

The text editor we recommended here at Digital Roots is Atom because it comes with a markdown previewer which will allow having a What You See is What You Get (WYSIWYG) editor, which is one of the biggest drawbacks to using a static site generator over a traditional CMS like Word Press. It also works well with GitHub Desktops because it will automatically track chances between you version on GitHub and the one saved to your computer.

GitHub

Go to GitHub.com and sign-up on the front page

GitHub Landing Page

GitHub Desktop

  1. To set up GitHub Desktop go to desktop.github.com and download the version for your Operating System (OS)

    Landing Page of GitHub Desktop

  2. Once you have GitHub Desktop installed. Return to GitHub and go to the git repository(repo) for your site hosted on GitHub Pages. Todo this enters the site repo in the search, and follow the link to your repo.

    Navigating to site repository

    Nav search results

  3. After reaching the repository you will download the repository to GitHub Desktops

    Downloading repository

Client Editable

One of the biggest drawbacks to most static site workflows is that they allow users to edit every file on the site this can cause problems if they edit .html, .css, or .js, and the problems seem to get worse with preprocessors. With GitHub we are able to have control over which files are added, this is because GitHub is primarily used as version control system for developers.

Client workflow

  1. Create a Fork by going to the button left button title masters

    Fork the repository

  2. To open the Project in Atom right click on the folder in GitHub Desktop

    opening in atom

  3. Create a new post in the _posts directory and fill out the relevant YAML fields (fields between -- at the top of the post), and right-click the file in atom to open the markdown preview to see your post.

    View of Atom

  4. Once you have written the post fill in the summary and description in GitHub Desktop and commit

    Filling out commit in GitHub Desktop

  5. After you commit it send a pull request

Once the Client has followed those steps then the post can be uploaded to the site stoping any mistakes the client might have done due to access to the site files.

Guides for using Markdown
  1. Guide from GitHub
  2. Markdown: Basics