okuzawatsの日記

Android / Kotlin Enthusiast 🤖

Automating Hugo Deployment Flow with GitHub Actions and Firebase Hosting

Fig-1 The Deploy Flow

Here I create a workflow of GitHub Actions like Fig-1.

Trigger

Pushing to main branch triggers the workflow.

'on':
  push:
    branches:
      - main

Checkout

I manage the theme of Hugo with submodules of Git, so set the submodules option true.

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

Building static Web pages

Build static Web pages with Hugo using peaceiris/actions-hugo. By default of Hugo, the files are created under public directory.

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.83.1"
      - name: Build
        run: hugo --minify

If you set the directory other than public, you have to change the deployment setting which I explain later. Or maybe you could change it to public directory.

Deployment to Firebase Hosting

Deploy the generated Web pages to Firebase Hosting. By default, public directory is deployed. You have to match the directory setting of Hugo.

      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.YOUR_SERVICE_ACCOUNT_HERE }}'
          channelId: live
          projectId: your-project-id-here
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

The step is automatically generated by Firebase CLI. The instruction is probided in “Deploy to live & preview channels via GitHub pull requests”. I used version 9.10.0 of Firebase CLI. If you using old version of Firebase CLI, there is no command to generate GitHub Actions' workflow.

Pushing to GitHub

Now the Hugo generated static Web pages are deployed to Firebase Hosting when you push the project to main.

References

  1. Deploy to live & preview channels via GitHub pull requests  |  Firebase
  2. peaceiris/actions-hugo: GitHub Actions for Hugo ⚡️ Setup Hugo quickly and build your site fast. Hugo extended, Hugo Modules, Linux (Ubuntu), macOS, and Windows are supported.

#Hugo #Firebase Hosting #GitHub Actions

About me 😎

profile

茨城県つくば市在住のソフトウェアエンジニアです。専門領域はAndroidアプリ開発で、特にアーキテクチャに興味があります。某社でAndroidアプリ開発のテックリードをしています。

Jetpack ComposeによるAndroid MVVMアーキテクチャ入門の著者です。

👉 もっと詳しく

Writing 📝

Android MVVMアーキテクチャ入門

Androidアプリ開発の初学者に向けた、MVVM(Model-View-ViewModel)アーキテクチャの入門書を書きました。初学者の方を確実にネクストレベルに引き上げる技術書です。

👉 もっと詳しく

See Also 👀