Github Pages

25th of January, 2017

Using Github Pages

For those of you that do not know what Github Pages stick around!

Github Pages is a hosting platform powered by Github. This means that you can not only use Github for software projects but also your own personal website and project websites! Yes, each Github-hosted project can have its own website. An important note is that Github Page servers are static (meaning no dynamic content). This and much more will be covered in the post.

Gh-Pages

Until recently to have a website hosted via Github you had to create a repository (or use a preexisting one), create a special branch called “Gh-pages”, and then upload your static website files. Thankfully Github has since updated this (applies more to software repositories). You still need to create a separate branch for the website, but you may title it as you please.

As for creating a repo just for your personal website, the process is relatively the same. To start off create a repository and title it USERNAME.github.io, where USERNAME is replaced respectably. Great, now you have your repository so now what!? It is now time to populate your repo with static web files! To do this you have three options. Our first option is the traditional route - creating it all from scratch, as a second option Github offers templates, and the best option - use Jekyll.

Github s Jekyll

To kick this off we must know what Jekyll even is. So, what is it?

Jekyll is a server side engine for compiling bits and pieces of code into a functional website. There are several amazing blog posts on Jekyll so I will simply assume you have some prior knowledge.

Github has Jekyll built in running in safe mode, all this means is plugins are not supported (security reasons). So you can upload the source files directly and they will be compiled on the server. This makes development and designing of a website so much faster.

Check out my Github for this site’s jekyll source!

Custom Domains

With Github-Pages applying a custom domain is as easy as creating a simple file. It can be even easier by going to the web interface!

Using Github’s Online Interface

  1. Navigate to your Github repository.
  2. Select the “Settings” tab.
  3. Stop at the GitHub Pages heading.
  4. Scroll down to “Custom Domain” then input your domain name.
  5. Click “Save”!
  6. Profit

cname-setup-in-github-settings

Prior to doing this make sure you set up GitHub with your DNS provider (keep reading to find out how).

Creating a CNAME File Manually

  1. Navigate to the Root directory.
  2. Create a file called “CNAME” (no extension).
  3. Type your domain name (no protocols).
  4. Save, Commit, and Sync (Push).
  5. Profit

DNS Record Setup

GitHub can’t just use your domain without first pointing your domain to your repository. To do this you need to add two DNS records.

Adding DNS records varies from provider to provider. For this example, I will be using CloudFlare (read on to see why)!

In CloudFlare navigate to the DNS section. Then follow these steps:

Record 1

  1. Select “A” record as the type.
  2. “Name” is your domain name.
  3. Point it to 192.30.252.154
  4. Click “Add Record”

Record 2

(Basically the same)

  1. Select “A” record as the type.
  2. “Name” is your domain name.
  3. Point it to 192.30.252.153
  4. Click “Add Record”

Both records should be an Orange Cloud

Simplify with CloudFlare

This is not a paid promotion, I truly believe every small site should use CloudFlare.

What is CloudFlare? CloudFlare is a Content Delivery Network (CDN), DNS service, Security Provider, and more. Something this good couldn’t be free right? Guess again, it is. You get an amazing lifetime service for free.

What exactly can CloudFlare do?

CloudFlare can do a lot! Read through the list and watch as your curiosity and interest intensifies.

  1. DNS management
    • Easy Record Creation
    • Force SSL on all URLS
    • FREE SSL certificate
  2. Customization
    • Page Rules
    • Caching Levels
    • Custom Apps
  3. Analytics
    • Requests
    • Bandwidth
    • Unique Visitors
    • Total Visitors
    • Threats Found
    • Rate Limiting
  4. Security
    • DDoS Protection
    • Firewall Control
    • “Under Attack” Mode
    • Challenge presented to Possible Threats
    • IP Blacklist and Whitelist
    • Access Rules
  5. Speed
    • Auto Minifying of JS, CSS, and HTML
    • Accelerated Mobile Links
    • Rocket Loader (Load JS Faster)
    • Mobile Redirect
  6. Scrape Shield
    • Email Address Obfuscation (Prevents bots from stealing emails)
    • Server Side Excludes (Hides sensitive content from the bad guys)
    • Image Protection (Prevent outside linking to images)

All of these options are free and fully customizable!

How to set up CloudFlare

CloudFlare has an amazing tutorial on this here. Keep reading for a simplified version.

There are a few things you need to do to start using CloudFlare, to begin follow these steps:

  1. Create an account at CloudFlare
  2. Add your website
  3. Change DNS Name Servers to CloudFlare issued ones
  4. Allow up to 24 hours for changes (Normally a few minutes is enough)
  5. Profit

Terminology

Jekyll

Jekyll is an engine that compiles templates, snippets, data, and more into a functional site. This way you can use repetitive snippets. If you update the “base” snippet the rest will update as well. There are also variables for Jekyll such as the date and more.

Repository - Repo

A repository is a collection of files. In our case, this collection is hosted on Github’s servers.

Github

Github is a cloud-based git repository hosting service. You can easily sync your local repos to your cloud repos with Github.

Static Web Files

Static - Unchanging files. These are basic HTML, CSS, and JavaScript files. No database is used as it is not dynamic.

Content Delivery Network - CDN

A CDN is (in basic terms) a group of servers spread out. If a user is to access the data hosted via a CDN the data is pulled from the nearest server. There are many perks to a CDN including performance boost, security, traffic control, and more!