Use this guide if you are just getting started with Git (for forking, cloning, committing and pushing changes), Github Pages and/or Jekyll. If you are already familiar with these tools, instead use the Type Theme documentation.

Step 1: Get your theme running online

In this step, we’ll publish a blog on Github Pages which allows free hosting from Github repositories and runs Jekyll.

First, visit the Type Theme repository on Github, and use the “fork” button to create your own copy of the theme.

Fork button at the Type Theme repository on Github

Next, rename your repository by clicking the “settings” button in your newly created repository.

Settings button in a the forked Github repository

Rename the repository to username.github.io (replacing “username” with your Github username) to use Github Pages to host your Jekyll website.

Renaming a repository in the Github settings page

Visit https://username.github.io (again replacing “username” with your Github username) to see your Jekyll website live!

Geometric pattern with fading gradient

Step 2: Install Jekyll and Git

Skip this step if you already have Jekyll and Git installed.

If you are running Linux or Mac OSX, visit the Jekyll docs for instructions on installing Jekyll. If you’re running Windows visit Julian Thilo’s instructions for installing Jekyll on Windows as there are a few extra steps.

Also install Git, you may already have Git installed so in Terminal/Bash/Command Prompt type git --version to check if Git returns a version number. If not, visit the Git downloads page and install Git.

If you prefer to use a GUI, consider also installing a GUI client for Git. Screenshots will be included for the Github for Windows software (a similar Mac version is also available).

Step 3: Cloning your repository

Screenshot of clone URL and button to clone using GUI on Github repository

Create a copy of the repository on your computer by cloning.

To clone, in Terminal/Bash/Command Prompt type (replacing “username” with your own):

git clone https://github.com/username/username.github.io.git

Alternatively, if you’re using a GUI, make use of the ‘clone’ feature. Here’s what that process in Github for Windows looks like (after signing in and clicking the add button):

Clone button in Github for Windows GUI

Step 4: Your first post

Open the _posts folder and make new file called “2015-01-01-my-first-post.md”. Inside type the contents of your first post.

For example:

---
layout: post
title: My first post
---

Just testing posts in Jekyll

In Jekyll, posts use a variant of Markdown for formatting of text.

To see your changes locally:

  1. Save your new post
  2. Run the Jekyll server by typing jekyll serve in Terminal/Bash/Command Prompt
  3. Visit http://localhost:4000 in your browser to view the site

Your new post should be visible on the front page of the theme.

Step 5: Saving and sharing changes

Once you’re happy with your new post, you can commit changes using Terminal/Bash/Command Prompt and push changes to make them public:

  1. Add the new files to be tracked, by typing git add *.md
  2. Commit changes, by typing git commit -m 'add my first post'
  3. Push changes to the web, by typing git push origin master
  4. Visit https://username.github.io to see your changes live

Here’s what steps 1 to 3 look like in Github for Windows:

Commiting changes in Github for Windows by adding title and selecting 'commit to master'

Step 1 and Step 2: Adding files to the commit with a title

Syncing icon in Github for Windows with progress bar of sync

Step 3: Syncing in Github for Windows pushes changes to the repository online.

Step 5: Customising Type Theme

Now that you’ve got Type Theme running, know how to make posts, can preview Jekyll websites locally using jekyll serve, and save changes using “git push” or syncing in the GUI, you will want to make some finishing touches to customise the theme.

The most important changes to make are to:

  1. update the site configuration in _config.yml to match the URL your Jekyll website is hosted on (such as https://username.github.io),
  2. update your title in _config.yml to rename your Jekyll blog, and to
  3. update social icons to match your own usernames.

All the above changes are made by opening the _config.yml file in a text editor. Please visit the Type Theme documentation for the complete details on customising the theme with examples of configuration.