How to Create a Blog Using Jekyll
Creating a Website Using Jekyll
This guide is specific to Windows 10.
Why Jekyll?
Jekyll is the most popular static site generator. As the most popular static site generator, it is well documented and has a large community for support. If we need help and use Google, we are more likely to find answers.
Why a static site generator?
I have experience with HTML and CSS. I took a class that taught HTML and CSS in high school. I have to be familiar with HTML to use web crawlers and to automate browsers, use Selenium.
However, writing HTML to build a website is quite involved. People have made whole careers on knowing web development. Static site generators allow you to create websites at least theoretically without knowing HTML and CSS. It appears to me that we should be familiar with HTML and CSS to use a static site generator. Content management systems such as Wordpress do not require creating a site from scratch, but it builds dynamic sites and that seems unnecessary. More about static vs dynamic sites below.
What is a static site generator?
A static site generator is software that uses source files to generate/output static sites. It outputs static sites from dynamic wriing, so we code dynamically and publish statically.
What is a static site? What is a dynamic site?
A static site requires only client-side processing, whereas dynamic sites require client-side and server-side processing. Client-side technologies are HTML, CSS, and Javascript. A common error is to say static sites are only written in HTML and CSS and have no scripting. Using Javascript means using scripting; however, JavaScript is a client-side language. Client-side scripting is executed by a browser. Server-side scripting is executed by a web server. The number of server-side technologies is not limited. There are server-side technologies such as PHP and ASP.NET can generate HTML dynamically, meaning a person does not need to write or change the HTML code themselves. We can generally tell if a website is static or dynamic by whether we can interact with a site, not counting clicking links, hovering over a web element and making it change color or fade in and out, and the like. If we can post comments, log in and out, shop, etc. on a site; then it’s dynamic.
How do static and dynamic sites compare?
Static sites are simple. They load faster. It’s more secure becaue static sites don’t process useer data. If no user data is sent to the server, there is no data to be stolen. Dynamic sites are more complicated but also more powerful.
Installing Jekyll
I followed Jekyll docs installation instructions and got stuck a couple times, so I wrote this. It reiterates Jekyll docs but is specific to Windows 10 users and clarifies things that got me stuck.
1. Install a full Ruby development environment version 2.2.5 or above
First, check if we already have Ruby installed and if so, what version; run ruby -v in Bash.
If we don’t have Ruby 2.2.5 of newer installed and we’re using Windows 10, use the Ruby Installer for Windows because it’s easy. Follow directions.
The only tricky part is when you execute the installer and the following window pops up. It’s not obvious which components we want to install. We want to install all three components.
Why aren’t we installing Ruby and Jekyll in a Conda environment?
We are not installing and storing our site in a Conda environment because there are no Ruby packages in Anaconda Cloud for Windows.
GCC and Make
Jekyll doc’s installation instructions say that GCC and Make are required. They’re not. I tried to install GCC and Make and ran into errors. I asked around and was told they’re not necessary. I haven’t ran into problems from not having GCC and Make (yet at least).
2.In Git Bash, run gem install jekyll bundler.
This command tells our computer to install two gems: Jekyll and bundler.
Gem, Bundler, and Gemfile
The Ruby community often uses the terms Gem, Gemfile, and Bundler.
According to Ruby Gems documentation, “Bundler manages an application’s dependencies through its entire life, across many machines, systematically and repeatably.”. After installing bundler, when we run ‘bundle install’ bundler installs all the gems listed in our a text file called Gemfile by default. We call it just Gemfile if its named Gemfile. Otherwise, it is a gemfile. We can command bundler to use a specified gemfile instead of Gemfile by running bundle install --system --gemfile=path/to/gemfile_a. A gemfile is simply a list of gems. We will see later that Jekyll automatically creates a Gemfile for you. It might look something like this
source 'https://rubygems.org'
gem 'jekyll'
group :jekyll_plugins do
gem 'jekyll-feed'
gem 'jekyll-seo-tag'
end
Create a New Jekyll Site at ./myblog
In Git Bash, run jekyll new myblog. This will create a directory. It will provide a skeleton of our blog with the default layout to which you can add meat.
Build The Site and Make It Available on a Local Server
In Git Bash, run bundle exec jekyll serve.
Check it out at http://localhost:4000 (probably).
This totally depends on us building our site locally. If we build it in an AWS EC2 instance for example, we need to replace “localhost” with the instance’s IP address.