Building and Deploying a Custom Site Using GitHub Actions and GitHub Pages.

GitHub Pages is a great way to host static websites for free, while GitHub Actions allows developers to automate workflows, including building and deploying websites. By combining the two, you can set up an automated deployment pipeline for your custom site. In this guide, we’ll walk through the process of: ✅ Setting up a GitHub repository for your site. ✅ Creating a GitHub Actions workflow to build and deploy the site. ✅ Deploying the site using GitHub Pages. 1. Setting Up a GitHub Repository for Your Site Before we automate deployment, we need a GitHub repository to store our site’s code. Step 1: Create a New Repository Go to GitHub and log in. Click the + icon in the top right and select New repository. Give your repository a name, e.g., my-custom-site. Choose Public (required for GitHub Pages) or Private (with GitHub Pages enabled). Check Initialize this repository with a README and click Create repository. Step 2: Clone the Repository Locally Now, clone the repository to your local machine: git clone https://github.com/your-username/my-custom-site.git cd my-custom-site 2. Building Your Custom Site You can use any static site generator (Jekyll, Hugo, Next.js, etc.) or simply deploy an HTML/CSS/JavaScript project. Example: A Simple HTML Site Create an index.html file in your project folder: My Custom Site Welcome to My Custom Site! This site is deployed using GitHub Actions and GitHub Pages. Commit and push the changes to GitHub: git add . git commit -m "Add simple HTML site" git push origin main 3. Setting Up GitHub Actions for Automatic Deployment GitHub Actions allows us to automate the build and deployment process. Step 1: Create a Workflow File Inside your repository, create a new folder: mkdir -p .github/workflows Create a YAML file for the GitHub Actions workflow: nano .github/workflows/deploy.yml Add the following workflow configuration: name: Deploy to GitHub Pages on: push: branches: - main jobs: build-deploy: runs-on: ubuntu-latest steps: - name: Checkout Repository uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '16' - name: Install Dependencies (if any) run: npm install || true - name: Build Project (if applicable) run: npm run build || true - name: Deploy to GitHub Pages uses: JamesIves/github-pages-deploy-action@v4 with: branch: gh-pages folder: . # Change this if using a build folder like "dist" or "public" Step 2: Commit and Push the Workflow git add .github/workflows/deploy.yml git commit -m "Add GitHub Actions workflow for deployment" git push origin main 4. Configuring GitHub Pages Now, we need to enable GitHub Pages for deployment. Step 1: Enable GitHub Pages Go to your repository on GitHub. Click on Settings > Pages. Under Branch, select gh-pages. Click Save. Your site will be live at: https://your-username.github.io/my-custom-site/ 5. Verifying Deployment After pushing to main, GitHub Actions will trigger automatically. Navigate to Actions in your GitHub repo to check if the workflow ran successfully. Once completed, visit your GitHub Pages URL to see the deployed site. 6. Automating Further with Custom Domains and SSL You can personalize your site by adding a custom domain and enabling HTTPS. Adding a Custom Domain In Settings > Pages, enter your custom domain (e.g., www.mywebsite.com). Create a CNAME file in your repository’s root directory: echo "www.mywebsite.com" > CNAME git add CNAME git commit -m "Add custom domain" git push origin main Final Thoughts By leveraging GitHub Actions and GitHub Pages, you can automate the deployment of your custom site effortlessly. Whether it's a portfolio, documentation, or a personal project, this setup ensures a seamless workflow from development to deployment. Support My Work! If you found this guide helpful, consider supporting me at ko-fi.com/codewithdhanian. Your support helps me create more educational content for developers. Also, follow me on X (Twitter) @e_opore for more tips, tutorials, and insights!

Mar 19, 2025 - 22:29

Building and Deploying a Custom Site Using GitHub Actions and GitHub Pages.

GitHub Pages is a great way to host static websites for free, while GitHub Actions allows developers to automate workflows, including building and deploying websites. By combining the two, you can set up an automated deployment pipeline for your custom site.

In this guide, we’ll walk through the process of:

✅ Setting up a GitHub repository for your site.

✅ Creating a GitHub Actions workflow to build and deploy the site.

✅ Deploying the site using GitHub Pages.

1. Setting Up a GitHub Repository for Your Site

Before we automate deployment, we need a GitHub repository to store our site’s code.

Step 1: Create a New Repository

Go to GitHub and log in.
Click the + icon in the top right and select New repository.
Give your repository a name, e.g., my-custom-site.
Choose Public (required for GitHub Pages) or Private (with GitHub Pages enabled).
Check Initialize this repository with a README and click Create repository.

Step 2: Clone the Repository Locally

Now, clone the repository to your local machine:

git clone https://github.com/your-username/my-custom-site.git
cd my-custom-site

2. Building Your Custom Site

You can use any static site generator (Jekyll, Hugo, Next.js, etc.) or simply deploy an HTML/CSS/JavaScript project.

Example: A Simple HTML Site

Create an index.html file in your project folder:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>My Custom Site<span class="nt">


    Welcome to My Custom Site!
    This site is deployed using GitHub Actions and GitHub Pages.

Commit and push the changes to GitHub:

git add .  
git commit -m "Add simple HTML site"  
git push origin main

3. Setting Up GitHub Actions for Automatic Deployment

GitHub Actions allows us to automate the build and deployment process.

Step 1: Create a Workflow File

Inside your repository, create a new folder:

   mkdir -p .github/workflows

Create a YAML file for the GitHub Actions workflow:

   nano .github/workflows/deploy.yml

Add the following workflow configuration:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install Dependencies (if any)
        run: npm install || true

      - name: Build Project (if applicable)
        run: npm run build || true

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: . # Change this if using a build folder like "dist" or "public"

Step 2: Commit and Push the Workflow

git add .github/workflows/deploy.yml  
git commit -m "Add GitHub Actions workflow for deployment"  
git push origin main

4. Configuring GitHub Pages

Now, we need to enable GitHub Pages for deployment.

Step 1: Enable GitHub Pages

Go to your repository on GitHub.
Click on Settings > Pages.
Under Branch, select gh-pages.
Click Save.

Your site will be live at:

https://your-username.github.io/my-custom-site/

5. Verifying Deployment

After pushing to main, GitHub Actions will trigger automatically.

Navigate to Actions in your GitHub repo to check if the workflow ran successfully.
Once completed, visit your GitHub Pages URL to see the deployed site.

6. Automating Further with Custom Domains and SSL

You can personalize your site by adding a custom domain and enabling HTTPS.

Adding a Custom Domain

In Settings > Pages, enter your custom domain (e.g., www.mywebsite.com).
Create a CNAME file in your repository’s root directory:

   echo "www.mywebsite.com" > CNAME
   git add CNAME
   git commit -m "Add custom domain"
   git push origin main

Final Thoughts

By leveraging GitHub Actions and GitHub Pages, you can automate the deployment of your custom site effortlessly. Whether it's a portfolio, documentation, or a personal project, this setup ensures a seamless workflow from development to deployment.

Support My Work!

If you found this guide helpful, consider supporting me at ko-fi.com/codewithdhanian. Your support helps me create more educational content for developers.

Also, follow me on X (Twitter) @e_opore for more tips, tutorials, and insights!