ブログを作ったきっかけ

自分の転職を機に勉強するモチベーションとして自作のブログを運用してみたく作成しました。
あるあるですが、読書メモなど技術以外の記事を書きたかったので自分でよしなにできるブログが欲しいと思い作りました。
技術系の記事でうまくまとめられたものは Qiita や Zenn などに投稿したいと思っています。
開発力をあげるために自分で作成・運用ができるようにはてなブログなどには頼りませんでした。

使った技術

技術は手段でしかなく、流行り廃りもあるので選定にはこだわってはいません。強いていうなら

自分の仕事に活かせそうなもの
コストをかけずにできる
参考記事があるもの
- ブログ自体の作成に時間をかけるといつまで経っても始められないため
- 自分の開発力がそこまでないため

です。

Next.js

Tailwind CSS

以前触ったことがあり、Next.js のスターターに最初から入っているので tailwind を採用しています。

Contentlayer

ブログを実装する

とりあえずサンプルで起動してみる

自分にデザインの素養がないのとゼロから考えるのは大変だったためフリーで参考になりそうなものを探しました。最終的にはこのサイトのが自分の実現したいブログに一番近く、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 や広告など

記事も投稿しつつ、改良もしていきたいと思います。引き続き温かい目で本ブログをご参考ください。

参考文献

使用技術の学習
- Learn Nextjs
- Content Layer Getting Started
デザインの参考
その他
- Next.js+Go でクイズアプリを作ってみる

Tag: Tailwind CSS

Tailwind CSS (1)

初めてのブログの構築