How I Deployed My DevOps Portfolio Website with GitHub Pages and Custom Domain (techbrodev.com.ng)

Introduction:

A walk-through of how I built and deployed my personal portfolio website using GitHub Pages, a custom domain, and a branded professional email. This post covers the architecture, deployment process, tips, and key lessons learned along the way.

This project was a turning point in my DevOps journey; it gave me a hands-on understanding of how DNS records, GitHub Pages hosting, and SSL certificates work together to make a website globally accessible and secure.

Beyond just deploying a site, I also learned how to integrate branding and automation, from setting up my domain techbrodev.com.ng to linking it with my custom email address and ensuring HTTPS security via GitHub Pages.

If you’ve ever wanted to build a personal developer portfolio that looks professional, performs well, and showcases your projects effectively, this guide will walk you through everything I did, from setup to deployment, troubleshooting, and optimization.

Prerequisite

Before starting this project, make sure you have the following in place:

i. GitHub Account: To host your portfolio website using GitHub Pages. In my case (https://github.com/stillfreddie/stillfreddie.github.io)

ii. Local Project Folder: Your portfolio files (HTML, CSS, JS) should already be working locally. In my case, I used the iPortfolio template as the base design and customized it to reflect my brand and DevOps projects. Visit their website to get yours (https://bootstrapmade.com/bootstrap-portfolio-templates/)

iii. Custom Domain Name, Purchased from Whogohost (now Go54). This is where I got my official domain, techbrodev.com.ng, which I later connected to GitHub Pages.

iv. Basic Knowledge of Git Commands: For pushing your code to a GitHub repository (git init, git add ., git commit -m, git push, etc.).

v. DNS Propagation Tools : To verify your DNS changes after setting up your custom domain. Tools I used include:

• DNSChecker.org

• dig command (for terminal DNS lookups)

• whois and curl for troubleshooting domain connection and SSL.

• Text Editor – VS Code or any editor of your choice to manage your project files.

• Stable Internet Connection – Especially important when pushing to GitHub and updating DNS records.

Please Note

After downloading the iPortfolio template, I didn’t just use it as-is. The original template was a single-page design, where all sections (Home, About, Resume, Portfolio, Contact, etc.) were stacked on one long scrolling page.

To make it more organized and professional, I decided to split it into multiple dedicated pages — such as:

index.html (Home Page)

about.html (About Me Page)

resume.html (Resume Page)

projects-portfolio.html (Portfolio Page)

Devops-expertise.html (DevOps Expertise Page)

contact.html (Contact Page)

I used my AI assistant to help me refactor the code, rewrite internal links, and update navigation menus so each page could function independently while maintaining the same look and feel.

This process helped me understand how modular HTML structures work, how to link multiple pages properly, and how to maintain consistency across the entire site. Every line of code was reviewed and customized to match my personal brand and preferences.

Project Overview

This project is my personal portfolio website, designed to showcase my DevOps journey, technical projects, and professional background. The main goal was to create a fully functional, custom-branded portfolio that’s not only beautiful but also technically sound, built using real-world hosting and deployment workflows.

The website was developed from the iPortfolio HTML template, which I completely customized with my own design, content, and structure. I separated the original single-page layout into multiple pages for better navigation and scalability, such as Home, About, Resume, Projects, Expertise, and Contact.

The site is hosted using GitHub Pages, which serves static files (HTML, CSS, JavaScript) directly from a GitHub repository. I then connected it to my custom domain, techbrodev.com.ng, purchased from Whogohost (now Go54).

To give it a professional edge, I also set up a branded email address : contact@techbrodev.com.ng, using Go54’s email hosting. This makes it easy for recruiters, collaborators, or visitors to reach out directly from my domain.

In short, this project brings together key DevOps and cloud concepts, version control, automation, DNS management, SSL security, and web hosting, all applied in a simple yet production-grade setup.

Architecture Explanation

The architecture of this portfolio website is simple yet demonstrates core DevOps and web infrastructure principles, version control, continuous deployment, DNS management, and SSL encryption.

At a high level, the website consists of three major components:

i. GitHub Pages (Static Hosting)

ii. Custom Domain (techbrodev.com.ng from Go54)

iii. SSL/TLS Certificate (for HTTPS security)

How It Works

Code Hosting on GitHub

All website files (HTML, CSS, JS, images, etc.) are stored in a GitHub repository under my account: https://github.com/stillfreddie/stillfreddie.github.io

Each change I make locally is committed and pushed to GitHub using standard Git commands.

GitHub Pages automatically builds and hosts the site from the main branch, no servers or manual deployments needed.

GitHub Pages as a Web Server

GitHub Pages acts as a static web server, meaning it serves HTML/CSS/JS files directly to users’ browsers.

The service is globally distributed through CDN (Content Delivery Network) for fast access worldwide.

Domain Name Integration

My custom domain techbrodev.com.ng was purchased from Whogohost (now Go54).

Inside Go54’s DNS dashboard, I created:

An A record pointing to GitHub Pages’ IPs

A CNAME record pointing to my GitHub Pages domain (stillfreddie.github.io)

This ensures that whenever someone types techbrodev.com.ng, DNS routes them to my GitHub Pages site.

SSL (HTTPS) Setup

Once the domain was linked, GitHub Pages automatically issued an SSL certificate via Let’s Encrypt.

HTTPS was enabled to ensure data between the browser and my website remains encrypted and secure.

I later verified SSL propagation using tools like DNSChecker, SSL Labs, and curl.

Branded Email Configuration

I used Go54’s email service to configure a professional address: contact@techbrodev.com.ng

DNS MX records were added in Go54 to route mail properly.

This architecture eliminates the need for any physical servers or cloud VMs; everything is handled through version control, static hosting, and DNS automation. It’s lightweight, cost-free, and production-ready for personal branding or small portfolio projects.

Let’s Dive in.

Step 1.

Project Folder Structure

Here is a typical Image of how my Project folder Structure looks.

Step 2: Upload Project Folder to VSCODE

i. Open Visual Studio Code (VS Code) on your system.

ii. Click on the File menu in the top-left corner.

iii. Select Open Folder

iv. Navigate to the project folder, in this case, iPortfolio-1.0.0.

v. Click Open to load the folder into VS Code.

Once it’s open, you’ll see your entire folder structure (including all HTML, CSS, JS, and asset files) neatly displayed in the Explorer panel on the left-hand side.

Step 3: HTML Files Explained

index.html (Home Page)

This is the main landing page of my portfolio. It introduces what i do, highlights my professional role, and gives a quick snapshot of my DevOps skills and tools. It usually includes a navigation bar that links to other sections like View Resume, Projects, and Contact.

about.html (About Page)

This page tells my personal story, who I am, my background, and my journey into Cloud and DevOps engineering. It includes a summary of my technical strengths.

project-portfolio.html (Projects Page)

This page showcases my completed DevOps projects. Each project card contains:

Project Title, Short Description, Tools & Technologies used, a link to the full write-up on Hashnode

devops-expertise.html (Expertise Page)

This page highlights your core technical areas, Cloud platforms, CI/CD, Containers, Kubernetes, and Monitoring tools. It acts as a quick technical profile for recruiters and collaborators.

contact.html (Contact Page)

This page contains a contact form integrated with Formspree at the backend, meaning whenever a visitor fills out the form and submits it, the message is automatically sent directly to my email inbox. This ensures anyone who visits my site can reach me quickly without needing to expose my email publicly.

resume.html (Resume Page)

This page allows visitors to view my professional resume (Fred_I_Resume.pdf) hosted within my assets folder. It’s a clean and direct way for recruiters to access my CV without navigating away from my portfolio.

Step 4: Exploring the Backend Code (HTML Structure & Customization)

Now that we’ve seen how each page looks on the frontend, let’s take a quick look behind the scenes, the HTML structure that powers these pages.

The portfolio was originally a single-page template (iPortfolio), but I customized and expanded it into a multi-page website with separate files such as index.html, about.html, resume.html, project-portfolio.html, and contact.html, devops-experstise.html

Using my AI assistant, I modified the HTML code to:

i. Create individual pages instead of one long scrolling page.

ii. Link all pages together through a dynamic navigation bar.

iii. Integrate Formspree into the Contact Page to receive messages directly in my inbox.

iv. Add a functional resume download link pointing to my hosted PDF file inside the assets folder.

v. Personalize all sections with my content, images, and branding.

Below are a few important code snippets that show the key areas I customized, such as navigation, contact form integration, and resume download functionality.

about.html

I used my AI assistant to restructure the HTML, rewrite sections in my voice, and update the skills section with relevant DevOps tools like Azure, AWS, Docker, Terraform, and Jenkins. This gave the page a real personal touch while keeping the modern visual style of the template.

Below is the main part of the About page, showing my profile section, bio, and customized skills layout that displays my DevOps expertise in a clean and interactive format.

Contact page Formspree integration (backend)

The contact form on my site is connected to Formspree, which is a simple hosted form backend that forwards form submissions straight to my email inbox. This lets visitors message me without exposing my mailbox or building a custom server. The screenshot below shows the exact HTML form block I used in contact.html with the Formspree endpoint.

devops-expertise.html

This page highlights my cloud, CI/CD, Docker, Kubernetes, and monitoring tool-set with a sleek, interactive design. Creating this page helped me understand how to communicate technical expertise visually, transforming what could have been a plain “skills” list into a dynamic DevOps-focused section that feels authentic and professional.

resume.html

What I did here:

Rewrote the timeline content to reflect my real DevOps career progression and bootcamp experience.

Organized the layout into sections for Summary, Education, and Professional Experience.

Integrated my downloadable PDF résumé (Fred_I_Resume.pdf) and linked it directly from this page for easy access.

Adjusted the typography and spacing to improve readability and balance across desktop and mobile screens.

The “Resume” page combines structured career information with a direct link to my downloadable PDF résumé.

index.html With Google Analytics Integration

This is the main landing page of my portfolio, the first impression visitors get when they arrive at techbrodev.com.ng. It’s built to showcase my personality as a Cloud and DevOps Engineer while maintaining a clean, professional design.

What I did on this page:

i. Customized the hero section to clearly state who I am, Fred (Tech Bro), and what I specialize in (Cloud, DevOps, Automation).

ii. Modified the navigation links to point to all my other sections: About, Resume, Project Portfolio, DevOps Expertise, and Contact.

iii. Optimized all text and images for SEO, ensuring faster load times and better discoverability on Google.

iv. Replaced the default meta tags and titles with my own name, domain, and brand identity to help build credibility.

v. Integrated Google Analytics into this page to track site visitors, their click activity, and overall engagement, allowing me to monitor real-time insights directly from my Google Analytics dashboard. This helps me understand which sections get the most traffic and improve user experience over time.

vi. Ensured the overall layout remains responsive across devices, whether viewed on desktop, tablet, or mobile.

What this page represents:

1. My digital identity as a DevOps professional.

2. The homepage that connects every other section of my website.

3. My ability to combine branding, technical implementation, and analytics into one cohesive platform.

Key takeaway: The index page is more than a static homepage; it’s an optimized, analytics-aware entry point that captures who I am, what I do, and how visitors interact with my content.

project-portfolio.html

his page serves as a showcase hub for all my completed DevOps and Cloud Engineering projects, both personal and bootcamp-based. It’s designed using a clean grid layout that makes each project card stand out while remaining consistent with the overall theme of my portfolio website.

What I did on this page:

i. Structured the layout into project cards that display:

ii.The project title

iii. A summary of what the project does

iv. The tools and technologies used

v. A direct link to read the full case study on my Hashnode blog.

vi. Ensured that each card dynamically represents a real-world DevOps workflow (e.g., Jenkins CI/CD, Terraform Infrastructure-as-Code, Docker containerization, Kubernetes deployments, and Azure/AWS projects).

vii. Added hover effects and animations using AOS and Bootstrap components for better interactivity and smooth transitions.

viii. Kept the grid responsive so it adapts well on all screen sizes — from mobile to desktop.

ix. Maintained consistent color themes, typography, and spacing for professional polish.

What this page represents:

1. A visual summary of my DevOps journey and the real projects I’ve implemented.

2. A way for recruiters, collaborators, and tech enthusiasts to explore my work directly.

3. A central portfolio gateway that leads to detailed blog posts explaining each implementation step-by-step.

Key takeaway:

The project portfolio page is like my DevOps gallery; it reflects my hands-on experience, technical creativity, and documentation skills, all in one section.

Phase 2- Step 1: Pushing the Project to GitHub Repository

Now that all the HTML, CSS, JS, and asset files are complete, the next step is to version control the entire project and host it live on GitHub Pages. This allows anyone across the world to access your portfolio using your custom domain or GitHub Pages link.

Why This Step Is Important

It helps you track every change made to your project.

Makes it easy to collaborate, roll back, or update files later.

It’s the foundation for hosting your portfolio website live.

Quick Concept Recap:

Version control using Git lets you take snapshots of your project. Each snapshot (commit) becomes a version that you can revisit anytime. By connecting your local project to GitHub, you’re essentially syncing your local files with a cloud repository.

Step-by-Step Commands to Push to GitHub

Open VS Code Terminal and follow the steps below carefully

1. Initialize Git in your project folder: Run the command " git init" This command tells Git to start tracking your project locally.

2. Add all your project files: Run the command " git add . " This stages all files in your project folder (ready for commit).

3. Commit the files with a message: Run Command " git commit -m ". This creates the first snapshot of your work with a descriptive message.

4. Connect your local repo to GitHub, run Command " git remote add origin https://github.com/stillfreddie/stillfreddie.github.io.git (stillfreddie.github.io is the Repository Name for this iPortfolio Website)

5. Lastly, run the command " git push -u origin main. " This uploads all your files to your GitHub repository under the main branch.

Step 2: Verify Successful Push to GitHub.

After we have successfully pushed our Code to GitHub, we have to check our GitHub repository to see if the code has been successfully pushed. Head to GitHub under your repo, verify if the code is now living inside the GitHub repository created.

Step 3: Verify the site is live

After pushing your code to GitHub, you must verify that the site is actually reachable. I confirmed that my portfolio is currently live at: https://stillfreddie.github.io/stillfreddie.github.io The homepage loads correctly, navigation links work, and core content (About, Projects, Resume) is visible.

I’ll now proceed to connect it to my custom domain and configure GitHub Pages settings (CNAME, branch source, and HTTPS enforcement) to make it available professionally via techbrodev.com.ng.

Phase 3: Host the portfolio live via GitHub Pages and connect techbrodev.com.ng

Now that the project is pushed to GitHub and the repository is live, the next step is to enable GitHub Pages and connect the custom domain techbrodev.com.ng so the site is served at your brand URL. This section explains everything I did, step-by-step, including the small but critical DNS edits at Go54 (Whogohost), the CNAME file in the repo, and how to verify HTTPS and DNS propagation.

Step 1 :

1. Create or update the CNAME file in your repo

Create a file named CNAME at the repository root containing exactly the domain you want to use.

File content: techbrodev.com.ng

2. Commands to add and push the CNAME file: On VSCODE Terminal run these commands:

   git add CNAME

   git commit -m "chore: add CNAME for GitHub Pages custom domain"

   git push

   

   Note: The CNAME file should contain exactly the domain string and no extra spaces or blank lines.

   Step 2: Enable GitHub Pages in the repository settings

   1. Go to your GitHub repository page.

   2. Click Settings -> Pages in the sidebar.

   3. Under Source, choose the branch you host from (main) and folder Root. Save.

   4. In the Custom domain field, enter techbrodev.com.ng if not already filled by the CNAME. Save.

   5. Ensure the checkbox for Enforce HTTPS is checked once GitHub issues the certificate.

      

      Please Note: One of the standout advantages of hosting your portfolio or project site on GitHub Pages is its seamless integration with custom domains and free SSL certificates. Even if your domain registrar or hosting provider doesn’t offer an SSL certificate, GitHub Pages automatically provides one at no extra cost. This means your website not only appears authentic and professional but also ensures that visitors can access it securely via HTTPS, boosting trust and accessibility. It’s a simple yet powerful way to make your site look polished and reliable without any additional configuration.

      Step 3: Configure DNS at Go54 / Whogohost

      Log into your Go54/Whogohost control panel and open the DNS management page for techbrodev.com.ng. Add these records:

      Apex domain (techbrodev.com.ng) - create four A records pointing to GitHub Pages IPs and TTL should be 14400:

      A @ 185.199.108.153

      A @ 185.199.109.153

      A @ 185.199.110.153

      A @ 185.199.111.153

      

      Step 4: Create a CNAME record

      www subdomain - create a CNAME record pointing to your GitHub Pages username domain:

      

      

      Step 5: Wait for DNS propagation and check GitHub Pages

      DNS changes can propagate in minutes to hours. While waiting, GitHub Pages will attempt to provision an SSL certificate for your domain. To verify:

      i. Check HTTP headers: curl --ssl-no-revoke -I https://techbrodev.com.ng

      ii. Check DNS A records: nslookup techbrodev.com.ng 8.8.8.8

      iii. Check www CNAME: nslookup -type=CNAME www.techbrodev.com.ng 8.8.8.8

      iv. Check TLS certificate issuer and validity: openssl s_client -connect techbrodev.com.ng:443 -servername techbrodev.com.ng </dev/null 2>/dev/null | openssl x509 -noout -issuer -dates -subject

      What to expect:

      “ curl --ssl-no-revoke -I https://techbrodev.com.ng “ should eventually return HTTP/2 200 or 200 OK and the Strict-Transport-Security header.

      

      “ nslookup techbrodev.com.ng 8.8.8.8 “ should return the GitHub Pages IP addresses for the apex.

      

      nslookup for CNAME should return the following output.

      

      openssl should show Let’s Encrypt (or GitHub) as the issuer and a valid Not After date.

      

      Please Note: the OpenSSL Command “ openssl s_client -connect techbrodev.com.ng:443 -servername techbrodev.com.ng </dev/null 2>/dev/null | openssl x509 -noout -issuer -dates -subject “ Works only on Linux/macOS shells, not Windows PowerShell. So this Screenshot Above is from GitBash Terminal. To run the OpenSSL command on Window PowerShell Command is “openssl s_client -connect techbrodev.com.ng:443 -servername techbrodev.com.ng | openssl x509 -noout -issuer -dates -subject “ Make sure you have already install OpenSSL via Chocolatey or directly from their website, if not, the command will fail on PowerShell Terminal.

      

      Step 6: Verify Your Portfolio Site is Fully Up and Running

      Now that we’ve configured everything, from GitHub Pages to our custom domain, it’s time to ensure that our portfolio site is fully propagated and accessible globally. Proper verification prevents DNS issues and ensures that visitors can access your site without hiccups.

      1. Check GitHub Pages Settings

Go to your GitHub repository hosting your portfolio.

Navigate to Settings → Pages → Custom Domain.

Under the custom domain section, GitHub will show the status of your DNS configuration.

If it shows a green “DNS is correctly configured” message, your domain is pointing correctly to GitHub Pages.

If it shows a warning, double-check your CNAME record and any A records in your domain registrar dashboard.

2. Verify Propagation Using DNS Checker

Even after GitHub confirms the setup, DNS changes can take some time to propagate worldwide. To verify:

Visit https://dnschecker.org

Enter your custom domain (e.g., techbrodev.com.ng) in the search box.

Select A record or CNAME record as appropriate and click search.

You should see the domain resolving to the GitHub Pages IP addresses across multiple locations globally. Once the majority of servers show the correct IP, your portfolio site is fully propagated and publicly accessible.

Pro Tip: DNS propagation can take a few minutes to 24–48 hours, depending on your registrar and local ISP caching. Patience here ensures a smooth launch.

This step ensures that your site is not only deployed but fully accessible, giving you confidence before sharing your portfolio with potential employers or clients.

Conclusion

Congratulations, you have successfully deployed your personal portfolio website with a fully functioning custom domain. By following this guide, you have learned how to:

Set up and configure GitHub Pages for hosting.

1. Connect a custom domain from your domain registrar and configure the DNS settings correctly.

2. Verify DNS propagation using both GitHub Pages and third-party tools, such as DNS Checker.

3. Ensure your site is globally accessible and professionally presented to potential employers or clients.

This project not only gives you a live, professional online presence but also strengthens your understanding of domain management, DNS configuration, and website deployment workflows.

Signature Motto: “I push code, I scale cloud, and I eat Amala.”

Disclaimer

This project was designed and implemented by me using real-world workflows. I used AI as an assistant for syntax guidance and recommendations, but I manually customized, deployed, and documented every step to ensure full understanding and professional execution.

Thank you guys for visiting.