個人サイトを0から作ったぞ!

個人サイトを0から作ったぞ!

2025-11-13
読了時間: 3分
#Nuxt

概要

趣味で、ブログとかポートフォリオとか詳しいプロフィールみたいなのを全部合わせた個人サイトを作りたいな~と思い、作ったのでその雑記と記念記事的な感じです。

人前に出せるレベルにはなった、一旦
人前に出せるレベルにはなった、一旦

てきとー

もともとこのwww.bokukoha.devは今のこのサイトのAboutみたいな感じのが表示されるだけのサイトで、ブログはHugoという別のSSGを使って管理していました。

が、そこそこ技術力あがってきたしサイト2つに分かれてるのもキモいし、いっそのこと俺の全てを注いで個人サイト作ってもいいんじゃないか!?ということで、作りました。

驚異

このサイト、僕のMisskeyを見てた方ならわかると思うんですが、4日間で35時間くらいの作業をぶっ続けでやって完成させました。久しぶりにこんな集中してなんかやったな~と思います。めっちゃ疲れた……。

作業中は常にgoghを起動していたらこんなことに…
作業中は常にgoghを起動していたらこんなことに…

ただ、やっぱり動かなかったものを必死に調べたりってのを4時間くらいした末に動かすってのは本当に気持ちのいいもので、このサイト作ってる4日間だけで5回くらいは「よっしゃあ!」って声出してた気がします。↑の画像の下のキャプションを見てもわかるように、わりとまだ粗削りで、改善できるところ、追加したい機能等はいくらでもあるのでこれから頑張ろうかなと思います。

若干技術的な話(11/16追記)

あとでWorkの方にまとめようと思いますが、このサイトで使った諸々なんかをかるーく紹介しときます。興味なければ読み飛ばしてください。

メインはNuxt 4 + tailwind CSSです。ブログ部分はNuxt Content 3を使ってます。こういったweb開発経験があんまりないのと、初見だとドキュメントが結構難解だったもので、割と苦労しました。特にNuxt 4は、3と違ってページだとかコンポーネントだとかのディレクトリがroot/pages, root/componentsから間に/appを挟むようになったので、そこがまず第一の躓きポイントでした。

実は以前にNuxt 3とContent 3でブログもどきみたいなものを自作したことがあり、その時の経験があるからなんとかなるだろ~と思ってやってみた結果、まあ詰まりましたよね……。以前の制作物は、記事配信と一覧ページだけというコンテンツ配信サイトとして本当に最低限の機能しかつけていなかったので、このサイトのようにそこそこ機能を盛る時点で苦労するのは見えてはいたんですが、流石にここまで難しいとは思わず、web制作おそるべしという感じ。

人間やればできる

正直Webは全然触っていなくてかなーり自信がなかったのですが、デザインとか結構よくないですか?だいぶ納得のいく見た目が作れた気がしています。調べて頑張りつつ、AIに色々投げておけばなんとかなるな~と思います、ほんと。

これから色々と改善していく予定なので、今後とも機会があればぜひ覗きに来てください。下のいいねボタンを押してくれると僕が喜びます!色々こだわってるので、他の記事とかサイトの他の部分もたくさん見てくれると嬉しい!!!

このページをシェア

© 2025 Koha. All rights reserved.