Blogging with GitHub and Jekyll

This time we are going to create a project site in Github. You can create as many of these as you like on a single GitHub account.

Create a new GitHub project in the usual way.

Follow the instructions on GitHub Pages. Set up a “Project site”, “Start from scratch”, and “Make gh-pages the default branch”.

Next, go to your development environment. Nitrous is recommended unless you are comfortable with setting things up on your own computer. Clone your project.

Follow the Jekyll Quick-start guide. Install Jekyll. Run:

jekyll new <your-project-name> --force 

The --force flag tells Jekyll to create a jekyll site over the top of an existing directory structure–in this case, your recently cloned repo. This will overwrite any existing files that jekyll uses, which in this case will include your original index file.

cd into your repo and take a look at the directory structure. Do a quick git status, if you like.

Run:

jekyll serve

Use the Preview menu to look at your website on Port 4000.

Take a good look at all the files that have been created. In particular, take a good look in _posts and _layouts and at index.html.

Edit the files, to taste.

Add, commit and push the repo back to GitHub. Take a look at them live on GitHub.

You will probably find that you have lost your styling on the live site. If so, read Deploying Jekyll to GitHub Pages, paying attention to the page on Project Page URL Structure and the use of site.baseurl in your templates.

There is a lot to learn about how Jekyll works. Return to the Jekyll docs and try things out on your site.

If you like, set up a custom domain. This can be a bit tricky and varies slightly from one domain hosting provider to another. Here are some instructions for Namecheap.

That’s it for now.