Preact: Github Actions deploy Preactjs project to Github Pages

[flameddd]

It's a note about how to use Github Actions to deploy a preactjs website to Github pages (also installable(PWA))

• It's definitely NOT preactjs's issue, but I can not find any good tutorial when I trying to do this. So I want to share my exp here, maybe can provide someone who are in need in the future.
• The Problem is we deploy project to Github Pages normally under a REPO_NAME, but not a domain, ex
  
  
  
  • under https://Useranme.github.io/repro_name/
  
  
  • NOT under https://Useranme.github.io/
  
  
• So, I have to do some trick to make this work.

demo repo

• https://github.com/flameddd/preact-github-actions-to-github-pages
• github page: https://flameddd.github.io/preact-github-actions-to-github-pages/

about this note (demo)

• "preact": "^10.0.1"
• "preact-router": "^3.0.0"
• use master branch to trigger Github Actions
• use package.lock.json
  
  
  
  • If don't want to use master or package.lock.json -> step 4, 5, 6
  
  

steps to deploy

1. add repo public/private keys: follows https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-create-ssh-deploy-key
   
   
   
   • Go to Deploy Keys and add your public key with the Allow write access
   
   
   • Go to Secrets and add your private key as ACTIONS_DEPLOY_KEY <--!!!
   
   
2. add dot-json
   
   
   
   • npm i --save-dev dot-json
   
   
3. add package.json script: "build:gh": "GITHUB_PAGES=REPO_NAME preact build && dot-json ./build/manifest.json start_url \"/REPO_NAME/\""
   
   
   
   • replace 2 REPO_NAME with your repo name !!!
   
   
4. update .gitignore, remove package-lock.json
5. add .github folder
   
   
   
   • add workflows folder under .github folder
     
     
     
     
     
     • add gh-pages.yml file under workflows folder
     
     
     
     • so, it would be .github/workflows/gh-pages.yml
     
     
     
   
   
6. edit gh-pages.yml

name: github pages

on:
  push:
    branches:
    - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@v1

    - name: Setup Node
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'

    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-
    - run: npm ci

    - run: npm run build:gh

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v2
      env:
        ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        PUBLISH_BRANCH: gh-pages
        PUBLISH_DIR: ./build

1. eidt src/manifest.json, update icons src from /assets/... to ./assets/...

  "icons": [
    {
      "src": "./assets/icons/android-chrome-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "./assets/icons/android-chrome-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]

1. create preact.config.js file

export default {
  webpack(config, env, helpers, options) {

    const publicPath = process.env.GITHUB_PAGES
      ? `/${process.env.GITHUB_PAGES}/`
      : '/';
    const ghEnv = process.env.GITHUB_PAGES
      && JSON.stringify(`${process.env.GITHUB_PAGES}`);

    config.output.publicPath = publicPath;
    const { plugin } = helpers.getPluginsByName(config, 'DefinePlugin')[0];
    Object.assign(
      plugin.definitions,
      { ['process.env.GITHUB_PAGES']: ghEnv }
    );

  },
};

1. add /src/baseroute.js file

let basename = '';

if (process.env.GITHUB_PAGES) {
  basename = `/${process.env.GITHUB_PAGES}`;
}

export default basename;

1. edit src/components/app.js. import and add baseroute to path

// import Header from './header';
import baseroute from '../baseroute'; // <-- make sure path correctly

//...
    //<Router onChange={this.handleRoute}>
      <Home path={`${baseroute}/`} />  // <-----
      <Profile path={`${baseroute}/profile/`} user="me" />  // <-----
      <Profile path={`${baseroute}/profile/:user`} />  // <-----
    //</Router>
// ...

1. edit src/components/header/index.js import and add baseroute to href

import baseroute from '../../baseroute'; // <-- make sure path correctly

//.... 
  // <nav>
    <Link activeClassName={style.active} href={`${baseroute}/`}>Home</Link>
    <Link activeClassName={style.active} href={`${baseroute}/profile`}>Me</Link>
    <Link activeClassName={style.active} href={`${baseroute}/profile/john`}>John</Link>
  // </nav>
//....

1. push to master branch, and wait Github Actions done
2. go to repo's settings, GitHub Pages sections and switch Source to gh-pages branch.
   
   
   
   • I switch it manually, but I also had exp this setting switch automatically
   
   
   • as My exp, it may need wait 1 ~ 3 min github page update
   
   

screenshot

P.S.

I'm not exactly know this post is appropriate or NOT? Cuz this post is NOT a issue

• so feel free to CLOSE this issue WITHOUT reason at any time.

thanks for All preact Team and All Contributors.

[marvinhagemeister]

That's awesome! It will probably get more views, when you publish it as a blog post or something similar, because there is only a minor portion of Preact users, that is active in our issue tracker :)

Nonetheless, thanks a bunch for the detailed writeup :+1: