How to make this blog using Jekyll and deploy it to Github pages
This blog post is about creating this exact blogging site using the simple, blog-aware, static site generator, Jekyll. Jekyll is the engine behind Github Pages, the place you will be deploying for free once finished. I like using Jekyll because of the fact that I can write static posts in markdown instead of HTML.
Notes:
- The source code for this project can be found here.
- I am running Mac OS X and this tutorial (at least installation) will be specific. If you are on a different OS go here.
- I couldn’t post a lot of code here because Jekyll was automatically rendering some of the dynamic code I wanted shown. Therefore, I have linked those parts to the specific files in my Github repo.
- Remember to swap out my content for yours :)
Let’s get started.
1.)
Installation and setup
Assuming you have Ruby/RubyGems installed, and are running Mac OS X, run the following command in your terminal.
$ gem install jekyll
$ gem install rdiscount
*Add a sudo
in front of it if you need root permission.
Then,
$ cd your/fav/directory
$ jekyll new sexyblog
This will create everything you need to start writing your blog posts.
Run the following to check out your Jekyll site locally at http://0.0.0.0:4000/,
$ cd sexyblog
$ jekyll serve
This will create a _site
folder within your project, ignore it. Jekyll already gives you a simple great looking site, if you are happy with it and just want to start writing blog posts skip to step 4
.
2.)
Configuration and adding/editing files
First, edit your _config.yml
file to look like this:
markdown: rdiscount
pygments: true
permalink: /posts/:title
rdiscount:
extensions: [smart]
Then, edit the feed.xml
file to look like the the code found here.
*Reminder: couldn’t post the code here because Jekyll was automatically rendering some of the dynamic code I wanted shown. #lookingoutforyou #inception
Now, edit the index.html
file to look like this:
---
layout: default
title: Add a title
---
<p>Write a nice short bio about yourself
here, it will be shown on the home page.</p>
Next, create a file called posts.html
and add the code found here.
Lastly, edit the .gitignore
file and add .DS_Store
below _site
. You don’t have to, but please just do it.
3.)
Adding static front-end files
Now we need to add the HTML, CSS, and JavaScript files used for this blog site.
First, remove the folder called _includes
, you won’t need it. Next, go into _layouts
and edit the default.html
file to look like the code found here. Then, edit the post.html
file to look like the code found here. Delete page.html
.
We don’t actually need to add any CSS or JavaScript for this blogging site because we are linking the style-sheet and some JavaScript found here and here.
Run,
$ jekyll serve
And you should see your new blog at http://0.0.0.0:4000/. All we have left now to do is write some posts and deploy to Github Pages. As you can see, Jekyll has already made your first post for you.
4.)
Writing blog posts in Markdown
All posts you write for your Jekyll site must go in the _posts
folder. There is one other rule, you must name your .markdown
files using the convention YYYY-MM-DD-name-of-post.markdown
.
At the beginning of each of your .markdown
files make sure to add the following:
---
layout: post
title: "Title of blog post"
date: YYYY-MM-DD XX:YY:ZZ
categories: jekyll update
---
To learn what other fancy things you can do with markdown, go here or look at my source code.
5.)
Deploying to Github Pages
To deploy your newly made, Jekyll backed blogging site, follow the detailed instructions Github has supplied here. Once you push this to your username.github.io
repo, Github will automatically recognize that this is a Jekyll app and take care of everything for you. If you want to add a custom domain (i.e. blog.sahildiwan.com) follow the instructions Github has supplied here.