- Published on
How to start Jekyll powered blog?
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.