痔の手術で、2週間の入院生活を送ることになりました。
「どうせ寝ているだけなら、以前から気になっていたブログ構築に挑戦しよう」——そう思い立ち、手元のスマホ1台でこのブログ「TECH & ROOTS」を立ち上げました。
1. 技術スタックの選定
環境構築からデプロイまで、すべてモバイルで完結させる必要があったため、シンプルさを最優先に選びました。
- Framework: Hugo（静的サイトジェネレーター）
- Hosting: Cloudflare Pages
- Version Control: GitHub（モバイルWebブラウザ経由）
- Markup: Markdown / CSS3
最初は「Cloudflareでサイトが作れる」という情報だけを頼りに、名前が目についた Workers を触り始めました。 静的サイトが何かも、Workers と Pages の違いも分からないまま、とにかくスマホで画面を触り続けていました。 調べるうちに「Hugo のようなフレームワークで生成したファイルをそのまま置くだけなら Pages が正解」とわかり切り替えたところ、あっさり動きました。 パスの設定やエンコーディング周りで手間取りながらも、「現場での段取り替え」と同じ感覚で一つずつ潰し込んでいきました。
2. 開設後の技術的進化
4月中旬、基盤が安定してきたタイミングで、エンジニアとして「納得のいく状態」を目指した大幅な見直しを行いました。
自動デプロイの整備
GitHubとCloudflare Pagesを連携させ、git push を起点に自動ビルド・デプロイが走る環境を構築しました。スマホからコミットすれば数分でサイトに反映される状態になり、運用の手間が一気に減りました。
表示速度の最適化
「読み手にストレスを与えない」ことを優先し、画像まわりに手を入れています。全アセットをWebP形式に変換してファイルサイズを削減し、アイキャッチ画像は読み込み優先度を個別に設定することで、ページの表示速度を改善しました。
泥臭いトラブルとの格闘
構築中に一番時間を取られたのは、「Markdownが正しく描画されない」という原因不明のバグでした。調査の結果、コピペで紛れ込んだゼロ幅スペース（肉眼では見えない特殊文字）が犯人でした。詳しい特定方法はHugo構築記事に書いています。
3. これからの「TECH & ROOTS」
基盤が整ったことで、ようやくコンテンツに集中できる状態になりました。
今後は本職である生産技術エンジニアとしての知見——PLC・電気設計・自動化技術・資格取得——を中心に、現場で本当に役立つ情報を「根っこ（ROOTS）」から掘り下げて発信していきます。
どんな人間が書いているのか気になった方は、Aboutページをどうぞ。
