Advertisement
  1. Web Design
  2. Jekyll
Webdesign

Setting Up Jekyll for GitHub Pages in 60 Seconds

by
Difficulty:IntermediateLength:QuickLanguages:
This post is part of a series called 60 Second Video Tutorials.
Start Learning Web Design in 60 Seconds
Adobe XD in 60 Seconds

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:

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:

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:

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:

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+!


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.