Mahesh's blog
Published on

How to start Jekyll powered blog?

Tagsjekyllherokugitbloghow-to

The problem with existing blogging sites is difficulty in customization and creating or updating blog with minimal effort.

As a developer, it will be easy for me to customize site by editing code in HTML than to deal plugins. Using familiar languages to maintain blog and change it according to my taste.

Second part of the problem is to add or update content. This may not be bigger problem in existing blogging sites but I like the option of adding content as simple as adding commit to code repository.

Setup

Git

As mentioned in git-scm.com :

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Install Git : https://git-scm.com/downloads

Ruby

As mentioned about Ruby language in https://www.ruby-lang.org/en/ :

A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.

and install Ruby from above site.

Heroku

Heroku helps in making deployments easy. It has good free tier for hobbyist web apps. To install Heroku tools and know more about heroku: https://www.heroku.com/

Jekyll

Jekyll is a static site generator platform which generates boilerplate code which is in Ruby, HTML and Javascript. For more details, refer Jekyll home page: http://jekyllrb.com/

How to start a blog

Step 1 : Generate new site using Jekyll gem

First, install needed gems : jekyll and bundler and then generate site using jekyll gem.

gem install jekyll bundler
jekyll new my-blog

Step 2 : Setup git repository

cd my-blog
git init
echo My blog > README.md
git add README.md
git commit -m 'Added Readme'

If you are using any remote repositories like Github or Bitbucket, you can create remote repository and push the above repo to remote.

Step 3 : Run Jekyll site

bundle exec jekyll serve

After running above command, you should be able to see your blog in the web browser at this address: http://localhost:3000

Step 4 : Add sample blog post

For adding new blog, you can add sample html or markup (.md extension) file in _posts folder.

Here is gist of sample blog post as a reference: https://gist.githubusercontent.com/ugudlado/a925d4321591b299996877a47be2421d/raw/79466a9983b5af69b53d534f938806c89f320374/2017-07-29-hello-world.md

As you can see metadata about blog above the content, it is used during site generation and can be used for customization.

Step 5 : Setup for Heroku

a. unicorn is http server for apps and needed for heroku deployment. So, add unicorn gem by adding following line to Gemfile :

gem ‘unicorn’

b. Add unicorn configuration in config folder using this gist: https://gist.github.com/ugudlado/ec3e1195c3955cd2d37112bd7695a12e

c. Add Procfile to repo with following:

web: bundle exec unicorn -p $PORT -c ./config/unicorn.rb

d. Commit all these changes to repo like we did in Step 2

Step 6 : Deploy to Heroku

heroku login
heroku create

Heroku automatically creates a site, deploys your code and logs the URL. You should be able to open the URL in the browser to see your jekyll powered blog.

Also Heroku enables continuous integration means as you commit to your Github or Bitbucket remote repository, it automatically detects new commits and deploys new site. For this, you need to add link repo in Heroku app configuration.

Next steps

  • Apply theme to Jekyll site
  • Add multiple pages to Jekyll site
  • if you don’t like to do above, you can try : Github pages

Please let me know if you have any questions or issues.