An Interest In:
Web News this Week
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
Setting Up Jekyll for GitHub Pages 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:
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:
---
title: Hello
layout: default
---
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:
{{ 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:
git remote add origin [email protected]:your_username/mysite.git
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 Setup a Jekyll Theme
New Course: Building Static Websites With Jekyll
The Command Line for Web Design: Grasping the Basics
Original Link:
TutsPlus - Code
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.More About this Source Visit TutsPlus - Code