A Quick Start Guide for GitHub Pages

GitHub Pages

GitHub pages is a fantastic resource to quickly put together a static site. The interface lets you quickly throw together a project page, informational site, or portfolio with minimal effort. You can see my quick example page here!

All websites have their roots in HTML and CSS, markup languages that control how information is displayed without manipulating the data. However, most designers no longer code directly in these languages. Instead, they use languages like Markdown or Liquid or static site generators like Jekyll that will take a more user-friendly input and generate the corresponding HTML and CSS. Github pages relied on Markdown by default and Jekyll when using a built-in template.

Starting a Site

To create a GitHub Page, you start by making a repository. This repo will hold the code for the site including all the assets that are associated with it.

The name of your new repo will be the name of the site, and along with your username the URL that your page will start with. If you already own a domain, you can add that later.

The repo will need to be public if you are on a standard account (and since you are making a public webpage this will be fine) and you need to add a README. Once you have all that set up, you can create the repository and your site is on its way!

Next, go into the Settings menu for the repository. Near the bottom you need to activate Pages. Set the Page to build from the master branch and hit save – within moments your site is ready to go!

Building Your Site

At the start, your site is just going to render the Markdown in the README.md as your website. If you would like, you can simply edit that document using Markdown and go from there. You can also go back into the settings menu and use a ready made Jekyll theme to give your site some more aesthetic appeal. You can customize the CSS on the page like this.

And that’s all you need to have a Page up and running on the web in only a few minutes!

1 thought on “A Quick Start Guide for GitHub Pages”

  1. Pingback: Editing Jekyll Theme CSS for GitHub Pages – Mr. Marchant

Comments are closed.