정적 블로그 배포

15 Dec 2021 Last modified at: 2023-08-20

firebase hosting, jeykll, github actions 사용하여 블로그 배포 자동화하기

사전 준비

• firebase CLI
  • $ curl -sL https://firebase.tools | bash
• ruby, bundler
  • $ brew install ruby
  • $ gem install bundler
• github account
• 정적 블로그
  • hydejack

repository 생성 및 블로그 앱 다운로드

1. github repository 생성 ( 저는 hydejack pro 버전을 사용하기 때문에 private로 설정하였습니다. )
2. 생성한 repository clone
3. 정적 블로그 앱 다운로드
4. 압축을 풀고 생성한 repository 디렉토리에 소스 코드를 복사

5. 로컬 환경에서 잘 실행 되는지 확인해봅시다

   $ bundle install

   $ bundle exec jekyll serve

   

6. 로컬환경에서 실행을 확인했다면 다운로드한 소스코드를 생성한 repository에 push

firebase CLI 설정

1. CLI 로그인

   $ firebase login

   

2. firebase 초기화

   $ firebase init

   Hosting: Configure and deploy Firebase Hosting sites 선택

   Create a new project 선택

    Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]: muna-blog-test
   
    What would you like to call your project? (defaults to your project ID) muna-blog-test
   
    What do you want to use as your public directory? _site
   
    Configure as a single-page app (rewrite all urls to /index.html)? No
   
    Set up automatic builds and deploys with GitHub? Yes
   
    File _site/404.html already exists. Overwrite? No
   
    File _site/index.html already exists. Overwrite? No
   

   

    For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) munawiki/temp_blog
   
    Set up the workflow to run a build script before every deploy? Yes
   
    What script should be run before every deploy? npm ci && npm run build
   
    Set up automatic deployment to your site's live channel when a PR is merged? Yes
   
    What is the name of the GitHub branch associated with your site's live channel? master
   

github action 설정

일단은 배포 스크립트를 기본 설정으로 했기 때문에 이 부분을 프로젝트에 맞게 수정해줍니다.

cd .github/workflows/

firebase-hosting-merge.yml

name: Deploy to Firebase Hosting on merge
"on":
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: 2.6 # Not needed with a .ruby-version file
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
      - run: JEKYLL_ENV=production bundle exec jekyll build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "$"
          firebaseServiceAccount: "$"
          channelId: live
          projectId: muna-blog-test

firebase-hosting-pull-request.yml

name: Deploy to Firebase Hosting on PR
"on": pull_request
jobs:
  build_and_preview:
    if: "$"
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: 2.6 # Not needed with a .ruby-version file
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
      - run: JEKYLL_ENV=production bundle exec jekyll build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "$"
          firebaseServiceAccount: "$"
          projectId: muna-blog-test

커밋하고 푸시

firebase 웹 console에서 도메인 확인

이슈 처리

문제

Mac M1 환경에서 bundle exec jekyll serve 명령어 실행 시 0x0000000104e54000 에러

해결

brew install ruby
echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc
export LDFLAGS="-L/opt/homebrew/opt/ruby/lib"
export CPPFLAGS="-I/opt/homebrew/opt/ruby/include"

Link

문제

github action에서 bundle install 시 M1에서 생성된 lock file이 문제가 됨

해결

bundle lock --add-platform x86_64-linux