Project notes · 15 dic

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

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

1. Why Use GitHub Pages?

2. Setting Up a GitHub Repository

3. Building the Website

4. Publishing with GitHub Pages

5. Connecting a Custom Domain

6. Lessons Learned

7. 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!

← All articles