Skip to main content Link Menu Expand (external link) Left Arrow Right Arrow Document Search Copy Copied

Lesson 1 - Getting Started

Create a Jekyll website from scratch.

Table of Contents

Create a New Repository in GitHub

  1. Sign into GitHub
  2. At the top-right, click the “+” Sign.
  3. Select “New Repository.”
  4. Under Owner, select your username.
  5. Under Repository name, type “my-website”.
    • You will be redirected to a Quicksetup page. For now, you don’t need to touch the settings. We’ll return to this page in a moment…

See: GitHub’s Guide to Creating a Repo for more detailed info.

Create Jekyll Site

Note: To install and run Jekyll, you will need to use your computer’s *Command Line interface. See Installation Instructions

  1. Open Terminal (On a mac, type Cmd + spacebar) and search “Terminal.”
  2. Create your new Jekyll site *Note: you can choose any name! Here, I’ve chosen “my-website.” 
    jekyll new my-website
  3. Change into your new directory 
    cd my-website
  4. Build the website 
    bundle exec jekyll serve

See: Jekyll’s Quickstart Guide for more detailed instructions.

Modify Gemfile

  1. In the main folder, open the file “Gemfile.”
  2. Uncomment the line below, and replace GITHUB-PAGES-VERSION with the latest supported version of the github-pages gem. You can find this version here: “Dependency versions.”
    • e.g. At the time of creating this module, the dependency for GitHub Pages is “228.”
 gem "github-pages", "~> 228", group: :jekyll_plugins
  1. Add the following gem
gem "webrick"

Modify YML file

The YML file configures the main settings for your website. *Note: Make sure you have the correct URL. Capitalization and backslash placement matters!

  1. In the main folder, open the file “_config.yml”.
  2. Fill in the following fields:
    • URL (main url) e.g. “https://cmiya.github.io”
    • BaseURL (subpath) e.g. “/my-website”
    • title
    • email
    • description
    • Github_username

Test file (locally)

  1. In Terminal, type:
bundle exec jekyll serve
  1. In your browser (Chrome), visit the URL:
http://localhost:4000/

If successful, you should see a preview of your page.

Key Points / Summary

  • Local (i.e. your computer) vs. Remote (e.g. GitHub)
  • Gemfile
  • YML file