Hosting a Static Website (on Github)

Posted on Sat 31 October 2020 in Other

There are multiple web services providers that can be used to host a static website (blog). In this post I'll cover the simplest method I know that is via Github Pages.

Hosting on Github Pages

1. Ensure you have a Github account.

First you need an account, if you don't have one, it's a straight forward process to get one go to https://github.com/ and Sign up.

1.1 Add an SSH key

I'll be showing you how to upload stuff into your online repo using a Secure Shell Protocol, so you will need to make sure you have added a public SSH key from your device in your Github account. Useful documents to create the key and how to add it into your Github account can be found here.

2. Create <gitusername>.github.io

Create an empty Repository that will contain your output content. Name the repository <gitusername>.github.io which will be the name of your website (how other users would access to it). For simplicity do not add any file in your Github repos just yet, leave it fully empty.

3. Prepare you content to be uploaded

You have two ways to push your content and keeping it up to date

Traditional way

First you may want initialize git within the output folder of your project.

cd Users/christian.cardone/Projects/Research/blog/output
git init
git checkout -b main

Then you need to add remote origin, commit the content to be uploaded and push it to the remote repo.

git remote add origin git@github.com:<gitusername>/<gitusername>.github.io.git
git add --all
git commit -m "My first website article"
git push origin main

As you may have noticed, this method can be a bit annoying if you already had a repository on the main active folder of your project.

Using gh-pages

This tool will help you to push only the generated content (from your output folder) in 2 steps, so it's easy an convenient in the long run. Go to your project directory in your local device and initialize git (if you haven't already). 

git init

Then use the install the github pages tool and upload your content.

pip install ghp-import

ghp-import output
git push git@github.com:<gitusername>/<gitusername>.github.io.git gh-pages:main

4. Check your website

Now you can type on your browser your website address <gitusername>.github.io and see your content alive!

Extra Add your own domain name

Subdomain (www)

Add a CNAME file to your repository (within Output folder) and include there your custom domain, Example:

.
|-output
    |-achives.html
    |-author
    |-authors.html
    |-categories.html
    |-category
    |-index.html
    |-tags.html
    |-theme
    |-welcome.html
    |-CNAME

And inside CNAME

www.christiancardone.com

After this, go to your DNS provider and create a CNAME record that points the subdomain (www) to the default domain of your website. Example:

Name    | Type  | TTL   | Data
-------------------------------
www     | CNAME | 1h    | christian-cardone.github.io

After this you should be able to access to your website using your www.

Setting up APEX domain

To set up your raw domain AKA APEX domain (example christiancardone.com), you need to configure the same 2 things; CNAME entry and DNS.

First add to your CNAME file the custom domain, following the example your CNAME would look like:

www.christiancardone.com
christiancardone.com

Second go again to your DNS provider and create either an ALIAS or ANAME or A record and point it to the IP addresses of Github Pages:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

That's it! you can double check that everything was set up correctly by digging both you subdomain and domain addresses using dig in your terminal. Example:

$ dig EXAMPLE.COM +noall +answer
> EXAMPLE.COM     3600    IN A     185.199.108.153
> EXAMPLE.COM     3600    IN A     185.199.109.153
> EXAMPLE.COM     3600    IN A     185.199.110.153
> EXAMPLE.COM     3600    IN A     185.199.111.153

$ dig WWW.EXAMPLE.COM +nostats +nocomments +nocmd
    > ;WWW.EXAMPLE.COM.                     IN      A
    > WWW.EXAMPLE.COM.              3592    IN      CNAME   YOUR-USERNAME.github.io.
    > YOUR-USERNAME.github.io.      43192   IN      CNAME    GITHUB-PAGES-SERVER .
    >  GITHUB-PAGES-SERVER .         22      IN      A       192.0.2.1

Hope it worked for you, for more information you can refer the official documentation from Github https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site

Github Website