Lab 4: Jekyll Styling

In this lab, you will incorporate Bootstrap and templates to style your Jekyll blog on github.io.

Materials

Step 1: Altering current theme

The Jekyll blog we created in the last lab is currently styled with the "minima" template gem. This can be found at GitHub.

Take some time to read over the first two sections of the Overriding Jekyll Theme Defaults page, namely "Understanding gem-based themes" and "Overriding theme defaults".

Create a _layouts/ directory in your csci340blog repository directory. Using the method described, copy the _layouts/post.html file from your local minima gem.

Change the order of the title and date sections in your local post.html file. Here, and throughout this lab, use the bundle exec jekyll serve command at the terminal, run from your local repository, to check that your changes are successful.

Add an author tag to the frontmatter of your first post, with you as the author.

Using GitKraken, Stage your changes, Commit them, and then Push your commit.

View your post at http://username.github.io/csci340blog to make sure everything is correct.

Step 2: Replacing blog theme

Now, choose a Bootstrap template and download it to your local computer.

From Bootstrap Jekyll Blog Templates choose one of

  • Long Haul
  • Massively
  • Jasper

Your goal is to use this template in your blog.

For example, in Long Haul, you will need to replace the _layouts/ and _includes/ directories. Be sure to place the CSS and assets directory of your template into the proper location. Replace all default images and boilerplate text with your own. Edit the header.html file in the _includes folder to remove the GitHub and Downloads links, replacing them with the Home page and About link in your own blog.

Make a new post about styling your blog with a custom template. You must include at least two links and two images in your post. What parts were new to you? What parts did you struggle with? What parts still do not make sense? What are you looking forward to?

Using GitKraken, Stage your changes, Commit them, and then Push your commit.

View your post at http://username.github.io/csci340blog to make sure everything is correct.

Step 3: Adding more pages

With your restyled blog, you can start to think about adding in extra pages and links to your navigation bar.

Edit the about.md page, which you find in the root directory of your csci340blog project, to include information about you.

Add a link to the CSCI 340 home page in the navigation bar you edited in the previous step.

Create a new markdown file on the topic of your choosing (for example, I would make lemur.md), and place it in the root directory of your csci340blog repository. Write some content for this page, and then link to it from the navigation bar.

Using GitKraken, Stage your changes, Commit them, and then Push your commit.

View your post at http://username.github.io/csci340blog to make sure everything is correct.

Step 4: Rewriting blog theme

For a bigger challenge, using templates written for websites in general, from General Bootstrap Blog Templates choose one of

  • Suppablog
  • Bona
  • Katt
And restyle your blog with these files. The format in the zipfile downloaded will not match the Jekyll directory structure, and will need major revisions and alterations to integrate with the Jekyll liquid codes.

Make a new post about styling your blog with this more difficult template. You must include at least two links and two images in your post. What parts were new to you? What parts did you struggle with? What parts still do not make sense? What are you looking forward to?

Using GitKraken, Stage your changes, Commit them, and then Push your commit.

View your post at http://username.github.io/csci340blog to make sure everything is correct.

Grading

For a C, complete Step 1. For an A, complete Step 2 and 3. For a 120, complete Step 4.