Lab 3: Jekyll Styling
Overview
In this lab, you will modify the standard 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.
Look at the _layouts/ directory in your blog repository
directory.
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/blog to make sure
everything is correct.
Step 2: Adding more pages
Next, try adding in extra pages and links to your navigation bar.
Look at the _includes/ directory in your blog repository
directory.
Pages that are in your root directory will be automatically added to site.pages and be accessible. You can see them being used in the header.html file above.
Edit the about.md page, which you find in the root directory of your
blog project, to include information about you.
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
blog repository. Write some content for this page. It should automatically be linked in from the navigation bar.
Add a link to the CSCI 340 home page in the navigation bar you found in the header.html file.
Using GitKraken, Stage your changes, Commit them, and then Push your
commit.
View your post at http://username.github.io/blog to make sure
everything is correct.
Step 3: Updating the CSS
The blog is rather bland right now. Use your burgeoning CSS skills to style your blog to fit your style.
Look at the assets/css/style.scss file. This is where you will need to add any CSS code.
Make at least three CSS updates to your blog.
Step 4: Reflection
Make a new post about this assignment. 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/newtemplate to make sure
everything is correct.
Grading
To Partially Complete this lab, you must
To Complete this lab, you must do the above and