Oldweb2 Blog

← Back to blog index, Posted February 8th 2022

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


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
  # Triggers the workflow on push or pull request events but only for the main branch
    branches: [ main ]
    branches: [ main ]

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

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
  # This workflow contains a single job called "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
      # 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
          node-version: '14'

      - name: Cache dependencies
        uses: actions/cache@v2
          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
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          publish_dir: ./out
          external_repository: jmn/jmn.github.io

  • Set up a secret in your repository settings which contains a personal access token with repo access.
  • Configure external_repository

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


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

Please consider sharing this article if you found it useful!