初めてのブログの構築
ブログを作ったきっかけ
- 自分の転職を機に勉強するモチベーションとして自作のブログを運用してみたく作成しました。
- あるあるですが、読書メモなど技術以外の記事を書きたかったので自分でよしなにできるブログが欲しいと思い作りました。
- 技術系の記事でうまくまとめられたものは Qiita や Zenn などに投稿したいと思っています。
- 開発力をあげるために自分で作成・運用ができるようにはてなブログなどには頼りませんでした。
使った技術
技術は手段でしかなく、流行り廃りもあるので選定にはこだわってはいません。強いていうなら
- 自分の仕事に活かせそうなもの
- コストをかけずにできる
- 参考記事があるもの
- ブログ自体の作成に時間をかけるといつまで経っても始められないため
- 自分の開発力がそこまでないため
です。
Next.js
- React のメタフレームワーク。
- 他にも Gatsby, Astro がありますが、業務で使う可能性が高いものが Next.js でした。
- 時間があれば勉強したい...
- 推奨になった
App Routerを使いました。- 以前触ったのが
Pages Routerであったため、リハビリのためLearn Nextjsをやりました。
- 以前触ったのが
- ディレクトリ構成はやりながら自分の方法を見つければいいと思ったのでとりあえずこの方の記事を参考にしました。
Tailwind CSS
- 以前触ったことがあり、Next.js のスターターに最初から入っているので tailwind を採用しています。
Contentlayer
- 書きやすさと他サービスへの移植性の観点から投稿記事を Markdown 形式で書きたく、いろいろな参考記事があり、採用しました。
- 利用するにあたり、Getting Startedで勉強しました。
- 色々参考記事がありましたが、結局これが一番よかったです。
- 段階的に学ぶことで初期セットアップに必要なもの、設定ファイルに書くべきもの、実装の仕方がわかるようになるため。
- 後から Zenn の CSS が用意されていることに気がつき、これにすればよかったとも少し後悔している
ブログを実装する
とりあえずサンプルで起動してみる
自分にデザインの素養がないのとゼロから考えるのは大変だったためフリーで参考になりそうなものを探しました。最終的にはこのサイトのが自分の実現したいブログに一番近く、MIT ライセンスであったため採用しました。
README に書いてある Quick Start Guide を参照すれば苦労することなく起動することができます。同じように参考にしている記事がいくつかありました。
しかし、一部修正をしようにも、本サイトでは自作パッケージが使われていて、依存パッケージのバージョンを変えたり使われている技術を理解するのが大変でした。結局このパッケージを使うことを諦め、ゼロから自分で作りました。サンプルページをそのまま使う分には立ち上げも簡単なため非常に良いですし、ヘッダやダークモードの切り替えなど各コンポーネントで参考になるところはあるのでサンプルとしては非常によかったと思います。
トップページを作る
ということでゼロから自分で作ることにしました。
前述の通りサンプルの構成は気に入っていたので、ヘッダとフッタはサンプルのコンポーネントを持ってきて加工しました。
トップページのコンポーネントは以前本記事にて学習した際に tailwind のコンポーネントの参考になりそうなサイトを備忘として残しておいたのでこちらから探しました(よろしければ Qiita 記事にいいねください)。最終的にはTAILBLOCKSのブログコンポーネントを参考にさせていただきました。
投稿ページを作る
前述のサンプルで Contentlayer を使っていたのでそのまま Contentlayer を採用しています。私のように Contentlayer の記事を色々みても config ファイルの修正などどれをどうすればいいのかわからない方はGetting Started をやって理解を深めてやると良いと思います。本ページは Getting Started の結果をほぼそのまま使っています。
Contentlayer を使ってブログを作っている参考サイトで kedama-t さんのブログやQiita 記事がとても参考になりました。こちらのブログは自分で CSS を定義したり、独自色があって素敵でした。ただ、私には CSS を自分で作るセンスがなかったので、こちらの記事の CSS のみ適用するというサボりをしました。（Contentlayer を使わず html パッケージを使うというのもありだなと思いました。）
ついでにこちらの記事によると簡単に目次が作れそうだったので、ほぼそのまま適用しました。INARI TECH さんは他にも参考になりそうな記事やコンポーネントを公開していました。
おわりに
自分なりにシンプルでいいブログが作れたと満足していますが、まだ一部のページしか作れていないのでやることばかりです。
- About ページを作る
- タグをつける
- ブログ一覧ページをつける
- 埋め込みリンクができるようにする
- SEO や広告など
記事も投稿しつつ、改良もしていきたいと思います。引き続き温かい目で本ブログをご参考ください。