Custom Styling Jekyll Themes

In this post we’ll be looking into how to modify your GitHub Page Jekyll theme. There are around 14 Jekyll themes available on GitHub Pages. If you happen to use one of these, then you might want to read this post explaining how to modify the Jekyll theme in GitHub. For the purposes of this post, we’ll be working with the Architect Jekyll Theme.

Step 1 – Custom HTML Editing

1. Login to GitHub and navigate to the Repository where the Architect theme is applied to
2. Go to Code section and create new folder called _layouts in the root on your master branch
3. Next, go to GitHub Pages themes and find your theme repo, in our case Architect
4. In the Architect repo identify the _layouts folder and copy default.html file from there into your repo’s _layouts folder
5. Now you can edit the default.html in your repo to style your page as you wish
6. When done editing, commit the default.html file
7. Your edits to the HTML layout will now be reflected on your GitHub Page

Step 2 – Custom CSS Editing

1. Back in your GitHub Repository’s Code section
2. Create folder structure as follows assets/css and create new custom.css file inside
3. Add some styles to this file as you wish to edit the theme
4. Commit assets/css/custom.css
5. Find your default.html file create in Stage 1 above
6. Edit it adding the following HTML tag in the head section

<link rel="stylesheet" type="text/css" media="screen" href="/assets/css/custom.css">

7. Commit default.html
8. Your edits to the CSS will now be reflected on your GitHub Page

If you need to link your Google Analytics with your Jekyll GitHub Pages then please read my article on Adding Google Analytics to Jekyll GitHub Pages.

And if you own a Domain and you’d like to point it to your GitHub Pages then please read my article on Pointing Domain to GitHub Pages.