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.
- 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
sudo in front of it if you need root permission.
$ 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
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
_site. You don’t have to, but please just do it.
3.) Adding static front-end files
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
$ jekyll serve
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
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 ---
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.