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/[email protected]
    - name: Set up Ruby
      uses: ruby/[email protected]
      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/[email protected]
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/[email protected]
        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/[email protected]

    - name: Set up Python 3.10
      uses: actions/[email protected]
      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/[email protected]
      - name: Use Node.js 12.x
        uses: actions/[email protected]
        with:
          node-version: '12.x'
      - name: Cache NPM dependencies
        uses: actions/[email protected]
        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/[email protected]
      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 me#imzye.me, replace # with @
  3. Not all the commands and scripts are tested in production environment, use at your own risk
  4. No privacy information is collected here
Try iOS App