このサイトを作るまでの記録。(時系列順)
実際に作業を行なったメモに追記、編集して投稿してるので投稿日と作業日は一致しない。スターターを
gatsby newしたのは 2022 年の 3 月上旬。gatsbyのバージョンは 4.9
デプロイする。
コマンドの用意
デプロイするコマンドを作る。
gh-pages
$ npm i gh-pages --save-dev
で導入。
--save-dev オプションによって package.json の dependencie ではなく、devDependencie に記述される。
npm run deploy
package.json の scripts プロパティに以下を追加する。
...
"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 にサイトマップがなくてびっくりした。