Tech Blog

ブログを GitHub Pages ではじめました

April 01, 2021

React 製静的サイトジェネレーターツール Gatsbyjs を使って GitHub Pages にブログを公開しました

使用している技術

今回は出来るだけローカル環境に依存する事なく Github 上でビルドとデプロイが完結するところまで

TL;DR

  1. gatsby-cli のインストール
yarn global add gatsby-cli
  1. プロジェクトの作成
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
cd blog
  1. actions-gh-pages の追加
cat .github/workflows/actions-gh-pages.yml
# .github/workflows/actions-gh-pages.yml

name: github pages

on:
  push:
    branches:
      - main

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

      - name: Setup Node
        uses: actions/setup-node@v2
        with:
          node-version: "14.x"

      - name: Cache dependencies
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - uses: actions/cache@v2
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn install --frozen-lockfile
      - run: yarn format
      - run: yarn test
      - run: yarn build --prefix-paths

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
  1. リポジトリの作成
hub create
git add . && git commit -am "Initial commit"
git checkout --orphan gh-pages
git push origin --all
  1. Github Pages の設定
open https://github.com/{login}/blog/settings

Options

参考にしたページ

gatsby-starter-blog actions-gh-pages


Written by takeharak


© 2021 SYSTEM I Co., Ltd.