6 min to read
How this site was built
How to install and maintain a Github hosted website using jekyll
Install Jekyll
The first step is installing Jekyll on your machine. There are detailed instruction on how to do this.
Install Github
If you’re on Mac or Linux, Git is most likely already installed. If you’re on Windows, go to git-for-windows.github.io and follow the instructions to install Git.
Once you have those installed, goto your command line and type these commands to makes sure it has installed properly. Its not important to have the same version as me this step is more as a double check.
Create a new Site
Open up your terminal navigate to the place where you want to store your site files. and then run the Jekyll new command, and then give a name for the project, I’ll call it “projectHB”
Running Jekyll new creates a new folder called “projectHB” with a bunch of files inside.
cd into that folder Then you want to open it up in your favorite text editor or code editor. I use Visual Studio Code but you should use whatever IDE you are comgortable with.
Jekyll sets up a blog-style site with a sample post in this _post folder. If you are building a blog, any new post you write will go into this _post folder as well.
Now initialize a git repository for this project.
“git init” to initialize a git repository
“git add .”
and “git commit -m” and I’ll just say “build” as the note
Make sure you have navigated inside the site folder you created then run the following
If you’re on Windows you need to run a command called “bundle lock –add-platform ruby”, and then “bundle lock –add-platform x86_64-linux”
Preview the site
To preview the site, we’ll run this command in the terminal.
bundle exec jekyll serve
Then open a web browser and post this into the URL
http://127.0.0.1:4000/
This is what the site should look like at this point
GO back into the terminal and press Control + C to stop the preview server.
Install a Theme
There are many Jekyll themes available on sites like jekyllthemes.org and jekyllthemes.io
Most themes come with instructions that will tell you how to install the theme in your project.
On https://jamstackthemes.dev/ I found a blog site theme just like my favorite website medium. Its called Mediumish. Now I will follow the link to the gituhub repository where the theme is located
https://github.com/wowthemesnet/mediumish-theme-jekyll
Now click on clone or download
then click on download zip
Loacte where you downloaded the file
Extract the file to a new file folder
With both folders open located your project file that holds the the basic jekyll theme you created
Open the project folder and select all the folders and delete them
Open the new download and extracted theme. Select them all
Then move them all to the project folder
Then run “bundle install” again
Then run “bundel exec jekyll serve”.
You can now pre-view your site by going to http://127.0.0.1:4000/
Now open the file folder in your IDE of choice.
The configuration file config.yml
Every jekyll project contains a configuration file called _config.yml
Open you editor and naviagate to your project file. Then open the configuration file.
You can change the title of your site Add an email address here and add a description as
Later on, when you get ready to publish the site and you have your own domain name, you want to put that in the Url property.
if you make changes to config.yml, they won’t be picked up until after your restart the previous server manually. What I mean by that is go into the terminal, press in Ctrl+C to stop it, now run “bundle exec jekyll serve” to see your changes
Add a Post
Posts go in the underscore posts folder. You can manually create a new file in that folder. In order for it to publish, the file name must be exactly like the others. And it must be a .md or markdown file format.
Edit front matter content
The section at the top of each post file is called the front matter. This section stores metadata or properties about the post. You can change or add to these properties to change things about the post.
Add a Page
When you want to edit the about page simple open it in your IDE. It too is in markdown lanuage and easy to edit.
If you would like to add new pages you will do it here under the pages folder. For example if you want to create a page describing how you made your site this might be a great place for it
Generate the Site Files
To deploy the site to the web, you’ll need to run a different command to tell Jekyll to generate the final site files.
bundle exec jekyll build
All of the site files are saved in folder called site.
We need upload these files to a web server.
Make sure that everything is checked into Git.
git status
git add .
git commit -m “build”
Set up for Github
Sign into Github and click New
Push an existing repository from the command line git push –set-upstream origin master
What it will say when its done
Deploy with netifly
Log into netlify https://www.netlify.com/
Follow instructions and give Netlify acccess to the new repo
Add custom Domain
Add new Posts to website from Command line
Open the website file in your IDE
Go into the psot folder and create a new folder.
Jekyll will only publish your new post if you follow the title format YYYY-MM-DD.
Start every new post with the date that you want it published.
Open the Command line Run “git status”
Add the changes to the local git repo with “git add .”
Commit the new post with git commit -m “name the change”
Add it to the github repo with git push
If you made it this far and wish to support my efforts
