みなさん、はじめまして！
音楽とアニメとハイボールが大好きな Web エンジニアの yasu と申します！
このたび、超個人的嗜好で厳選したお気に入りの音楽を Apple Music のプレイリスト形式で紹介していく音楽ブログ「Fav Music」の構築・運用過程で得た技術的知見を qiita にアウトプットさせていただくことにしました。
僕がここでアウトプットした技術情報がいつか誰かの助けになったら嬉しいです :)
今回はご挨拶がわりに僕が Fav Music を構築・運用するために使用している技術や製品をご紹介させていただきます。
なお、Fav Music の全てのソースコードは GitHub でも公開してますので興味のある方は合わせてご参照ください。
<(*_ _)>
Fav Music を構築するために使用している技術や製品
- MacBook Early 2015
- macOS Catalina 10.15.2
- Git 2.21.0 (Apple Git-122.2)
- Homebrew 2.2.2
- Rbenv 1.1.2
- Ruby 2.6.5
- Jekyll 3.8.6
- Adobe XD 25.1.12.7
- Visual Studio Code 1.41
- Google Chrome 79.0.3945.88
- GitHub
使用した技術や製品をいろいろ列挙しましたけど、重要なのは Jekyll だけですね笑
今流行りの静的サイトジェネレーターってやつですw
最初は WordPress でサイトを構築したんですけど、静的サイトジェネレーターをいろいろ試してみて最終的に Jekyll にしました。
Jekyll の他にも
を試してみましたが、Jekyll を採用した決め手は、タグの一覧ページのページング機能が割と簡単に実現できたことです（各静的サイトジェネレーターのデフォルトの機能では意外と実現するのが難しい部分です）。
静的サイトジェネレーターで生成した静的サイトは WordPress で構築した動的サイトと比較してページングと検索の機能が弱い（というか自分で実装しないといけない）ので、これから静的サイトジェネレーターを使おうと思っている方はまず最初にその辺の使い勝手を徹底的に調査しておいた方がいいかもしれません。
ちなみに、Fav Music ではまだ検索機能は実装してません💦
Adobe XD はキャッチアイ画像を作成するのに使ってるだけです。僕はデザインツールには詳しくないのでアレですが、Adobe XD はサクサク動いて使ってて気持ちいいですv
Visual Studio Code はコード（HTML, CSS, JavaScript, YAML, Ruby, Liquid）と記事（Markdown）を編集するのに使ってるのと、Git とか Shell コマンドも内臓ターミナルから叩いてるので、ぶっちゃけほとんどこの中にいますw
Google Chrome は、もちろん表示の確認とデバッグ（スタイルの調整）に使ってます。
Fav Music を運用するために使用している技術や製品
最初に WordPress でサイトを構築したときは EC2 と RDS と ALB を使ってガチで半年ほど運用してましたが、そもそも静的なコンテンツしかないんだから S3 で十分じゃね？ということに気付き、先日 S3 に切り替えました (笑)
これで万が一 Yahoo 砲が来ても耐えれますw
WordPress から S3 の静的 Web サイトホスティングに切り替える時にちょっと困ったことは、S3 ではページ URL の拡張子（.html）を省略できないっていうことでした（ディレクトリ URL の index.html は省略できます）。
対策はいくつかあるみたいですが、僕は単純に内部リンクは拡張子（.html）付きで書いて、WordPress の時に使われていた拡張子なしの URL は新しい URL に Rewrite （S3 側に Redirection rules として登録） するようにしました。
このやり方が一番良いやり方だったとは思えないので、もう少し調べて別の記事にまとめたいと思ってます。
S3 ＋ CloudFront でブログを運用した場合の実際のコスパについてもみなさん気になるところだと思うので近々公開したいと思ってますが、幸か不幸か全くアクセスがないサイトなので (恥)、参考になる数字が出せる日が来るかどうかは怪しいものです (笑)
まとめ
以上、僕が Fav Music を構築・運用するために使用している技術や製品をご紹介させていただきましたがいかがだったでしょうか。
今回は技術情報としてはほとんど価値のない記事だったと思うので、次回はもう少し役に立つ情報をアウトプットしたいと思います💦
ではまた ( ⸝⸝•ᴗ•⸝⸝ )੭⁾⁾