Jekyll Basics Beginners Guide
Jekyll is a static website generator that converts text files into static websites and blogs. Jekyll is simple and does not require databases. You can also use custom layouts, categories, pages and posts.
How Jekyll Works
In every Jekyll website, there are posts, pages and layouts.
Posts and pages are saved as markdown files. Your layouts are saved as html files.
As a static site generator, Jekyll takes your posts and pages and uses the layouts to generate a full website containing html files. The full website is saved in the
How does Jekyll know which layout to use? You tell it in your posts and pages or in your
You will meet two kinds of Jekyll website.
Regular theme Type
The layout and styling of the website are bundled together in the website folder.
Gem Based Theme Type
Gem based themes allow you to easily change how your website looks without too much hassle. Also, you will be able to easily adopt new changes once theme developers makes an update to the theme.
You can easily create a Jekyll website without learning how to code. Netlify and Forestry offers a quick 1-click install solution.
You can use Forestry CMS to update your website or edit the files on you Github account.
If you would like to install your Jekyll website locally, follow the official Jekyll documentation instructions on how to setup your local development environment.
Once you have Jekyll installed, you can proceed and create and run your first Jekyll website.
Creating a Jekyll Website
To create a new Jekyll website, run the command:
jekyll new first-jekyll-website
first-jekyll-website is the name of your website folder.
Once you install and create a Jekyll website, your website folder usually looks like this.
Get inside your Jekyll website folder using:
Build and run your websiteon your local server.
bundle exec jekyll serve
If you prefer to use the old method, your Jekyll folder might contain includes and layouts folder
Changing Jekyll Website Theme
Gem Based Theme Website
You can change the theme by changing the
_config.yml file. Replace the old theme’s name with the new theme’s name.
Regular Theme Website
To use a new theme, replace the current
_include folders with those ones on the new theme.
If the new theme uses different names of the layouts, than the ones you are currently using. Change those to match those on your website. That way, you can avoid changing the layout on each individual post.
I have created some Jekyll themes that you can use to create your first Jekyll website.
- Arcana Jekyll Theme Demo Github Download
- Bold Portfolio Jekyll Theme Demo Github Download
- Landed Jekyll Theme Demo Github Download
- Phantom Jekyll Theme Demo Github Download
Some other popular Jekyll themes are:
Jekyll Website Hosting
Front End Developer Newsletter
Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.