Skip to content

Auto deploy different static web to GitHub pages with GitHub Action

Here is the general guide to show steps to automatically deploy your static web site generated by different web generator to GitHub page after you finish writting and push them to your GitHub repo.

Workflows preparation

cd ${YOUR_GIT}
mkdir -p .github/workflows

cat > app.yml << EOF
name: My Web

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

EOF

For different generator

Jekyll

or other Ruby based site.

cat >> app.yml << EOF
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Set up Ruby
      uses: ruby/setup-ruby@v1
      with:
        ruby-version: '3.0'
        bundler-cache: true

    - name: Install Jekyll
      run: |
        gem install jekyll
EOF

Hugo

or other Go based site.

cat >> app.yml << EOF
jobs:
  deploy:
    runs-on: ubuntu-latest
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.91.2'
EOF

MkDocs

or other Python based site.

cat >> app.yml << EOF
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    - name: Set up Python 3.10
      uses: actions/setup-python@v2
      with:
        python-version: "3.10"

    - name: Install dependencies
      run: |
        python -m pip install --upgrade pip
        pip install mkdocs
        if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
EOF

Hexo

or other js based site.

cat >> app.yml << EOF
jobs:
  pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
EOF

Build and Deploy

cat >> app.yml << EOF
    - name: Build
      run: |
        # build
        # could also minify html here in the script
        cd web && bash deploy.sh
        # e.g. run: hugo --minify
        # e.g. run: npm run build

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      if: ${{ github.ref == 'refs/heads/main' }}
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./public
EOF

Reference

  • https://github.com/marketplace/actions/setup-ruby-jruby-and-truffleruby
  • https://github.com/marketplace/actions/jekyll-actions
  • https://github.com/marketplace/actions/hugo-setup
  • https://github.com/marketplace/actions/setup-python
  • https://github.com/marketplace/actions/hexo-deploy

Disclaimer
  1. License under CC BY-NC 4.0
  2. Copyright issue feedback: dig +short txt issue.imzye.com
  3. Not all the commands and scripts are tested in production environment, use at your own risk
  4. No privacy information is collected here
Buy Me a Coffee