How I set up this blog using Jekyll
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.
1.) Open your Terminal
2.) Install the Jekyll gem
$ gem install jekyll
$ 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.
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.