はじめに

概要

個人ブログを作りたいと思い、作った内容を備忘録としてQiita記事に投稿します。開発力はまだまだ駆け出しですが、私のような初心者の方が始める際の参考になれば嬉しいです。本記事や作成したブログも温かい目で見ていただきますようよろしくお願いします。

対象読者

Next.js, TypeScriptちょっとわかる人
個人ブログを作成してみたい人

きっかけ

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

作成したもの

※まだトップページとそこから辿れる記事ページしかできていません。

使った技術

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

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

です。

Next.js

React のメタフレームワーク
他にも Gatsby, Astro がありますが、業務で使う可能性が高いものが　Next.js でした
- 時間があれば勉強したい...
推奨になったApp Routerを使いました
- 以前触ったのがPages Routerであったため、リハビリのためLearn Nextjsをやりました
ディレクトリ構成はやりながら自分の方法を見つければいいと思ったのでとりあえずこの方の記事を参考にしました

Tailwind CSS

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

Contentlayer

書きやすさと他サービスへの移植性の観点から投稿記事を Markdown 形式で書きたく、いろいろな参考記事があり、採用しました
利用するにあたり、Getting Startedで勉強しました
- 色々参考記事がありましたが、結局Getting Startedが一番よかったです
- 段階的に学ぶことで初期セットアップに必要なもの、設定ファイルに書くべきもの、実装の仕方がわかるようになるため
後から Zenn の CSS が用意されていることに気がつき、これにすればよかったとも少し後悔している

Cloudflare Pages

商用、無料で利用できるため
Cloudflare を触って機能を把握してみたかったため
- CDN で有名である Cloudflare を把握しておくことは今後に活かせる可能性が高いと考えた
- Pages ではないが、業務で Cloudflare を使う可能性があった
消去法
- Vercel
  - Next.js の学習の時に使い、ある程度慣れていた。今回は慣れていないものを使いたいと思い除外
- Github Pages
  - 業務でちょこっと使ったことがあった。
  - 静的エクスポート後のリポジトリを参照する必要があり、リポジトリが複数になりそうだった。
- Netlify
  - Netlify から Cloudflare へ移行している記事が多かった
  - おそらく東京にエッジサーバがなく遅いのだろう（と推測）
- Firebase Hosting
  - 悩んだ。。
  - 今度モバイルの勉強をするので firebase はそれで慣れることにした

ブログを実装する

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

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

静的エクスポートの設定

エクスポート

今回使っている Next.js の ver.14 ではnext exportコマンドが使えなくなっています。代わりにドキュメントにも記載されている通りに設定する必要があります。

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: "export", // outputを追加
};

この設定を加えるだけで、next buildした際にoutディレクトリに静的ファイルが出力されるようになります。この out ディレクトリを Cloudflare で公開するようにします。

その他

細々したことですが、エクスポートする際に引っかかった 2 点紹介します。

画像が出力されない
- 当初 Next/Image を使っていましたが、デフォルトでは出力されません。
- ドキュメントにも対応方法が書いてあるっぽいのですが、私の技術力では足りず、、今回は img タグに切り替えました。
HTML ファイルにあるアポストロフィーで Lint エラーが出た
- react/no-unescaped-entities": "off"で Lint エラーをオフにしました。

Cloudflare にデプロイする

【Cloudflare Pages】ブログを公開したい？...5 分もあれば十分だの記事の通りに実施しました。タイトルは大げさかもですが、この記事の通り確かに簡単にできたので手順は割愛します。

事前に準備しておくことは以下です。

フロントエンドリポジトリ(Github)
- 発行されるドメインはリポジトリ名に 3 桁のランダム値が付与される名前になるようなのでリポジトリ名は事前に良いものにしたほうがいいかもしれません。
ビルド
- ビルドコマンドと出力先を入力するので事前に把握しておく。

実際にデプロイしてみた感想としては、

Cloudflareでよかった点
- 構築は不要で、リポジトリとビルドコマンドを設定するだけで簡単にデプロイされる
- Cloudflare のセキュリティ対策の恩恵を受けることができる
- リクエストのメトリクスを取得できる
Cloudflare で苦労した点
- 色々な比較サイトに書いてあるとおり、サーバサイドレンダリング(SSR)に関しては Vercel が楽だなと感じました。Nextjs の静的エクスポートをしましたが、Image で怒られて今回は諦めて img を使うことにしました。何かの記事で Next.js は Vercel をホスティングすることが前提になっているかも？という議論を見て、今回その一端を少し感じてしまいました。

おわりに

自分なりにシンプルでいいブログが作れたと満足していますが、まだ一部のページしか作れていないのでやることばかりです。

About ページを作る
タグをつける
ブログ一覧ページをつける
埋め込みリンクができるようにする
SEO や広告など

また、Cloudflare は_headers でヘッダを設定できるようなので、ブログの改善に飽きたらこちらを試してみたいと思っています。

最後まで読んでいただきありがとうございました。

参考文献

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