Skip to content

Deploy static web to GitHub pages with GitHub Action

homepage-banner

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
  • https://github.com/getgridea/gridea
Feedback







Disclaimer
  • Welcome to visit the knowledge base of SRE and DevOps!
  • License under CC BY-NC 4.0
  • Made with Material for MkDocs and improve writing by generative AI tools
  • Copyright issue feedback me#imzye.com, replace # with @