🎉

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

2021/08/24に公開

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でサイト情報更新をリマインド

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

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

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

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

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

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

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

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

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

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

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

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

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

PY is a Tokyo-based tech studio that creates everything fun and fair.