How I built a site with a Jekyll theme

First up, install Jekyll:

gem install bundler jekyll

Next we can spin up a new site to run locally.

Copy Code

jekyll new my-awesome-site

Take it it for a test run! Jump in to the directory:

Copy Code

cd my-awesome-site

Run!

Copy Code

bundle exec jekyll serve

Now browse to http://localhost:4000 to see your new site in action!

*If you get a webrick error, install the bundle as below!

Copy Code

bundle add webrick

Now we’ve got a base site created, we can go ahead and spin up a new Jekyll theme.

Copy Code

jekyll new-theme my-theme

Now we’ve spun up the basic structure for the theme, we can go ahead and update the gemspec:

spec.summary
spec.homepage

Add a summary, and the homepage for the theme. My theme is sitting in a GitHub repo.

Connecting your new blog to a remote theme

Installation time!

Open your blog site’s Gemfile.

Comment out the default theme and add the following line for the theme gem:

Copy Code

#adding a new remote theme
gem 'flameroasttoast-jekyll-theme', '>= 0.1.0', :git => 'https://github.com/michellejt/flameroasttoast-jekyll-theme.git'

You can just comment out the default “minima” theme and add your new new in

Next, edit the theme in the _config.yml# Build settings:

Copy Code

theme: flameroasttoast-jekyll-theme

Comment on the default theme here too, and add in your remote theme

To install, execute the following commands in a terminal for your site:

Copy Code

bundle install

Now we can see our Jekyll site running it’s new theme!

Copy Code

bundle exec jekyll serve

Then go to: http://127.0.0.1:4000

To update the theme from the source theme:

Copy Code

bundle update flameroasttoast-jekyll-theme

Add this line to your Jekyll site’s Gemfile:

Copy Code

gem "your-theme"

And add this line to your Jekyll site’s _config.yml:

Copy Code

theme: flameroasttoast-jekyll-theme

And then run:

bundle
Or install it yourself as:

$ gem install flameroasttoast-jekyll-theme

Collections

Using the directory name part of the URL

With collections – always _(underscore) the directory name

Navigation

Part of the installation of this theme – is to create the navigation on the blog site. The theme then reads the content from _data\navigation.html and uses liquid to display it.

create _data folder
with navigation.yml

navigation:
main:

- title: GAMES WRITING
  url: games-writing

- title: COMICS AND FICTION
  url: comics-and-fiction

- title: ART
  url: art

Install of this theme for the blog:

create navigation _data/navigation.html

add collection settings to config yaml

add folders for collections – must start with _

on the root create the landing page for the collection eg. games-writing.md

---
layout: default
title: games-writing
---

Adding custom scripts

Step 1: Make the Script file > Create the script (.js) file as normal.

You might want to save in an appropriate folder, for example:

../assets/js/some-script.js

You may need to make the /assets/ folder if you do not have it.

You don’t need to use an underscore (_) at the front of the folder name. At deploy, Jekyll will then simply copy that folder and contents into the build at `_site’ as a static asset.

Step 2: Call / reference the script in your html.

Then just call it as you need it!

Installation time!

To update the theme from the source theme:

Collections

Navigation

Install of this theme for the blog:

Adding custom scripts

Sites I've built on Jekyll