How to quickstart and launch your website using Jekyll?

Alexandra Murtaza -

With websites delivering more and more content, the process of maintaining and updating sites efficiently has increased the demand for the usage of static site generators. As opposed to a traditional web application stack, static site generators apply data and content to templates, and generate page views in advance, instead of waiting till the page is requested. Static site generators break the overhead of generating the views every time a service is required, and they are a scalable option that ensures security and performance. 

Jekyll is one of the most practical and popular static site generators that has emerged as an alternative to other blog and website solutions like WordPress. While WordPress has evolved into a complete solution, its large range usually exceeds user needs. Jekyll, on the other hand, is a lightweight alternative that addresses the problem.  

Jekyll is a lightweight solution for blogs and company websites because it only packs the most necessary components. Hence, it is possible to operate websites without the need for additional software and unnecessary attachments like a database. 

Jekyll runs on Ruby and harnesses the power of the Markdown language. You feed Jekyll with the text written in Markdown, eliminating the need to write HTML. It has several inbuilt themes that provide CSS automatically. If you want, you can tweak the default theme settings, or use the huge ecosystem of Jekyll themes that can control and design the structure of your content. With hundreds of free and premium themes available, there is something for every kind of website project. 

One such example of Jekyll theme that you can use with ease is the one offered by Creative Tim in collaboration with Jekyll Themes. You can use the premium and free Bootstrap design system Jekyll theme for your blog or an entire website using over 1100 elements, 43 sections, and 17 example pages.

Advantages of using Jekyll

Jekyll has the following advantages over other site generators:

  • Lesser site loading time
  • No need to maintain CMS and databases
  • Regular security updates not necessary
  • Is not dependent on additional tools and specific formats
  • Easier to integrate with version control systems like Git.
  • Self-hosting in GitHub servers is possible
  • Freedom for programming can choose any GUI or editor

How to quickly start and launch your website using Jekyll?

Requirements:

  • Ruby version 2.0.0 or above, including all development headers.
  • Gem to manage the Ruby packages
  • Bundler to create the Ruby packages
  • An IDE for web development purpose
  • A GitHub repository to save the code
  • Basic HTML and CSS knowledge
  • Basic command-line knowledge

Installation (for Windows)

1. Install Ruby+Devkit version from RubyInstaller. Set the default options for installation.

2. Execute the following command at the last stage of the installation process, to install gems with native extensions:

ridk install

3. Install Jekyll and Bundler by executing the following command:

gem install jekyll bundler

To check if Jekyll is properly installed, execute the following command:

jekyll -v

Installation (For Mac):

1. Check to make sure that you have XCode Command Line Tools installed in your computer by executing the gcc -v command. A prompt appears, asking if you want to install it. Alternatively, you can execute the following command to install XCode:

xcode-select –install 

2. Check if Ruby is installed by running ruby -v. By default, Ruby should be installed on OSX computers. If you have a version older than 2.0.0, update it by executing the following command:

sudo gem install ruby

3. Install the Bundler package manager which installs the Jekyll dependencies by executing the command:

sudo gem install bundler

4. Create a directory with a file called Gemfile (without any extension). Type the following content into the file and save it:

gem ‘github-pages’

source ‘https://rubygems.org’

Execute the following command in the directory that contains the Gemfile:

bundle install

The command runs for a while and installs gem bundles.

Quick starting and launching your website using Jekyll

1. Initialize a new project by executing the following command:

jekyll new jekyll_project

2. Change to the directory of the project and run the following code:

jekyll serve

This command compiles the changes made to any file except the configuration file, into a static HTML. 

3. Navigate to the URL https://localhost:4000 to view the default website.  

Jekyll easily processes SCSS (Sass) files to CSS (.scss – > .css) and Markdown to HTML (.md – > .html) without the need of additional terminal commands. The file structure consists of the following:

  1. The “distribution” folder is called _site and it is generated by Jekyll, deleted, and overwritten whenever the jekyll serve command is executed.
  2. The _sass folder consists of Sass partials, and each file present there complies into the css folder.
  3. Files or folders placed into the main directory is compiled as it is to the _site directory. You can place your .md files here in the desired order, to convert it to HTML. 

Jekyll and GitHub Pages Site

Jekyll can also be used to further customize your GitHub Pages site, as it offers built-in support for GitHub Pages. You can host a Jekyll site for free using Pages. You can:

  • Create GitHub Pages site with Jekyll
  • Test your Github Pages site locally with Jekyll
  • Add content to your GitHub Pages site using Jekyll
  • Set markdown processor for your GitHub Pages site using Jekyll
  • Add themes to your GitHub Pages site using Jekyll
  • Troubleshoot Jekyll build errors for GitHub Pages sites.

Argon Jekyll theme by Creative Tim supports free site hosting in GitHub Pages, without the need for non-native plugins. The theme is a collaboration between Creative Tim and Jekyll Themes and offers you one-one support and extensive documentation for all of your Jekyll-specific issues.