自分のポートフォリオ的なWebサイトとしてhttps://www.petitviolet.net
を作っている。
もともとはHTMLべた書き + Bootstrapで作っていたが、GatsbyJSを使って作り直してみた。
たいして更新することもないので静的サイトジェネレータを使ってジェネレートするほどのことはないと断言できる。
が、たまにはフロントっぽいこともやるかというくらいの理由。
GatsbyJSを選択したのはなんとなく。HugoとかでもよかったけどJS触っておきたかっただけ。
技術っぽい話
技術的な要素を並べてみる。
- GatsbyJS(React)
- yamlからジェネレート
- TypeScript, ESLint
- Material Design LiteとFont Awesome
- ホスティングはGoogle App Engine
- 画像の配信はCloud Front + S3
- ドメイン管理はGoogle Domains
マルチクラウドな感じですね。
ソースコードは特に隠すものもないのでGitHubにあげてある。
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用のドメインとその証明書を用意したのだけど、証明書の発行にめっちゃ時間かかって困った。
AWS Certificate Manager、寝て起きてもPENDING_VALIDATIONでどうしたらいいんだこれは
— こむ (@petitviolet) 2019年2月17日
リプライでやり直したらすぐ通ったよ!的なことを教えてもらったのでやったら1分で検証されて発行されて無事httpsでアクセスできるように。
GAEでhttps勝手にやってくれるしそれ以外のリソースについてもCDNでhttps配信できるようになったのでまあいい感じでしょう多分。
高速化
CDN配信、画像をwebp化、静的ファイルのキャッシュ長め、といったあたりをやったら速くなった。
そもそも静的コンテンツなので速くて当たり前ということで。
感想とか
持っててどれくらいの意味があるかわからないポートフォリオをアップデートしたけど、持ってないより持ってたほうがエンジニア感出るかな、メンテナンスしてないよりしてたほうが良いかな、と思ってやった。
いずれは、はてブロやQiita、SpeakerDeckらへんの更新を自動でフェッチして反映するような仕組みとか作れたらいいかもしれない。