ポートフォリオサイトをGatsby.js + Vercelで作って、GitHub Actionsで更新を自動化した記録
Gatsby.js + Vercelが気になっていたので、丁度いい機会と思いポートフォリをサイトを作って公開しました。そのときに参考にした記事やTipsをまとめておきます。
Githubのリポジトリも公開しています。
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よりも利用が多いらしい。
ウェブフロントエンド開発が久しぶりかつGatsby.js初めてだったので、下記の入門書も読んで感覚をつかみました。
テンプレート
スターターテンプレートには下記を使用しました。シンプルなページデザインとクレジット表示さえあれば自由に改変できるのが決め手。
このテンプレートはSkel.scssというCSSフレームワークが使われています。
JSON管理した画像パスをGraphQL経由で利用
Gatsby.jsで一番ハマった箇所です。JSONで管理している画像のパスを、各Component.js内でGraphQLで取得したあとに正しいパスに変換する必要があります。
これはgatsby-transformer-json
を利用することで解決できました。
複数サイトのRSSを取得してJSON生成
こちらの記事のコードを参考に、自分のサイトで使いやすいように改変しました。
GitHub Actionsで自動更新
npm run build
すればRSSからデータを取得してサイトが更新されます。
ホスティングにはVercelを使っていて、Vercelにデプロイするとビルドして更新してくれるので、GitHub Actionsで定期的にデプロイするようにしました。
GitHub Actionsを使ったVercelへの定期デプロイの方法はこの記事を参考に。ただこの記事はVercelの前身のZEIT Now用のスクリプトなので、デプロイまわりのコマンドは下記のVercel用のものを使います。
実際に自分のポートフォリオサイトで使っているものは下記です。
GitHub Actionsで情報更新のIssueを作ってリマインド
アイディアは下記記事からもらいました。更新忘れがちなので便利。
実際に使っているものは下記です。
最後に
色々な技術記事を読んでるだけで、アイディアが湧いてくるのでめちゃくちゃ助かってます。気になってた技術使ってサイト構築できて楽しかった。サボりすぎて半年以上かかったけど
今後はJSをTypeScriptで書き直したり、Skel.scssをTailwindCSSで書き直したりしていきたい気持ちです。
Discussion