Next.jsのSSGで作る個人ブログ
2024/12/01 投稿
はじめに
Next.jsのSSGでこのブログを作りました。記事の前半ではその構成を説明し、後半ではマークダウンの表示のサンプルを示します。
ブログの構成
Next.jsのSSG
Next.jsのSSG(Static Site Generation)はビルド時にHTMLを生成する機能です。今回はコメントやいいね機能などの機能を持たないシンプルなブログのため、SSGを使いました。
マークダウンファイルのビルド
unifiedを使ってマークダウンファイルをHTMLに変換し、ビルド時に記事を生成しました。rehype-reactを使うことで、マークダウンをオリジナルのReactコンポーネントに変換できるので、useStateなどを使った柔軟なUIを簡単に作ることができます。
デザイン
12カラムのグリッドシステムを使ってデザインを作りました。CSSはTailwind CSSを使いましたが使いこなせていない部分も多いので、今後改善していきたいと思います。
マークダウンの表示
箇条書き
- 箇条書き1
- 箇条書き2
- 箇条書き2-1
- 箇条書き2-2
- 箇条書き2-2-1
リスト
- リスト1
- リスト2
- リスト2-1
- リスト2-2
- リスト2-2-1
リンク
アンカーテキストあり(インラインリンク)
テキスト中のリンク
アンカーテキストなし(リンクカード)
画像
コードブロック
const hello = 'Hello, World!';
console.log(hello);
引用
引用文
表
| 1 | 2 | 3 |
|---|---|---|
| 4 | 5 | 6 |
| 7 | 8 | 9 |
見出し
見出し4
見出し5
見出し6
太字・斜体
太字 斜体
水平線
脚注
脚注1
Footnotes
-
脚注の内容 ↩