Jekyll is a static site generator that runs on NodeJS. Its a great alternative to WordPress that eliminates the need for databases.

Requirements

Install Jekyll dependencies:

sudo gem update --system
sudo gem update
sudo gem install jekyll

If will be importing from WordPress or other location, you will also need:

sudo gem install jekyll-import

Note: If your a risk taker, the below command installs a pre release version. Please note these are NOT stable.

gem install jekyll --pre

A new Jekyll instance (non-WordPress instructions)

First, run the the below command, replacing “MySite” with the folder name for your site.

jekyll new MySite

Jekyll will now generate a site in the folder “MySite”. Here is what the directory will look like:

Terminal screen that shows directory contents

  • _config.yml stores the website configuration data such as site name, description and base address.
  • _includes is where you store portions of a file such as your menu, header, footer, and GA code.
  • _layoutsputs the pieces of the includes together for a post, page and index file.
  • _posts is where posts for your site are stored in markdown or HTML format.
  • _scss stores the files for SASS and CoffeeScriptfile. Read More in the Jekyll Docs
  • about.md is the about page for your site.
  • css self explanatory - stores your css files.
  • feed.xml will have your rss feed. This generates on its own.
  • index.html your site’s main page.

Once you have finished your changes, run the below commands:

cd MySite
jekyll serve

Here is a sample output:

Terminal screen output of jekyll serve command

Then, browse to: http://localhost:4000. You can edit files, and Jekyll will make those updates behind the scene as soon as you save…just refresh to see your changes.

Wordpress Import instructions (wordpress.com and self hosted)

Create a folder for your site and use the terminal to change to the folder your your site will be (cd foldername).

Make sure the upload folder and a copy of your WordPress export is at the root of your new site folder. For demo purposes, I will call it: wordpress.xml.

Terminal screen output showing directory strcuture

Once this is set up, run the below command to import your wordpress instance:

jekyll import wordpressdotcom --source wordpress.xml

If your upload folders are not downloaded in same structure, download your wp-content folder, and place at root of site (above “_site” folder Also, in my code, there were no references to the below folders, so they were deleted:

  • _nav_menu_items
  • attachments

To see what your site looks like, run the command jekyll serve.

As with the non-WordPress import, any changes you make will be reflected in your development link.

Drafts

To wok on a post locally, but not moving it live, create a folder at the root called _drafts. Next, add a markdown or html file without the address. Finally, run jekyll server --watch --drafts

Terminal screen output showing draft folder

Changes can be made on the fly using this method as well. When ready to publish, move the file to _posts and add a date.

Publishing your new site

The last step is in this process is to push your files on-line. Move into the root of _site. These are the production ready files that should be moved to your server.

The first chunk of files below shows the root of my Jekyll site, while the second shows the production ready files. Note that some files from the root of the Jekyll site are not included. These are excluded in _config.yml

Terminal screen output showing production folder contents

Note: There will be separate posts on various items in the config file, how to get it running on Azure and finally, another on publishing to Github Pages, and CloudFlare.

Youtube Demo

Here is a demo of the process to configure Ruby, and Jekyll on a system.

Resources