Gatsbyでポートフォリオサイトを作った - 詩と創作・思索のひろば

ポートフォリオはだいぶ前に Middleman で作ったきり放置していたのだけど、最近 motemen.works というドメインのインスピレーションを得たので、新しく作ることにした。こういうのは勢いだ。

Gatsby を使う

静的サイトのビルダには Gatsby を使うことにした。まあここは何でもよかったのだけど、結果的にはよかった。React+TypeScript で書けると安心感があるし、今はやってないが JS で動きをつけてやろうってときにスムーズそう。導入もスムーズだった。公式ウェブサイトから「Getting Started」をクリックすると Gatsby Cloud の登録フォームに遷移するのを除けばな……。

Gatsby で知らなくて驚いたのが GraphQL でデータをクエリできること。かっこよくてテンションが上がってしまった。しかし知らんかったのは自分だけっぽい。このデータソースをプラグインで拡張することもできる。なるほどなぁ～。

作品リストをスプレッドシートで管理する

過去のポートフォリオでは制作物一覧を YAML で管理していたのだけど、これに追記するのが面倒で更新が滞っていたところがある。気もする。そこで今回以降、制作物の一覧をスプレッドシートで管理することにした。これを Gatsby のデータソースに加え、一覧として生成してやればいい！

これを実現するのは非常に簡単で、

スプレッドシートのデータを TSV としてダウンロードし、
- Google スプレッドシートでは /export?format=tsv で可能
そのファイルを gatsby-transformer-csv でデータソースに追加し、
GraphQL でクエリするだけ。

シートにしたことでカラムの追加も簡単になり、トップページに選集として表示するものとかもう公開されていないものとかを示すフラグも今回加えられた。選集言いたかっただけという説も有力です。

Cloudflare Pages にデプロイ。GitHub Pages はあきらめた

もともとのホームページは GitHub Pages にホストしていたのでここに CNAME を追加してリダイレクトしてやろうとしたのだけど、そうするとこれ以外のリポジトリの Pages （漢字ルとか）の URL も勝手に 301（！）リダイレクトされてしまうようだったので、諦めて、今回は Cloudflare Pages にデプロイすることにした。

GitHub リポジトリと連携すれば勝手にビルドとデプロイを行ってくれるようだったのでほぼ設定いらずだった。Gatsby の最新バージョンが動くように NODE_VERSION 環境変数を 16 に設定だけしたかな。ビルドには、というかほとんど依存のインストールなんだけど、2-3 分ほどかかる模様。

GitHub Pages からのリダイレクトには以下のような HTML を置いてお茶を濁している。2022 年でも http-equiv=refresh とか書くんか、と思いはする。

<!DOCTYPE html>
<html>
  <link rel="canonical" href="https://motemen.works/">
  <meta http-equiv="refresh" content="0; URL=https://motemen.works/">
  <body>
    <a href="https://motemen.works/">motemen.works</a>
  </body>
</html>