ryota2357

10.Github Pagesでデプロイとアナリティクスとサイトマップ (Gatsby-jsによるサイト構築記録)

投稿日:

このサイトを作るまでの記録。(時系列順)
実際に作業を行なったメモに追記、編集して投稿してるので投稿日と作業日は一致しない。

スターターを gatsby new したのは 2022 年の 3 月上旬。 gatsby のバージョンは 4.9

一覧はここ

デプロイする。

コマンドの用意

デプロイするコマンドを作る。

gh-pages

$ npm i gh-pages --save-dev

で導入。

--save-dev オプションによって package.jsondependencie ではなく、devDependencie に記述される。

npm run deploy

package.jsonscripts プロパティに以下を追加する。

...
  "scripts": {
    "deploy": "gatsby build && gh-pages -d public",
  }
}

Git と Github

リポジトリを作る

private だと GithubPages は有料なので、public でなリポジトリで作る。
リポジトリ名は ryota2357-github-pages にしました。

開発で git にコミットしてたけど、かなりコミットログが汚いので削除して、init から。

$ git init
$ git add .
$ git commit -m "first comm"
$ git branch -M main
$ git remote add origin https://github.com/ryota2357/ryota2357-github-pages.git
$ git push -u origin main

デプロイ

さっきコマンドを作ったから簡単にできる。

$ npm run deploy

https://ryota2357.github.io/ryota2357-github-pages にデプロイできた。

独自ドメインの設定

GoogleDomains で買った。

A レコードを設定、ここに書いてある値を入れる。

ついでに、ここに書いてある www の設定もやった。

参考

Github Action の設定

毎回、npm run deploy するのは面倒なので自動化する。

.github/workflows/gh-pages.yml を作る。
サンプルをいじった。
秘密鍵の作り方はここに書いてあった。

name: GitHub Pages

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: "17"

      - 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
      #   if: ${{ github.ref == 'refs/heads/main' }}
      #   with:
      #     github_token: ${{ secrets.GITHUB_TOKEN }}
      #     publish_dir: ./public
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: ryota2357/ryota2357-github-pages
          publish_branch: gh-pages
          cname: ryota2357.com

参考

Hugo + GitHub Pages + GitHub Actions で独自ドメインのウェブサイトを構築する

Google アナリティクス設定

gtag を使う。

$ npm uninstall gatsby-plugin-google-analytics
$ npm install gatsby-plugin-google-gtag

google アナリティクスでトラッキング ID を取得してきて gatsby-config.js に設定。

module.exports = {
  plugins: [
  ...
    {
      resolve: 'gatsby-plugin-google-gtag',
      options: {
        trackingIds: ['G-0123456789'],
        pluginConfig: {
          head: true,
        },
      },
    },
  ...
  ]
}

sitemap

$ npm i gatsby-plugin-sitemap
module.exports = {
  plugins: [
  ...
  `gatsby-plugin-sitemap`
  ...
  ]
}

サーチコンソールとアナリティクスの連携もしておいた。

https://ryota2357.com/sitemap.xml にサイトマップが出力されるかと思いきや、https://ryota2357.com/sitemap/sitemap-index.xml に出力されるみたい。
/sitemap.xml にサイトマップがなくてびっくりした。

参考

【Gatsby ブログ】gatsby-plugin-sitemap が 3 系から 4 系で仕様が変わっていた