petitviolet_blog

@petitviolet blog

ポートフォリオサイトをGatsbyで作り直した

自分のポートフォリオ的なWebサイトとしてhttps://www.petitviolet.netを作っている。

www.petitviolet.net

もともとはHTMLべた書き + Bootstrapで作っていたが、GatsbyJSを使って作り直してみた。

www.gatsbyjs.org

たいして更新することもないので静的サイトジェネレータを使ってジェネレートするほどのことはないと断言できる。
が、たまにはフロントっぽいこともやるかというくらいの理由。
GatsbyJSを選択したのはなんとなく。HugoとかでもよかったけどJS触っておきたかっただけ。

技術っぽい話

技術的な要素を並べてみる。

マルチクラウドな感じですね。
ソースコードは特に隠すものもないのでGitHubにあげてある。

github.com

TypeScriptはとにかく型があるので良い。
普段Scala書いててコンパイラに全部やってもらっているので生JavaScriptを書く技術はなかったし助かった。
そしてCSS慣れてないしやる気もないけど、コンポーネントごとにCSS書けるのは体験が良かった。

ホスティングには、もともとGAEにデプロイしていたのでそれを踏襲することに。
当初の思いとしてはGKEでやりたかったけどお金かかるし例えばNginxとかにぶち込んだりするのもめんどくさいしでやめた。
そもそも静的なファイルをKubernetesで運用する理由がなさすぎてモチベーションわかなかった。
S3、Github Pages、Firebase、Netlifyあたりも候補になるけど単にGAEにも触れておきたい気持ちで選択。

ヘッダとかの画像はCDN通して配信できるようにしたかったのでやった。
普段、公開用の画像とかはS3使ってたのでそれを踏襲してCloud Front使うことにした。
今まではS3のURLを直接使ってたけどせっかくだから独自ドメインで配信することにして、AWSのCertificate ManagerとGoogle Domainsの組み合わせでCDN用のドメインとその証明書を用意したのだけど、証明書の発行にめっちゃ時間かかって困った。

twitter.com

リプライでやり直したらすぐ通ったよ!的なことを教えてもらったのでやったら1分で検証されて発行されて無事httpsでアクセスできるように。
GAEでhttps勝手にやってくれるしそれ以外のリソースについてもCDNhttps配信できるようになったのでまあいい感じでしょう多分。

高速化

CDN配信、画像をwebp化、静的ファイルのキャッシュ長め、といったあたりをやったら速くなった。

f:id:petitviolet:20190224232639p:plainf:id:petitviolet:20190224232646p:plain
PageSpeed Insight

そもそも静的コンテンツなので速くて当たり前ということで。

感想とか

持っててどれくらいの意味があるかわからないポートフォリオをアップデートしたけど、持ってないより持ってたほうがエンジニア感出るかな、メンテナンスしてないよりしてたほうが良いかな、と思ってやった。
いずれは、はてブロやQiita、SpeakerDeckらへんの更新を自動でフェッチして反映するような仕組みとか作れたらいいかもしれない。