How to Build a Simple Personal Website
This tutorial will teach you how to host a personal website on the internet for free, plus domain fees, using Gandi.net, GitHub Pages, and Cloudlfare.
Prerequisites
You will need a personal account on each of the following:
Domain
- Register a domain on Gandi.net.
DNS
A Records
;; A Records
example.com. 1 IN A 185.199.108.153
example.com. 1 IN A 185.199.111.153
example.com. 1 IN A 185.199.110.153
example.com. 1 IN A 185.199.109.153
Note: Replace example.com
with your domain.
Note: Make sure you have a ‘.’ at the end of each record: example.com.
CNAME
- On Gandi.net update the
www
CNAME record in your DNS settings: Domain > DNS Records.
;; CNAME Records
www.example.com. 1 IN CNAME username.github.io.
Note: Replace username with your GitHub username.
Website
- Create a new public repository on GitHub under your personal account. I called mine
personal-website
. You can call yours whatever you want to. - Create an
index.html
file on the main branch of your new repository:
<!DOCTYPE HTML>
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Hosting
- Enable GitHub Pages for your repository: Settings > GitHub Pages > Source > Main Branch.
- Configure GitHub Pages to use your custom domain: Settings > GitHub Pages > Custom Domain >
www.example.com
Note: Make sure you include www.
in the domain name.
This will create a CNAME record in your repository the value you entered.
SSL
Use the following steps to enable ssl
to secure your website by encrypting all traffic over https
.
- Add your domain on Cloudlfare.
- Choose a free plan.
- Follow the instructions to change your nameserver on Gandi.net to Cloudflare: Domain > Nameserver
- Enable “Always Use HTTPS”: Crypto > Always Use HTTPS
Once configured your domain will automatically be redirected over https
.
At this point, your DNS will transfer to Cloudflare and traffic will be redirected.
Wait
Your website will be available at your domain once your DNS changes have been propagated. This can take a few minutes or a few hours.