Supported commands: ls, cd ${PATH}

Create a Blog with Github Pages and Actions

Sep. 18, 2021

부제: 깃헙 블로그를 깃헙 액션으로 배포하는 방법

개발자는 블로그를 시작했다!
효과는 미미했다..

Note: 본 문서는 이미 깃헙 페이지로 블로그를 제작한 사람을 대상으로 합니다.

개발자라면 기술 블로그 하나쯤 있어야 하기에 열심히 정적 사이트 생성기를 고르고 나면 배포부터 귀찮아지는 당신을 위한 Github Actions 안내서

Github Actions

처음 블로그를 생성하고 배포를 여러 번 반복하다 보면 이내 자동화에 대한 욕구가 샘솟게 됩니다.

물론 가장 직관적인 방법은 휴먼 오퍼레이터나 크론잡을 사용하는 것입니다.

혹시 더 좋은 방법(무료)은 없을까에 대해 고민하다 보면 이내 배포를 위한 compute 리소스가 필요하다는 것을 알게 됩니다.

고려해 볼 수 있는 무료 리소스는 다음과 같습니다.

이 중 개인 컴퓨터와 오라클 VM은 조금 번거롭기에 Github Actions에 대해서 알아보겠습니다.

  1. 무료인가요?

    네 지금은 그렇습니다.

    Github Actions는 현재 퍼블릭 repository나 직접 구성한 compute 리소스(runner)에서 무료로 사용할 수 있고, 그 이외에는 한 달에 500 MB의 storage와 2,000 분을 제공하고 있습니다.

    참고: https://docs.github.com/en/billing/managing-billing-for-github-actions/about-billing-for-github-actions

  2. 깃헙 이벤트를 받을 수 있나요?

    repository의 Actions 탭에서 샘플 액션을 생성하고 main.yml의 윗부분을 보면 다음과 같습니다.

    # Controls when the workflow will run
    on:
      # Triggers the workflow on push or pull request events but only for the master branch
      push:
        branches: [ master ]
      pull_request:
        branches: [ master ]
    
      # Allows you to run this workflow manually from the Actions tab
      workflow_dispatch:
    

    음 척 보니 push와 pull_request에 master라고 쓰여있습니다. master 브랜치에 작업을 하면 이 워크플로우(main.yml)가 동작하겠군요. 심플합니다.

  3. 커스텀 작업(사이트 빌드)이 가능한가요?

    repository의 Actions 탭에서 샘플 액션을 생성하고 main.yml의 아랫부분을 보면 다음과 같습니다.

    # A workflow run is made up of one or more jobs that can run sequentially or in parallel
    jobs:
      # This workflow contains a single job called "build"
      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
        steps:
          # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
          - uses: actions/checkout@v2
    
          # Runs a single command using the runners shell
          - name: Run a one-line script
            run: echo Hello, world!
    
          # Runs a set of commands using the runners shell
          - name: Run a multi-line script
            run: |
              echo Add other actions to build,
              echo test, and deploy your project.
    

    runs-on에서 ubuntu-latest 지정하고, steps에서 repo를 checkout(actions/checkout@v2)하고 명령(run)들을 넣으면 동작하는군!

    여기서 보이는 바와 같이 사용자는 두 가지 방법으로 원하는 동작을 수행 시킬 수 있습니다.

    1. 사전에 정의된 actions를 사용한다.

      예) actions/checkout@v2을 사용하면 repo를 가져옴

    2. run으로 runs-on(ubuntu-latest) 위에서 쉘 스크립트 명령을 수행한다.

      예) run: echo Hello, world!

    두 가지 방법 다 좋지만, 사이트 배포는 간단한 작업이고 이미 만들어져 있는 action을 사용하면 해당 action의 동작을 파악해야 하는 번거로움이 있어서 저는 run으로 작업했습니다.

Hugo Site CI/CD with Github Actions

아래 코드는 A repo(action이 설정된 hugo repo)에서 B repo(Github Pages repo)로 Hugo Site를 커밋하는 예제 코드입니다.

name: Hugo site CI/CD

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

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

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build-and-deploy"
  build-and-deploy:
    # 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
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # Runs a set of commands using the runners shell
      - name: Build the site in the hugo container
        run: |
          git submodule init ${{ github.workspace }}
          git submodule update ${{ github.workspace }}

          docker run \
          -v ${{ github.workspace }}:/src -v ${{ github.workspace }}/_site:/src/public \
          klakegg/hugo:0.81.0-busybox

          sudo chmod -R 777 ${{ github.workspace }}/_site

      - name: Deploy the site to the target repo
        run: |
          git clone https://github.com/jiwonaid/jiwonaid.github.io.git
          cp -r jiwonaid.github.io/.git ${{ github.workspace }}/_site

          cd ${{ github.workspace }}/_site

          git config --global user.email "jiwonaid0@gmail.com"
          git config --global user.name "jiwonaid"
          git remote set-url origin https://jiwonaid:${TOKEN}@github.com/jiwonaid/jiwonaid.github.io.git

          git add .
          git commit -m "$(date +%s)"
          git push origin