##Setting up a simple blog in Jekyll

Jekyll is an open source blog engine that converts Markdown documents to HTML and generates a static website. You can upload this website to your own server or host your site on github pages. You can use it to run your blog and also build a portfolio page with static pages. It is highly customizable and has an active community. http://jekyllrb.com/

In this post I want to explain how to quickly set up your Jekyll site without too much technical knowledge.


###Getting started

1.) Open your Terminal
2.) Install the Jekyll gem

$ gem install jekyll

3.) $ cd into the directory where you want to store your blog folder
4.) Generate your Jekyll site by typing the following in to the terminal

$ jekyll new my-new-blog

That’s it. Jekyll created a new folder called my-new-blog. It contains the standard Jekyll pages and folders. The structure should follow the pattern outlined here: http://jekyllrb.com/docs/structure/

Jekyll comes with a localhost server, that allows you to review how your blog would look online. Use the Terminal and make sure you are in the my-new-blog folder. Run

$ jekyll serve

With the server running you can preview the site by visiting http://localhost:4000/ in your browser.


###Publishing/Deploying your Jekyll site

There a numerous ways to deploy your Jekyll site. Among the options that interested me were hosting your blog for free on GitHub pages or uploading it to your own personal site via FTP.

The project Glynn makes the upload to your FTP simple. It converts the files in your Jekyll blog folder (my-new-blog in our example) into a publishable format (e.g. converts the markdown files containing your posts into HTML) and uploads it to your FTP.

You can do this following a few simple steps:

1.) Install the Glynn gem

$ gem install glynn --source http://gemcutter.org

2.) Edit the Jekyll file called _config.yml in your my-new-blog folder and include the following values:

markdown: redcarpet
pygments: true
auto: true

ftp_host: 'yourwebsite.com' # fill in your website
ftp_dir: '/web/site/root' # fill in the root of your path to the folder where you want to host the website
ftp_passive: false

# optional
ftp_port: 21                  # default 21
ftp_username: 'your_user'     # fill in your FTP username
ftp_password: 'your_ftp_pass' # fill in your FTP password
ftp_secure: true              # default false

3.) When you now run $ glynn from your Terminal Glynn will convert your files and upload these via FTP to your site.

$ glynn

You can now navigate to yourwebsite.com and your server should load the same index.html file that was in your Jekyll directory my-new-blog.

Jekyll is quite easy to customize. You can view some sites people built with Jekyll here: https://github.com/jekyll/jekyll/wiki/Sites

To upload your posts simply write them in Markdown and insert them in your _posts folder. Make sure they follow the file format of year-month-day-name-of-post.md and include the YAML header so Jekyll can properly convert it to HTML. This is what the YAML header of the present post looks like:

---
layout: post
title:  "How I set up this blog using Jekyll"
date:   2015-05-18 10:00:00
categories: general
tags: general
---


How to add tags to your articles in Jekyll

Adding tags in Jekyll is not to hard, because these are supported out of the box. You can add either tags or categories. Both are defined in your post files in the YAML header as you can see above.

To create a page listing all posts belonging to one category, structure your code like the following. In this case we are iterating over all posts on this blog with category [coding]

Place this file in a folder in your root directory and name the file index.html, that way you can link to /coding and the page with all articles in the [coding] category will be listed.

To add the category name to each posts title, simply add

You can include this in the post.html file under /_layouts, to effect each post individually.

To also have the category listed on your main page, next to your posts titles, add the same code to your index.html file in the root directory.

If you have any questions or comments don’t hesitate to get in touch.