Lab 2: Jekyll Blogging

Overview

In this lab, you will learn about Jekyll and Markdown to create a blog on github.io. You will gain exposure to a framework that generates websites, continue building experience with GitHub and GitKraken, familiarize yourself with the terminal method for installing software, and host a local server.

Materials

• Jekyll
• Setting up Jekyll
• Markdown
• Markdown Cheat Sheet

Blogging with Github Pages

Step 1: Forking a repository

Navigate to Github.com and create a Fork of this repository, calling your version blog, with the following options:

You should now have a shiny new blogging repository, and you can navigate to it’s main page.

Step 2: Cloning your repository locally

Now, clone the repository locally with GitKraken as you did in the last lab. Find blog in your linked GitHub.com account, navigate to or create a good directory, and click the “Clone the repo!” button.

Step 3: Installing Ruby and Jekyll

Open the Terminal or Command Prompt and navigate to your new local repository directory.

Next, you will need to install Ruby. You can do this in a few different ways. Follow these instructions to get Ruby on your computer. I recommend the RVM version for Mac.

To check that Ruby is properly installed, from the command line, type

ruby --version

With Ruby installed, we need to get an extension called bundler. We can install bundler with the gem package manager. Type the following line at the command line:

gem install bundler

Depending on how you installed Ruby, you might need to use sudo in front of the previous line to properly execute the installation.

Step 4: Viewing the default blog

To see your blog in action, we will first look at your blog locally. Again, in the directory corresponding to your cloned repository, run the following command:

bundle install

to load up all the necessary libraries on your computer. Then you can type

bundle exec jekyll serve

This will start a local server on your computer, and when it is running, you should be able to view your blog through the url http://127.0.0.1:4000/.

On Github.com, click on the Setting tab near the top of the repository page. Scroll down to the GitHub Pages section, and set the Source to be the main branch. This way, your current repository will be processed as a subdirectory of your username.github.io website.

Now, you can look at your blog on GitHub Pages, using https://username.github.io/blog.

Step 5: Fixing the default blog

Hmm … there are a few things we need to customize before this looks like our own blog.

Next, edit the file named _config.yml.

You should notice that this _config.yml contains some basic info that is displayed on your blog. Edit the following lines to personalize this information.

• title
• name
• email
• description

Also, uncomment the social links: line, and add in any social media platforms you want to link from your blog.

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

Step 6: Making your first post

Our last step is to use Markdown to start writing blog posts. Future assignments will require you to make post on this blog.

You will be adding files to the _posts/ directory, following the YYYY-MM-DD-descriptive-tile.markdown naming conventions found in the “Welcome to Jekyll” post. These posts will be written in the Markdown language, which is then converted to HTML. There are a number of examples already in _posts/ directory, please review them.

First, create a _drafts/ folder, and move all of the example files in _posts/ into this new drafts directory.

Write a new post titled “Introduction Post”, describing your setup experience in this blog. 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? Your post must include at least two links and a list.

As you write blog posts for this and future assignments, I recommend using the local server method shown above for previewing and tweaking your text as you make commits. Once you are happy with your text, push it to github repository.

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

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

Grading

To Partially Complete this lab, you must

• complete Steps 1-4

To Complete this lab, you must do the above and

• complete Steps 5-6