GitHub

Greenwood can easily be configured to work with GitHub Pages and GitHub Actions. With this guide, anytime you push to the designated branch, GitHub will automatically build your project with Greenwood and publish it to GitHub Pages.

You can see an example project in our demonstration repo.

Prerequisites

Following the steps outlined here, first make sure you have already:

1. Created a repo in the format {username}.github.io or {username}.github.io/{repo-name}
2. If using {username}.github.io/{repo-name}, make sure to set Greenwood's base path configuration to match

   export default {
     basePath: "/repo-name",
   };
   

3. Get your project all setup in your repository.
4. If you don't have a build script, let's add one to package.json to use in our GitHub Action

   {
     "scripts": {
       "build": "greenwood build"
     }
   }
   

Setup

1. Create a file called .github/workflows/gh-pages.yml in your repo

2. Now add this GitHub Action, making sure to use the correct branch name for your project; master, main, etc. (We're leveraging this action at the end for the actual auto deploy)

   name: Deploy GitHub Pages
   
   on:
     push:
       branches:
         # configure your branch accordingly
         - main
   
   jobs:
     build-and-deploy:
       runs-on: ubuntu-20.04
   
       # match to your version of NodeJS
       steps:
         - uses: actions/checkout@v2
         - uses: actions/setup-node@v3
           with:
             node-version: 18.20.2
   
         # or replace with yarn, pnpm, etc
         - name: Install Dependencies
           run: |
             npm ci
   
         # use your greenwood build script
         - name: Run Build
           run: |
             npm run build
   
         - name: Deploy to GitHub Pages
           uses: peaceiris/actions-gh-pages@v3
           # change the branch name to match your repo
           if: ${{ github.ref == 'refs/heads/main' }}
           with:
             github_token: ${{ secrets.GITHUB_TOKEN }}
             publish_dir: ./public
   

3. Now git commit that and push it to your repo!

If all was successful, you should now see a gh-pages branch in your repo with the output of the public/ directory committed to it.

Now, configure your repository by going to your repo's Settings -> Pages and make the following changes.

1. Set the source branch to gh-pages
2. Set path to be /root

Next Steps

Now, everything should be setup so that on future pushes to the branch specified in the GitHub Actions workflow, GitHub pages should automatically build from the gh-pages branch and publish that. 🏆

Congrats, enjoy working on your website!! 🥳