Build your own Jekyll Blog

From Grundy
Jump to navigation Jump to search
Error creating thumbnail: File missing

Jekyll is a simple, static site builder. What it basically does is to convert a template directory containing folders and files in different format into a ready-to-publish website which can be easily hosted on servers. Due to the following features Jekyll is highly suggested for publishing blogs and simple sites

  • Ease of Setup
  • Requires no prerequisite knowledge of Web development like HTML, CSS, JS
  • Beautiful Templates available online

Note - Static websites have pages with fixed contents that is directly served from server's file directory to the user and hence are identical for everyone unlike dynamic websites which require web programming and database in the back-end and generate content by running a web-application for each user request.

Setting Up Jekyll

  • For Linux based system
  • Steps:- 1. Install curl. sudo apt-get install curl 2. Install rvm script.
    curl -sSL https://get.rvm.io | bash -s stable

    Use the result of this step in next step. The result in my case is as follows:

    Error creating thumbnail: File missing

    Note down what's written in quotes in the line "To start using RVM you need to run 'source ... '


    3. Set RVM environment

    From previous step you will get a reference, what absolute path of script to be used with source command.

    Hence, I am running below given command, find this line and run this on your system.

    source /home/username/.rvm/scripts/rvm

    4. Install latest available ruby version

    Use the following commands to complete this step:

    rvm requirements

    Use the latest available ruby version instead of 2.4.1. (Get information about latest version from here. )

    rvm install 2.4.1

    5. Select default version to be used

    rvm use 2.4.1 --default

    (Change the version accordingly)

    6. Install nodejs

    sudo apt-get install nodejs

    7. Install Jekyll

    We will simply use the gem command to install.

    gem install jekyll

    You can check the version by using the command.

    jekyll -v

    8. Create blog and up the server

    Now we are ready to create the blog and run the server.

    jekyll new myblog

  • For Windows
  • A quick way to install Jekyll on Windows is by using Chocolatey. Steps are as follows:- Steps:- 1. Install a package manager for Windows called Chocolatey 2. Install Ruby via Chocolatey. choco install ruby -y 3. Reopen a command prompt and install Jekyll. gem install jekyll Updates in the infrastructure of Ruby may cause SSL errors when attempting to use gem install with versions of the RubyGems package older than 2.6. (The RubyGems package installed via the Chocolatey tool is version 2.3) If you have installed an older version, you can update the RubyGems package using the directions [1].

Creating your first Post

If you have successfully completed the above steps then you can open and modify your site locally. Execute the following on terminal

cd myblog

bundle exec jekyll serve _site

Error creating thumbnail: File missing

Just open your browser and go to http://127.0.0.1:4000/. Congrats ! That's your blog with a default post, you can now modify/add more posts.

Error creating thumbnail: File missing

Here's how your directory '/Documents/myblog' should look like

Error creating thumbnail: File missing

Jekyll automatically tracks the changes made in files so you don't have to serve it every time. Just refresh the page and you'll see the change appearing
Note:Changes to _config.yml are not traced during automatic regeneration._config.yml file holds global configurations and variable which are read only once, when you execute bundle exec jekyll serve _site .
Steps:-

  1. Open folder _posts and create an empty document with the name YYYY-MM-DD-Post-Title.markdown. You have to be careful that the name matches the format or else Jekyll will not interpret it.
  2. Click on the file and modify its content. Now any markdown file is composed of two parts
    • Liquid Tags - Tags are specifics about the given post that are separately rendered by Jekyll. These include layout, ,title , date, type (If you plan on writing blog about multiple topics and want posts to appear separately in each section) etc. You can create your own tags too !
      ---
      layout: post
      title: "Second Post"
      date: 2017-07-11
      ---
    • Content - This include the rest of the content matter that is going to appear below the title. It can include text, images, links etc. Note that since this is markdown file, you must format content using markdown tags/syntax. For our post, I have added a sample .md file. For markdown syntax, Click Here.
  3. Reload the page and there you'll see your second post !

Using Templates

Many templates are already available online which can be directly used, I have listed some of them.

Error creating thumbnail: File missing



jekyllthemes.org
jekyllthemes.io
themes.jekyllrc.org

Modifying Layouts


I have used a simple template from the above website. Download this Template here.
Extract the file and open the directory, you can see lot many folders and files

Error creating thumbnail: File missing


The first step is to open _config.yml file and modify two tags url and base_url. Change these to "" (ie empty string)

Error creating thumbnail: File missing



Now you are ready to open the site locally. Run the command
jekyll serve
in the directory and navigate to http://127.0.0.1:4000/. Now this website is already well-built and has a lot more features. Hence the code base is lot more complicated.
I have listed down all major parts of Website explaining the code. Enjoy !

  1. Title - _config.yml is the configuration file. Changes made to it are not automatically rendered by Jekyll. So if you have made changes to this, serve again to see the changes. The title tag in this file is the main heading of the page which you see in top-left (Airspace). Now changing this changes the title of the website.
  2. Pages - On the top, you see the navigation bar which has multiple tabs. Home, Work, Blog, Service and Contact. This is helpful when you are planning to write on separate topics or you can tabs like Projects, Resume etc in your own website. The files for pages are present in the directory named index.html, blog.html, contact.html, work.html.
    index.html is the Homepage. You can open any of these file and modify content. If you want to add another tab to the list follow these steps
    1. Create an empty document in the same directory with the name same as name of your tab
    2. Copy the liquid tags from index.html and change title and permalink. Permalink is the internal url address of the page wrt the base_url.
    3. Go to _includes and open header.html. Add another line to the ul tag.
      "<li><a href="{{ site.baseurl }}/soc">SoC</a></li>"

  3. _layouts - Contains three files default.html, post.html, page.html. default.html is the layout of homepage, page.html is for other pages (Work, Blog etc) and post.html is for blog posts which you can find under Blog tab
  4. _includes - Contains three files header.html, head.html and footer.html. Clear by name !
  5. img - Contain all image assets of the website. If you plan on adding pictures to your posts you have two ways
    1. Use anchor tag in the content portion of any page
       <a src = "/path/to/img></a> 
    2. Create new img tag in Liquid tags section of any page and modify page.html in the _layout folder. This method is suggested when you want image for all posts
  6. css, js - Clear by name.
  7. _site - This folder is automatically generated by Jekyll by interpreting all other files. You dont have to modify this folder.

Useful Links

  • Learn to build a basic blog from this youtube tutorial.
  • Tutorial to build a full-fledged static website here.


References

Official Jekyll Website

See also