この記事は, アドベントカレンダー 2024 25 日目の記事です.
こんにちは. 24B の Oxojo です.
12 月に入って, フロントエンドの勉強を本格的に始めたので, ついでにずっと作ろうと思っていた個人サイトを作っています.
サイト本体は, こちらからご覧ください -> https://www.oxojo.dev
モチベーション
そもそも, 私は競技プログラミングという形でずっとプログラミングをやっていたのですが, 9 月中旬ぐらいにモチベが落ちてしまい, 一旦休止することにしました.
それからは, プログラミングからは離れた生活を送っていましたが, 2 ヵ月ほどしてプログラミングの意欲が戻ってきました. 競プロのモチベは復活していなかったので, 新しいことを始めようと思い, Web 開発に手をつけることにしました (最近は競プロのモチベもちょこちょこ復活しつつはあります).
そこで, 自分は個人サイトを作ってみたかったんだよな, ということを思い出したので, 勉強にもなると思い作っています.
使っている技術
Vue を勉強したかったので, 今回の個人サイトは Vue で実装しています. 勉強したかった理由としては, 友達が Web 開発を始めたくて Vue を勉強していると聞いたので, 自分もやろうかな～という軽いノリです. とはいえ, 個人的には結構面白いです.
また, そもそも生で HTML や CSS, JavaScript を書いてサイトを作った経験があったので, それもあって結構スムーズに頭に入ってきました.
詰まったところ
スムーズに頭に入ったとはいえ, もちろん詰まったポイントはあります.
なんか表示されない！
Vue でページを作って, Github Pages に乗っけようと考えていたので, いつものように適当にリポジトリを作って適当に乗っけました. その結果, 特にバグは起きていないのにページが真っ白という現象に陥ってしまいました.
色々調べて, その都度試して, を繰り返して, なんとか解決しました.
そもそも Vue は理解してもらえない
小見出しのつけ方が下手ですが...
ただ Vue で実装をしたものをそのまま表示してくれるわけではありません. ブラウザ側では Vue のプログラムは理解してもらえないからです. そのため, なんとか理解してもらうために, これらのプログラムをまとめて生の HTML, CSS, JavaScript に翻訳する必要があります.
まずは, この翻訳のような作業をする必要がありました.
翻訳したファイルはどこへ...
翻訳してもらったファイルは, デフォルトでは dist ディレクトリに保存されます. しかし, Github Pages へのデプロイはこのディレクトリからは行うことができません.
main ブランチから直接デプロイするか, その中の docs ディレクトリからデプロイするかの 2 択しかないようです.
というわけで, いい感じに設定をいじって, ファイルの保存先を docs に変えてあげることにしました. 今回は, ビルドを vite で行っているので, vite.config.js の中の outDir を設定しなおすことで解決しました.
サムネが表示されない！
サムネを設定した後ウキウキで traQ の自身への DM にリンクを投げたところ, サムネが表示されませんでした.
SNS のキャッシュの問題かも
traQ で教えていただいたのですが, こういうリンク類に対しては SNS 側でキャッシュが保存されているみたいです. そのため, このリンクを最初に貼ったときに「このリンクにはサムネがない！」と覚えられていて, しばらくサムネが表示されないことがあるそうです. この辺は SNS 側でこのキャッシュが消えるのを待つしかないということでした.
後ろにスラッシュを入れるとサムネが出るので, サムネを出したいときはそうしています.
トップページ以外にダイレクトにアクセスできない
ということで, 無事トップページにアクセスできるようになりました. 一旦リンクを貼っておこうと思い, Coming Soon... とだけ書いたページを用意し, アクセスできるようにリンクを貼りました.
ところが, このページでリロードすると, 404 エラーが出てしまいます. 困ってしまいました.
トップページ以外は呼び出しが...
これも traQ で教えていただきました.
トップページでは index.html を呼び出しているので, Github Pages は正しく認識して表示してくれます. ところが, それ以外のページリンクは index.html を呼び出していないので, index.html がないと表示できないよ～ >< という感じで, 404 を返してしまうそうです.
これを解消するには, どこのリンクに行っても強制的に index.html を呼び出すように仕向ける必要があります. が, これをまともにやるにはバックエンドをいじる必要があるそうです. バックエンドの知識は全くないので, 困ってしまいました.
404 を逆手にとって...
Github Pages は, 404 を出すときに 404.html を認識してくれるという特徴があるそうです. そこで, この 404.html を作って, index.html に飛ばすというスクリプトを書くという方法をネットで調べて, 実行することで無理やり解決させました.
いずれはバックエンドも勉強したいですが...
これから
今, Articles のページに, この traP ブログの api を叩いて私が投稿した記事を取得し, 並べるプログラムを実装しています. もちろん api を叩くには認証を通過する必要があるので, それを通すためにいろいろ調べたり, 先輩のサイトを参考にしたりしているところです.
結構デザインも気に入っているので, このまま開発を続けていい感じに仕上がるといいな～と思っています.
