ポートフォリオサイトを作り直した
学生のときに作った個人のポートフォリオサイト（https://questbe.at/）を作り直した。
作った当時は、勉強会や就職活動など、自分のスキルセットを人に伝える場面で便利に使っていた。
しかし就職してからはそういう場がなかったので、更新する必要もなく長らく放置してしまっていた。
働き始めて3年が経った今、趣味の開発熱が高まりつつあり、また気持ちもアウトプットに向いてきたので、
モチベーションを維持するためにポートフォリオサイトを作り直すことにした。
技術選定
もともとは Jekyll を使っていたけど、いくつか問題に思う点があった。
- ブログ機能を使っていない
- レイアウトをもっと簡単にカスタマイズしたい
- シンプルな仕組みに保ちたい
- ブログに使っているわけでもないので、更新頻度は高くない。そのため長時間経ってから見るとどういう仕組みで動くのか思い出せないことがある。次はいつ見てもすぐに仕組みを理解できるよう、シンプルなものを組み合わせた構成にしたい
- 単純に何か新しいものを試したい
そんなわけで、以前から気になっていた Hugo も同様の理由で採用しなかった。
次の候補としては webpack が思い浮かんだ。
というのも、最近フロントエンド系の何かを作るたびに webpack を使っていたので、「webpack を使って静的サイトの作成環境を作ると面白そうだな」という考えが以前からあったからだ。
しかし、やりたいことに対して仕組みが複雑すぎる気もしており、
webpack でもいいけどなー…という温度感でもっと簡単な手段がないか探していた。
そんなときに Parcel というツールを見つけた。
Parcel を使った静的サイト作成
Parcel は webpack のようなバンドラで、高速なビルドと設定ファイルが不要という点を売りにしている。
また、手元で加えた変更に応じて開発サーバーのページを更新してくれる HMR の機能もある。
使ってみるとたしかに設定不要で、エントリポイントとそこから読み込むファイルの種類に応じて「いい感じに」処理してくれる。
アセットの追加も簡単で、例えば SCSS を使いたいときは npm install -D sass するだけで使用可能になる。
この Parcel を使い、以下のような構成で新サイトを作成した。
Pug は Slim のようなテンプレート言語で、HTML を簡単に記述できる。
Include や Inheritance の機能も揃っていて、レイアウトの部品化がやりやすい。
また Mixin という強力な機能があり、このおかげで記述量を減らすことができる。
Netlify はもともと使っていた GitHub Pages からの乗り換えになる。
リポジトリがプライベートでもよい点、そして独自ドメイン + Let's Encrypt SSL証明書の設定が簡単にできる（しかも無料で）という点に魅力を感じたので使ってみた。
デプロイの設定は簡単だし設定画面は異常にキビキビ動くしでとにかく体験が良かった。
Parcel を使ってみた感想
Parcel を使ってみて良かったと感じたのは、やはり設定が不要という点だった。
むしろ設定が書けないというのが正確だけど、それが Parcel をシンプルなツールとして保っている。
設定ファイルが無いぶん凝ったことはできないけど、そんなときのためにプラグインの仕組みが一応用意されている。
例えば今回だと、Parcel で処理せずにそのままビルド先にコピーしたい静的ファイルがあったので、parcel-plugin-static-files-copy というプラグインを使った。
同じような機能のツールが2つあると混乱してしまうけど、Parcel がシンプルなおかげで、凝ったことをしたい場合は webpack を選ぶという判断が簡単にできるようになっている。
そんな感じで、うまく住み分けを意識して開発されたツールだなと感じた。
今後も自作アプリの LP を作ったりするときにはこの構成でいいんじゃないかなと思っている。
