How I Built a Website Using GitHub Pages and a Custom Domain

15 dic

Introduction

A while ago, I needed to create a simple but professional website. I wanted something reliable, easy to update, and — most importantly — free. After a bit of research, I discovered GitHub Pages, a service that lets you host static websites directly from a GitHub repository. In this post, I'll walk you through how I built the website chirurgiacaviglia.it using GitHub Pages and connected it to a custom domain.

Index

Why Use GitHub Pages?
Setting Up a GitHub Repository
Building the Website
Publishing with GitHub Pages
Connecting a Custom Domain
Lessons Learned
Conclusion

1. Why Use GitHub Pages?

GitHub Pages offers a lot of advantages, especially for small personal or project websites:

Free hosting with no ads.
Integrated with Git, making updates simple and version-controlled.
Support for HTML, CSS, JavaScript, and static site generators like Jekyll.
HTTPS support out of the box.

For a lightweight website that doesn't need server-side scripting, GitHub Pages is perfect.

2. Setting Up a GitHub Repository

The first step was creating a new repository on GitHub.

I chose a regular repository name (not necessarily username.github.io since I was using a custom domain).
Made sure it was public — GitHub Pages for public repositories is free.
Cloned it locally to start working on the files.

3. Building the Website

I kept it simple:

Created an index.html file for the homepage.
Added a style.css file for custom styling.
Organized images and additional pages in folders.

The file structure looked like this:

/
|- index.html
|- style.css
|- /images
|- /about.html

I used basic HTML and CSS to create a clean and professional layout. No frameworks or fancy JavaScript for this project — just straightforward static content.

4. Publishing with GitHub Pages

Publishing the site was super easy:

I went to the repository settings.
Found the Pages section.
Selected the main branch and the / (root) folder.

After a few minutes, GitHub built the site and gave me a live link: https://<username>.github.io/<repository>/.

5. Connecting a Custom Domain

I wanted the website to be accessible through my own domain, chirurgiacaviglia.it. Here's what I did:

Step 1: Create a CNAME File

Added a file named CNAME in the root of the repository.
Inside it, simply wrote:

chirurgiacaviglia.it

Step 2: Set Up DNS Records

Logged into my domain registrar's dashboard.
Added the following DNS records:
- A records pointing to GitHub Pages' IP addresses:
  - 185.199.108.153
  - 185.199.109.153
  - 185.199.110.153
  - 185.199.111.153
- CNAME record (if needed) pointing to username.github.io

Step 3: Wait for DNS Propagation

DNS changes can take a few minutes to a few hours.
After propagation, the site was live at https://chirurgiacaviglia.it.

Step 4: Enable HTTPS

In the GitHub Pages settings, I checked "Enforce HTTPS" to ensure the site was secure.

6. Lessons Learned

Pay attention to the repository structure: GitHub Pages expects a clean layout.
Relative URLs can cause issues if you switch from GitHub.io address to a custom domain.
DNS propagation takes time — be patient!
HTTPS must be enforced manually if you’re using a custom domain.
GitHub Actions could automate future deployments (I'm considering it for updates).

7. Conclusion

Building and publishing a professional website using GitHub Pages was much easier than I expected. The whole process cost me almost nothing (just the domain registration), and now I have full control over updates through Git.

If you're looking for a simple, reliable way to put a project or portfolio online, GitHub Pages is a fantastic option. I highly recommend giving it a try!

Riccardo Bevoni