🎉

ポートフォリオサイトをGatsby.js + Vercelで作って、GitHub Actionsで更新を自動化した記録

2021/08/24に公開

Gatsby.js + Vercelが気になっていたので、丁度いい機会と思いポートフォリをサイトを作って公開しました。そのときに参考にした記事やTipsをまとめておきます。

https://mkitlab.com/

Githubのリポジトリも公開しています。

https://github.com/dforest/portfolio

2020年10月頃に手を付け始めて、半年以上寝かせて慌てて仕上げたのがGithubのコミット履歴からよく分かる

要件

GitHubのリポジトリを見てもらうのが早いと思いますが、簡単にまとめてみます。

  • WorksのデータをJSON管理
    • data/works.jsonを更新すればサイトが更新される
  • Recent Posts(複数のRSS)の取得とJSON生成
    • npm run postsで指定したRSSから規定数の記事を取得してdata/posts.jsonに書き出せるように
  • Gatsby.jsでJSONからHTML生成
  • GitHub Actionsでサイト情報更新をリマインド

データをJSON管理してGatsby.jsでHTML生成

簡単なサイトで楽に管理したいのでフロントエンドのみで完結する方法で考えていたのと、単純にGatsby.jsを使ってみたかったのでこの構成にしました。
Gatsby.jsは下記記事を見て初めて知りました。引用されてる記事の情報ではNext.jsよりも利用が多いらしい。

https://zenn.dev/seuyu_bin/articles/709ad8e90be73f9d9a3c

ウェブフロントエンド開発が久しぶりかつGatsby.js初めてだったので、下記の入門書も読んで感覚をつかみました。

https://zenn.dev/tomokiya/books/4b13342f6d878b93e06c

テンプレート

スターターテンプレートには下記を使用しました。シンプルなページデザインとクレジット表示さえあれば自由に改変できるのが決め手。

https://www.gatsbyjs.com/starters/codebushi/gatsby-starter-strata

このテンプレートはSkel.scssというCSSフレームワークが使われています。

https://github.com/ajlkn/skel/blob/master/docs/skel.scss.md

JSON管理した画像パスをGraphQL経由で利用

Gatsby.jsで一番ハマった箇所です。JSONで管理している画像のパスを、各Component.js内でGraphQLで取得したあとに正しいパスに変換する必要があります。
これはgatsby-transformer-jsonを利用することで解決できました。

https://valtism.com/src/gatsby-multiple-images-json.html

複数サイトのRSSを取得してJSON生成

https://zenn.dev/catnose99/articles/cb72a73368a547756862

こちらの記事のコードを参考に、自分のサイトで使いやすいように改変しました。

https://github.com/dforest/portfolio/blob/main/bin/posts.js

GitHub Actionsで自動更新

npm run buildすればRSSからデータを取得してサイトが更新されます。
ホスティングにはVercelを使っていて、Vercelにデプロイするとビルドして更新してくれるので、GitHub Actionsで定期的にデプロイするようにしました。

https://github.com/vercel/next.js/discussions/12486

GitHub Actionsを使ったVercelへの定期デプロイの方法はこの記事を参考に。ただこの記事はVercelの前身のZEIT Now用のスクリプトなので、デプロイまわりのコマンドは下記のVercel用のものを使います。

https://github.com/marketplace/actions/vercel-action

実際に自分のポートフォリオサイトで使っているものは下記です。

https://github.com/dforest/portfolio/blob/main/.github/workflows/deploy-for-refreshing.yml

GitHub Actionsで情報更新のIssueを作ってリマインド

アイディアは下記記事からもらいました。更新忘れがちなので便利。

https://zenn.dev/ryo_kawamata/articles/resume-on-github

実際に使っているものは下記です。

https://github.com/dforest/portfolio/blob/main/.github/workflows/issue-for-works.yml

最後に

色々な技術記事を読んでるだけで、アイディアが湧いてくるのでめちゃくちゃ助かってます。気になってた技術使ってサイト構築できて楽しかった。サボりすぎて半年以上かかったけど

今後はJSをTypeScriptで書き直したり、Skel.scssをTailwindCSSで書き直したりしていきたい気持ちです。

GitHubで編集を提案
PY

Discussion