Remix 佈署到 Github Pages

CI/CD
7 mins.
  1. 1. Reference
CI/CD Github Action Github Pages Remix

使用像是 Remix 所開發出來的網站，有沒有可能直接架設在 Github Pages

答案是有機會的

要先知道 Github Pages 只提供靜態網站的服務，如果網站一定要 nodejs 才能跑起來的，就不算是靜態囉。

謎之音：那不就沒戲唱了？

搞清楚 Github Pages 可以提供的服務後，再來確認自己在 Remix 上開發什麼樣的功能

  • 都是前端功能，用 SSR 來提高 performance
  • 也有 API 功能

像是 Remix 官方的教學，都是有含資料庫及自己也有 API 的功能，這種就沒辦法架在 Github Pages。
那也就是說只要在 Remix 只有寫一些前端的部份，沒有 API 也沒有資料庫，就有機會把這個網站直接架在 Github Pages 上。

主要是透過 linux 的指令 wget 來幫助我們完成，底下是指令的功能敘述

GNU Wget is a free utility for non-interactive download of files from the Web

如果只有前端的功能，也就是說當我們把 Remix 跑起來後就可以去下載整個網站會用到的檔案，並且把這些檔案放到 Github Pages 上面。
等等會用底下的指令來做下載及佈署。

1
wget --mirror http://localhost:3000 -P public --no-host-directories --page-requisites --adjust-extension

那就來透過 Github Action 做佈署，把網站架在 Github Pages 上吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
name: deploy

on:
  push:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - uses: n1hility/cancel-previous-runs@v3
      with: 
        token: ${{ secrets.GITHUB_TOKEN }}

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present

    - name: Start server and mirror it with wget
      run: |
            npm start &
            sleep 10 &&
            wget --mirror http://localhost:3000 -P public --no-host-directories --page-requisites --adjust-extension

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public

這個方法其實算是偷吃步，不過會用 Github Pages 來架設的網站本身應該也不會太複雜，所以簡單用用也是不錯的。

Reference

prev： next：