Jekyll can be used with GitHub Pages to create simple, blog-aware, static websites. This video will show you how to setup the bare-bones Jekyll flat file structure in 60 seconds!

Once you’re all set up and in need of inspiration, check out what’s available among the Jekyll themes on Envato Market.

If you’d prefer a written explanation, here’s the whole process described in clear steps:

New Project

First, create a folder on your system for a new repo. Do this by using the terminal to navigate to where you want your new folder to be, then entering: mkdir mysite. Our new folder is called “mysite”, but you can name it whatever you like.  

Change directory to this new folder by entering cd mysite–once there create a configuration file by entering the command vim _config.yml. Your terminal window will show you the contents of this file, so hit i to enter insert mode, then add the following content:

1

title: My Site

Hit Esc to leave insert mode, then enter :x to save the changes you’ve made.

Create Index

Next we need to create the index document, so enter vim index.md and much like you did before, add the following content:

1

---

2

title: Hello

3

layout: default

4

---

5

6

Hello!

Add Layouts Folder

Now create a new folder by entering mkdir _layouts and change to that directory with cd _layouts. Give it a default template document vim default.html and add the following content:

1

{{ content }}

Initialize New Repo

Now we need to initialize the folder as a new repo and commit the changes. So begin by navigating back to the root of our project with cd ... Then enter git init, followed by git add --all && git commit --all. 

Pushing to GitHub

Switch over to GitHub via the browser and create a new repo. 

You’ll be given a few options at this point, so grab the commands where you see push an existing repository from the command line. The commands will read something like:

1

git remote add origin git@github.com:your_username/mysite.git

2

git push -u origin master

Paste these commands into the terminal to push your local repo to GitHub.

GitHub Settings

Lastly, in the GitHub repo Settings, opt to use the master branch for GitHub Pages, then hit Save.

Jekyll is all set up, and your website is ready to be built!

Jekyll File Structure, Explained

• _config.yml works as the Jekyll configuration file. This is what GitHub Pages reads for site-wide settings such as global variables, and more.
• index.md is the root index document of the GitHub Pages website.
• _layouts/default.html is the default template file that index.md will be based on.

Useful Resources

For more information about building static websites using Jekyll, check out the following resources around Envato Tuts+!

• 

  How to Set Up a Jekyll Theme

  In this tutorial we’ll go through setting up a Jekyll theme from the very beginning, starting with some basic installation advice, stepping through how to...
• 

  New Course: Building Static Websites With Jekyll

  In our new course you’ll learn all about the Jekyll static site generator and build a whole website from scratch in less than two hours. Join Guy Routledge...
• 

  The Command Line for Web Design: Grasping the Basics

  In this tutorial you’ll learn all the essentials of working with a terminal or command prompt including how to open it, how to run commands, how to repeat...