- Why you may want to read this article
- Create repository and add content of the site
- Configure Domain for the site
- Outcome
Why you may want to read this article
Github Pages is the best solution for me when I need to host some kind of “blog” or “site” with the content for the users. It is free to use, and does not require infrastructure maintenance as everything is hosted on Github. Jekyll sites are Static Site Generated (SSG) - which guarantees good SEO.
Once I created 1 site using Github Pages. That time I just followed the documentation, named repository with the necessary naming convention: <username>.github.io, and added my custom domain. The good thing about it is speed, reliability and price (free), as all infra is taken by github.
Now I want to add additional Github Pages, site or blog. How can we do it? Let’s find out.
Create repository and add content of the site
We need to create another public repository (for doing it for free).
For the first Github Pages site it should be <username>.github.io, where
I will use this naming: <prefix>.<username>.github.io, wherefix> is some arbitrary name that you want to add.
Add necessary source code to the repository (you could use Jekyll minima theme), commit, push. Create and push gh-pages from your main, and push it.
Note: it is enough to just add index.md, index.html or README.md to the source code, Github Pages will use it as entry point and will be able to host your site.
Once you’re done, and Github Actions build your branch - your site will be accessible under this path: https://<username>.github.io/<repositoryname>/
Configure Domain for the site
If you want to have your custom domain, e.g. andreyka.com instead of andreyka26-git.github.io, you would need to buy the domain in some domain provider and configure it to work with Github Pages.
In my case I will be using a Domain.com provider, you could use anything else, the concept is the same. In this article we bought the domain and pointed it to our server’s ip, and we’re going to do something similar, but since it is not our Server it will be a bit more complex.
For the example purpose, let’s assume I want example.com to be my site’s domain.
DNS
In your domain provider:
- Create 4 A records with
@name pointing to these ips (each record points to single ip):
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
- Add www redirect in your DNS provider: create record with type CNAME and name “www” pointing to the
<username>.github.io. Yes it might be confusing as your repository name is not<username>.github.io, but this way we tell the domain provider to point to the Github domain.
Git
In the git repository:
- Add CNAME file to the root of the git repository with the domain name(example.com), commit and push it.
http://example.com
- Go to repository settings -> ”Code, planning, and automation” -> “Pages”. Wait until github issues SSL certificate (it will do it automatically, in 30-40 mins), and check the “Enforce HTTPS”
Domain Verification
To protect yourself - it is better to do domain verification. But it can be done only after DNS records are populated (up to 24h).
Follow domain verification process:
Click on the profile page (not repository settings) -> “Settings” -> ”Code, planning, and automation” -> “Pages” -> “Add a domain” and put the domain name.
On the Domain Provider side, create a TXT record with “_github-pages-challenge-
Outcome
As a result I was able to host the github pages site in a matter of hours with my custom domain, SSL, source version control and free of charge. Most of the waiting time was to wait for the Domain provider to propagate the records.