Warning: The magic method NinjaFormsAddonManager\WordPress\Plugin::__wakeup() must have public visibility in /www/frowarecom_769/public/current/web/app/plugins/ninja-forms-addon-manager/lib/wordpress/plugin.php on line 22

Deprecated: Creation of dynamic property NinjaFormsAddonManager\Plugin::$service is deprecated in /www/frowarecom_769/public/current/web/app/plugins/ninja-forms-addon-manager/includes/plugin.php on line 19

Deprecated: Creation of dynamic property SearchAndFilter::$frmqreserved is deprecated in /www/frowarecom_769/public/current/web/app/plugins/search-filter/search-filter.php on line 71

Deprecated: Creation of dynamic property Tribe__Events__Community__PUE::$pue_instance is deprecated in /www/frowarecom_769/public/current/web/app/plugins/the-events-calendar-community-events/src/Tribe/PUE.php on line 47

Deprecated: Creation of dynamic property Tribe__Events__Community__Main::$eventListDateFormat is deprecated in /www/frowarecom_769/public/current/web/app/plugins/the-events-calendar-community-events/src/Tribe/Main.php on line 305

Deprecated: Creation of dynamic property Tribe__Events__Community__Main::$users_can_create is deprecated in /www/frowarecom_769/public/current/web/app/plugins/the-events-calendar-community-events/src/Tribe/Main.php on line 313

Deprecated: Creation of dynamic property Tribe__Events__Community__Main::$emailAlertsEnabled is deprecated in /www/frowarecom_769/public/current/web/app/plugins/the-events-calendar-community-events/src/Tribe/Main.php on line 316

Deprecated: Creation of dynamic property Tribe__Events__Community__Main::$emailAlertsList is deprecated in /www/frowarecom_769/public/current/web/app/plugins/the-events-calendar-community-events/src/Tribe/Main.php on line 319

Deprecated: Creation of dynamic property Tribe__Events__Community__Main::$blockRolesFromAdmin is deprecated in /www/frowarecom_769/public/current/web/app/plugins/the-events-calendar-community-events/src/Tribe/Main.php on line 321

Deprecated: Creation of dynamic property Tribe__Events__Community__Main::$blockRolesList is deprecated in /www/frowarecom_769/public/current/web/app/plugins/the-events-calendar-community-events/src/Tribe/Main.php on line 322

Deprecated: Implicit conversion from float 11.5 to int loses precision in /www/frowarecom_769/public/current/web/wp/wp-includes/class-wp-hook.php on line 85

Deprecated: Implicit conversion from float 11.5 to int loses precision in /www/frowarecom_769/public/current/web/wp/wp-includes/class-wp-hook.php on line 87

Deprecated: Creation of dynamic property EAddonsForElementor\Plugin::$controls_manager is deprecated in /www/frowarecom_769/public/current/web/app/plugins/e-addons-for-elementor/core/plugin.php on line 175

Deprecated: Creation of dynamic property Kinsta\Cache_Purge::$kinsta_cache is deprecated in /www/frowarecom_769/public/current/web/app/mu-plugins/kinsta-mu-plugins/cache/class-cache-purge.php on line 84

Deprecated: Creation of dynamic property Kinsta\KMP::$wp_cli is deprecated in /www/frowarecom_769/public/current/web/app/mu-plugins/kinsta-mu-plugins/class-kmp.php on line 93
How to deploy an Astro site to GitHub Pages | Frocentric Tech

How to deploy an Astro site to GitHub Pages

GitHub Pages now uses customizable GitHub Action workflows to build and deploy your code so that developers can control their authoring framework and deployment. GitHub Pages is a powerful option for storing static content for the following reasons:

  • Its free.
  • It makes collaboration easy. Anyone can open a pull request to update the site.
  • Your repository syncs with any changes you made to your site.
  • While GitHub Pages comes with a default domain name like, https://YOUR_USER_NAME.github.io/ , it supports custom domains.
  • It uses customizable GitHub Action workflows for builds and deployments.

The team at GitHub made a few starter workflows available to you, so you dont have to write them from scratch, and you can use them as examples to support deployments in other frameworks. Currently there are starter workflows for Next.js, Nuxt.js, Gatsby, Hugo, Jekyll, and HTML.

Lets learn how to host static sites built with Astro or any workflow of your choice on GitHub Pages!

Please note that your repository must be public to publish your site on GitHub Pages.

After you write your code (using a framework or static generator of your choice) and store it in a repository, go to the settings tab for that repository.

Image description

Click Pages on the left sidebar

Image description

Under build and deployment, choose GitHub Actions

Image description

Create a folder at the root of your project called .github/workflows

Image description

Inside of your .github/workflows folder, create a customized workflow to deploy your specified framework to GitHub Pages (see examples in the section below):

Example workflow for Astro

name: Deploy Astro to GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      workflow_dispatch:

      # Allow this job to clone the repo and create a page deployment
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - name: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use Node.js 16
          uses: actions/setup-node@v2
          with:
            node-version: '16'
            cache: 'npm'

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: npm ci

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build Astro
          run: npm run build --if-present

        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            path: ./dist

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1

Example workflow for React

    name: Deploy to React GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      workflow_dispatch:

      # Allow this job to clone the repo and create a page deployment
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - name: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use Node.js 16
          uses: actions/setup-node@v2
          with:
            node-version: '16'
            cache: 'npm'

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: npm ci

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build React
          run: npm run build --if-present

        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            path: ./build

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1

Example template for any static generator of your choice

    name: Deploy to your frameworks GitHub Pages

    on:
     # Trigger the workflow every time you push to the `main` branch
      push:
        branches: [ main ]
      # Allows you to run this workflow manually from the Actions tab on GitHub.
      workflow_dispatch:

      # Allow this job to clone the repo and create a page deployment
    permissions:
      contents: read
      pages: write
      id-token: write

    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - name: Check out your repository using git
          uses: actions/checkout@v2

        - name: Use REPLACE WITH THE RUNTIME OF YOUR CHOICE
          uses: REPLACE WITH THE ACTION THAT SETS UP THE RUN TIME OF YOUR CHOICE

        # Not using npm? Change `npm ci` to `yarn install` or `pnpm i`
        - name: Install dependencies
          run: REPLACE WITH COMMANDS TO INSTALL DEPENDENCIES

        # Not using npm? Change `npm run build` to `yarn build` or `pnpm run build`
        - name: Build YOUR STATIC GENERATOR HERE
          run: REPLACE WITH YOUR BUILD COMMAND

        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            path: REPLACE WITH YOUR BUILD OUTPUT FOLDER

      deploy:
        environment:
          name: github-pages
          url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        needs: build
        steps:
          - name: Deploy to GitHub Pages
            id: deployment
            uses: actions/deploy-pages@v1

Within a few seconds, your Action will start running. It will generate a URL and deploy your static site to GitHub Pages if successful.

Image description

Head over to your URL named yourusername.github.io/your_repo_name to check out your live website!

Image description

Gotchas: handling asset paths

When I first published my site on GitHub Pages, I was confused and surprised that I couldnt see any images or PDFs even though they were present when I locally hosted the site. This happened because GitHub Pages handles paths differently.

For example, if I have PDF living in this relative path: assets/pdfs/menu-food.pdf, then once hosted on GitHub Pages, update the new path to {REPOSITORY NAME}/assets/pdfs/menu-food.pdf

Example

Here’s an example repository I built using this method
{% github blackgirlbytes/blackgyalbites-astro %}

Learn more

{% youtube Kq28yBigDYw %}
Watch this awesome YouTube short by Kedasha demonstrating how to use a customized workflow to deploy a static site generator to GitHub Pages!

I’d love your thoughts on the new customized workflows to deploy to GitHub Pages. Comment below! For more content like this, follow GitHub and me on DEV!