Next.js でブログを作りました

2022-03-30

blogNext.js

なぜ作ったのか

もともと、旅行記録を取るためのブログを作っていたのですが、旅行以外の記録は別のブログにしたいと思って作りました。

https://potof.net/

Obsidian との棲み分け

今まではこの手のメモはすべて Obsidian & Github(Private)で Knowledge 管理していたのですが、
せっかくなので Web 公開する道筋も作ってもいいかなって思って用意しました。

しばらくは Obsidian に書いた内容を整理してこのブログに入れていこうかなって思います。

Next.js

旅行のブログはもともと Wordpress で作っており、サーバ代を無料するために SSG なブログへ作り直しました。
ほぼ初のモダンなフロントエンドなこともあって苦戦しました。

どうせブログに必要な機能なんて決まっているので、
もう少し簡単に作られればいいのに、、、と思い、初回の反省を踏まえてスタータキットをまず作りました。

https://github.com/potof/nextjs-blog-ts-mui-starter

このブログは上記リポジトリをベースに作っています。
自分でほしい機能は作ったつもりですが、今後、なにか必要になれば上記を更新していこうと思います。

このブログとの差異はコンテンツと site.config.json だけなのでメンテナンスも簡単ですね。

Markdown ブログ

流行り廃りによって技術要素は変わってくるので、
このブログは特殊な記法をしないピュアな Markdown で記事を管理します。

一応、Zenn の特殊記法も使えるのですが、普段使わないしぱっとかけないので使いません。

Vercel にデプロイしました

アドセンスやアフィリエイト目的ではないので、無料枠で使える Vercel にしました。
やっぱり Next.js の胴元なだけあってめちゃはやです。すごい!

YAML front-matter

YAML front-matter はブログの機能に直結するので、少なすぎるとできること少ないし、多いと更新するのがめんどいので結構悩みました。
結局、以下の 3 つだけ指定することにしました。

---
title: "Next.js でブログを作りました"
date: "2022-03-30"
topics: ["blog", "Next.js"]
---

どっかで Vercel が有料になった〜とかで移行する場合を考え、
その時も Zenn はあるかなってことで Zenn への移行性を考慮しました。

ちなみに Zenn は以下です。

title: "" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字(1文字だけ)
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: [] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定(falseにすると下書き)

type を実装するかすごく悩んだのですが、個人ブログの規模で type は不要だし、
移行する場合は大半が技術記事かなって思い捨てました。

emoji はキャッチーな割にサムネイル画像のように重たくもならないので魅力的ですが、
シンプルなサイトゆえに使う絵文字でサイトコンセプトがごちゃごちゃになってしまうのでやめました。

CatNose さんの個人ブログがとても素敵ですが、これは絵文字じゃなくて画像だからかっこいいですよね。

https://archived.catnose.me/

これに対抗して fontawesome をキャッチアイコンにしようかとも思ったのですが、
Next.js IconReact IconMUI Icon もいずれも import しないのといけない関係上、動的にはできないのでやめました。

ここは webfont な方式でいけば解消できるかもなので実装できるようであれば作ってみようかな。