DEV Community

Code WithDhanian
Code WithDhanian

Posted on

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

  1. Go to GitHub and log in.
  2. Click the + icon in the top right and select New repository.
  3. Give your repository a name, e.g., my-custom-site.
  4. Choose Public (required for GitHub Pages) or Private (with GitHub Pages enabled).
  5. 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
Enter fullscreen mode Exit fullscreen mode

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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Custom Site</title>
</head>
<body>
    <h1>Welcome to My Custom Site!</h1>
    <p>This site is deployed using GitHub Actions and GitHub Pages.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Commit and push the changes to GitHub:

git add .  
git commit -m "Add simple HTML site"  
git push origin main
Enter fullscreen mode Exit fullscreen mode

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

  1. Inside your repository, create a new folder: 
   mkdir -p .github/workflows
Enter fullscreen mode Exit fullscreen mode
  1. Create a YAML file for the GitHub Actions workflow: 
   nano .github/workflows/deploy.yml
Enter fullscreen mode Exit fullscreen mode
  1. 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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

4. Configuring GitHub Pages

Now, we need to enable GitHub Pages for deployment.

Step 1: Enable GitHub Pages

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

Your site will be live at:

https://your-username.github.io/my-custom-site/
Enter fullscreen mode Exit fullscreen mode

5. Verifying Deployment

After pushing to main, GitHub Actions will trigger automatically.

  1. Navigate to Actions in your GitHub repo to check if the workflow ran successfully.
  2. 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

  1. In Settings > Pages, enter your custom domain (e.g., www.mywebsite.com).
  2. 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
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)