[P02] Hosting basic website for free in Github+Cloudflare
This website is hosted freely in Github pages and dns hosted via Cloudflare. The setup is so easy that I was able to setup multiple website in the same way. Bonus: cloudflare supports auto mail forward to custom domain, so I also get support for [email protected]
email out of the box.
Steps to prepare:
Purchase domain and setup dns entries to Cloudflare
First, purchase the domain name and add in Cloudflare. This will ensure that you can create subsequent url/links with the help of cloudflare easily.
Once you add the domain in cloudflare, you will get Nameserver entries for the domain in cloudflare dashboard (DNS tab). Update those nameserver entries with your default entries in domain-purchase control panel.
Create Github repo and Test
Locally, create a github repo, put your website code as HTML Generated Content and test. You can follow this website’s code in github.com/AhmedMRaihan/public-website location. Here, I am using Jekyll to generate the html pages.
Once local testing is ok, push your changes to the Github repo.
Setup Github pages and Cloudflare
Steps here:
- Go to Github repository’s
settings/pages
section and add your custom domain there. Documentation here - Set
Github Actions
as source of the html contents for the page - Setup a workflow to publish the pages. You can see
.github/workflows/jekyll-gh-pages.yml
file of this website’s source code. - Tick the
Enforce HTTPS
to ensure the website is always served in HTTPS protocol - Head back to cloudflare and do these:
- Add a new A record for your domain’s root url (Apex domain) using the IP range mentioned in Github Page - Manage Domain - Linux
- Setup Full as SSL/TLS encryption mode