t11o

Next.js, Vercel, GitHubでblog作り直した

Next.js, Vercel, GitHubでblog作り直した話.

背景

blog を作り直した.
理由はこれ.

  • 日常的にメンテ出来るものが欲しかった
  • イチから何かを作って公開, という経験をしてみたかった
  • WordPress ほど多機能じゃなくていいと思っていた
  • blog 記事は git 管理したかった

ここでは最初の2点について解説.

日常的にメンテ出来るものが欲しかった

私はフリーランスとして働いている.
最近は手を動かすよりもスケジュールや人の調整をする事が増えてきた.

そんな中, 次のような危機感を感じている.

  • いざというときにコマンドを忘れて初動が遅れる
  • 技術トレンドを追いかけたり試したりする機会がなくて焦る

このへんの焦りを解消するために, 日常的にメンテできるものが欲しかった.

仕事で触れることのなかった React, Next.js を試してみたいという思いもあった.
この blog を練習場として色々試したい.

イチから何かを作って公開, という経験をしてみたかった

それなりの年数エンジニアをしているけどいわゆるポートフォリを持っていなかった.
既存システムを改修したり, 新規案件だとしても API 開発担当でフロントは他のエンジニアにお任せ, みたいな.

旧 blog は wp 製だった.
イチから作っている感覚はなく, 既にあるテンプレートを少しゴニョってレイアウトを整えるくらい.

この blog で採用した React, Next.js のように, 仕事で触れる機会がないけど試してみたい技術がある状態が長らく続いていた.
折角の機会なので, React ワカラナイマン だけど試してみたいマン, そしてイチ何かを作って公開したいマン のような気持ちで公開に至った.

数年前から blog を自作してますー という人をネット上でちらほら見かけて羨ましかったのもある.

dir. 構成や css は Next.js tutorial とほとんど同じだけど, いざ公開したものを見ると達成感があって嬉しい.

blog 作成当初の技術スタックはこんな感じ

blog 作成当初の私の技術スタックこんな感じ.

  • PHPer
  • 最近はブリッジSE, API 開発, AWS Glue でデータ分析基盤構築とかやってる
  • React ワカラン
  • Next.js ワカラン
  • Vue.js は1年くらい仕事で触ってた

Next.js 触ったことなかったので, 公式に従って手を動かしつつざっくり理解する感じで取り組んだ.
公式はこちら.

ゴール

blog をイチから作成するときに設定したゴールはこれ.

  • 拙くてもいいから取り敢えず公開する
    • 公開時は1記事でいい. むしろ About ページだけでいい.
    • src の綺麗さとかは後回し
  • local 開発環境を構築する

細かい点は後回しにしてリリース優先で取り組んだ.

大変だったところ

手を動かす前後で悩んだのはこのへん.

  • ディレクトリ構成どうしよう
  • CSS どうしよう

ちょっと解説.

ディレクトリ構成どうしよう

初めての SSG だったんだけど, dir. 構成がこれで良かったのか謎.
ひとまずリリース優先でいまの形にしたけど, 今後変わるかも.

現状の pages 配下はこんな感じ.
固定ページを ./pages/posts/ココ に設置した.

./pages
├── _app.js
├── about.js # 自己紹介ページ
├── api
│   └── hello.js # 今回は未使用
├── index.js # HOME
├── posts # 固定ページ本文を .md で格納
│   ├── [id].js
│   ├── about.md # 自己紹介ページの記事
│   └── read.md # 読んだ本とかをまとめているページ
└── read.js

pages/posts/ 配下に .js, .md が混在しているのがちょっと気持ち悪い.

CSS どうしよう

CSS に関してはいまも少し悩んでる.
現時点ではリリースを優先して生の CSS で style 記述した.
今後どうしよう ?

候補はこれ.

  • Tailwind CSS
  • Sass (SCSS)

Tailwind CSS は流行っているようなのでつまみ食いしたい.
Sass (SCSS) は CSS 力向上と, まだまだ現場で使われている所が多そうなので実益を兼ねて採用したい.

Next.js の blog tutorialでは CSS-in-JS を押していたけど現場で使ってる所はどれくらいあるんでしょうか ?
ご存知の方は twitter とかでこっそり教えて下さい.

いま判っている問題点

いま判っている問題点はこのへん.

  • 機能
    • RSS がない
    • 目次がない
    • 外部リンクが機能しない
    • local 開発環境で markdown 編集時, hot reload しない
  • デザイン
    • CSS がほぼ Next.js tutorial のまま

運用していくと他の問題も出てくるはずなので都度対応してゆく所存.

blog を作り直して良かった点

blog を作り直して良かった点はこのへん.

  • 公開実験場ができた
  • モチベーションアップ

今回採用した Next.js, Vercel もそうだけど, 気になる技術をカジュアルに試せる場ができたのは嬉しい.

先述したように, これといったポートフォリオがなかったので blog 公開がそのままモチベーションアップに繋がっている.

今後の抱負

最後に今後の抱負について.

  • イマ判っている問題を少しずつ解消したい
  • デザインどうにかしたい
  • 過去記事を移植したい

以下, 詳細.

イマ判っている問題を少しずつ解消したい

先述の通り, いくつか不具合がある.
気楽に記事を作成するために少しずつ解消してゆくつもり.

デザインどうにかしたい

もう少し見た目を整えたい.
現時点では Next.js tutorialとほとんど一緒.
生の CSS でゴリゴリ調整する姿勢も tutorial 通りなので今後改善したい.

過去記事を移植したい

旧 blog からいくつかの記事を移植したい.
この blog は旧 blog のドメインを引き継いでいるのが主な理由.

記事の移植準備は概ね完了している.
下記ツールを使って旧記事を markdown で吐き出した.

このツールは WP で吐き出した .xml をよしなに .md にしてくれる.
.xml -> .md への変換だけではなく, 記事に紐付く画像も DL してくれる点が優れている.
細かい使い方は README を見てほしい.

私が実行したコマンドと実行結果はこんな感じ.

コマンド.

$ npx wordpress-export-to-markdown \
  --wizard false \
  --input t11o.WordPress.2022-03-18.xml \
  --post-folders true \
  --prefix-date true \
  --save-attached-images true \
  --save-scraped-images true \
  --include-other-types true

実行結果.

./output
├── page
│   ├── 2015-10-18-about
│   ├── 2015-10-18-page-20
│   ├── 2015-10-18-page-22

# 以下略

たとえば About ページについての変換結果はこんな感じ.

# 変換後出力されたファイル群
output/page/2015-10-18-about
├── images
│   ├── consult.png
│   ├── gyokai-1.png
│   ├── gyokai.png
│   ├── marathon.jpg
│   └── prfl.png
└── index.md

# index.md の中身を見てみる
$ head -10 output/page/2015-10-18-about/index.md

---
title: "ABOUT"
date: "2015-10-18"
---

\[toc\]

## 自己紹介

![](images/prfl.png) たきもと

今後の抱負については以上.
ゆるゆるとメンテしてゆく所存.

今回は以上.