Oldweb2 Blog

← Back to blog index, Posted February 8th 2022

Create a static site with Remix and wget and deploy it to GitHub pages

Code

GitHub Action workflow file

Create a GitHub Action.

# This is a workflow which will wget your Remix app 
# and deploy it to GitHub pages.

name: Static Site Generation from Remix with wget

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
     
      - name: Install dependencies
        run: yarn 
      
      - run: yarn build
      
      - name: Start server and mirror it with wget
        run: |
              yarn start &
              sleep 10 &&
              wget --mirror http://localhost:3000 -P out --no-host-directories --page-requisites --adjust-extension
  
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          publish_dir: ./out
          external_repository: jmn/jmn.github.io

See further documentation for peaceiris/actions-gh-pages here.

useHydrated()

See the documentation for useHydrated() to specifically enable JavaScript only when you need it.

Please consider sharing this article if you found it useful!