🎈

GatsbyでHP構築　インストール〜デプロイ (GitHubPages,GitHubActions利用)

2021/03/12に公開

Gatsby.js

GatsbyでHPを作成し、GitHubにpushするとGitHubActionsを利用して、GitHubPagesにデプロイされるまでの手順です。

環境: Windows10(Ubuntu20.04,WSL2利用)
gatsby:v3

アップデート

sudo apt-get update
sudo apt-get upgrade

curlインストール

sudo apt-get install -y curl

nvmインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
source ~/.bashrc
nvm --version

バージョンが表示されればOK

npmインストール

sudo apt-get install -y nodejs npm

Node.jsインストール

nvm install 12
nvm use 12

Gatsbyのインストール

npm install -g gatsby-cli gatsby-source-filesystem

Gatsbyのテンプレートを探す

ここから好きなテンプレートを探す
https://www.gatsbyjs.com/starters

テンプレートを利用して、プロジェクトを作成する

今回はこのテンプレートを利用(v3対応のものを使用)

gatsby-casperがプロジェクト名のため任意の名前に変更する。

gatsby new gatsby-casper https://github.com/scttcper/gatsby-casper

ubuntuにlocalhostでアクセスできるようにする(WSL利用の場合)

sudo localhostForwarding=True

お試し実行

cd gatsby-casper/
gatsby develop

http://localhost:8000/
サイトが表示されればOK

GitHubにリポジトリを作成する。

ユーザー名.github.ioを指定して作成する。

GitHubにプッシュ

GitHubにGatsbyのプロジェクトをプッシュする。

GitHub Actionsの設定

GatsbyのExamplesがあるので、参考に.github/workflows/gh-pages.ymlを編集する。

name: github pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2.1.2
        with:
          node-version: '12.x'

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm run format
      - run: npm run test
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

これで手順は終了です。
pushした際自動でGitHubPages(https://ユーザー名.github.io/)にデプロイされます。