きっかけ

ブログを書く環境って、人によって本当に違うと思います。
中にはWordPressの管理画面で直接書く人もいれば、NotionやScrapboxで下書きしてからコピペする人もいる。
最近はnoteなど、簡単にアウトプットできるサービスも整っている。
でも、私はHugo + VSCodeという構成に落ち着きました。

なぜなら、「自分のペースで」「オフラインでも」「完全に自分の手で」 管理できるからです。

書くことよりも、環境をいじっていた日々

昔の私は、WordPressを自宅サーバーに導入して使っていました。 Apacheを立てて、MySQLを入れて、テーマをいじって、プラグインを選んで……。 「ブログを書く」よりも、「ブログを動かすこと」に夢中だったんです。

それはそれで楽しかったけれど、 気がつけば、文章を書く時間よりも環境を整える時間のほうが長くなっていた。 まるで「書くための準備」ばかりしているような日々でした。

そんなある日、ふとした瞬間に浮かんできたんです。 「もっとシンプルに書けたらいいのに」 と。

振り返れば、ずっと書く場所を探していた

思い返せば、最初にネット上に公開する文章を書いたのは中学生の頃でした。
生徒会の一員(役職は無く、作業員的な立場)として、学校のブログを更新していたんです。
そのとき使っていたのは、MovableType + さくらのレンタルサーバ。

あるときは、はてなブログに移りました。 でも、なんだかピンとこなかった。

自宅サーバーに熱中してからWordPressを導入。
Linuxの設定も、SSL証明書も、すべて自分で触れる環境が面白く、
気がつけばまた、書くことより構築ばかりしていた。

書くことに戻るために、Hugoへ

そんな私が再び“書くこと”に向き合うために選んだのが、HugoとVSCodeでした。
WordPressのようにログインもいらない。
レンタルサーバも不要。
ただ、テキストを打って保存するだけでいい。

まるで紙のノートに戻ったような感覚。
「これなら、また書けるかもしれない」と思えた瞬間でした。

書く環境:VSCode + Markdown

私の執筆はすべてVSCodeから始まります。
Markdownファイルを開き、YAMLフロントマターにタイトルと説明を記し、
思いつくままに指を動かす。

最低限入れている拡張機能はこれだけです:

  • Markdown All in One

余計な機能がないぶん、書くことにしか集中できなくなる。
「見た目」ではなく「中身」に集中できるんです。

画像の挿入

Wordpressなどの執筆ツールを使った経験から、この執筆環境で少々面倒なのは画像の挿入でしょうか。
画像ファイルを同じディレクトリにコピーして、markdownの画像挿入を記述します。

文章を書きながら、「この辺に画像を置こう」と思った場所に.

![説明](画像ファイル名)

とだけ書いておき、
すべてを書き終えてから画像を用意します。

または、

Command (⌘) + Control + Shift + 4

でクリップボードにスクショをキャプチャしておき、VSCode上で画像を挿入したい箇所に貼り付けをすると

![alt text](image.png)

が自動挿入され、執筆しているMarkdownファイルと同じ階層にクリップボードの画像がimage.pngとして保存されるので便利です。

そうすると、“書くモード”と“整えるモード”が混ざらない。
これは私なりの、執筆のリズムです。

静的サイトジェネレーター:Hugo

hugo server実行画面

Hugoは驚くほど高速です。
hugo serverを叩けば、ローカルに即座にプレビュー環境が立ち上がります。

テーマは PaperModX を使っていて、軽くてシンプルなのが気に入っています。

記事を書いたら、public/以下に静的ファイルを生成してくれるので、サーバー管理も不要。
WordPressのようなデータベースやPHPも使わず、ただHTMLが吐き出されるだけ。
“書いたらすぐ反映される” という純粋さが気に入っています。

VSCodeとHugoの連携

私は普段からVSCodeでコードも書くので、
Hugoのプレビューも同じ環境で動くようにしています。

F5キーを押せば、Hugoサーバーが起動するように設定。
.vscode/launch.jsonに以下を記載しています。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Hugo: Run hugo server",
            "type": "node-terminal",
            "request": "launch",
            "command": "hugo server",
            "cwd": "${workspaceFolder}"
        }
    ]
}

こうして、確認するためにわざわざターミナルを開いて、コマンドを入力することなく、「書く・見る・直す」 がすべてVSCode内で完結します。

バージョン管理と自動デプロイ

書き終わったら、VSCodeのサイドバーのソース管理でコミット&プッシュ。
GitHubにpushすると、Cloudflare Pagesが自動的にHugoをビルドしてデプロイしてくれます。

CloudflarePagesで勝手にデプロイしてくれる

つまり、「Gitにプッシュ=公開」 という最強の仕組み。
修正したいときも、ただMarkdownを直して再プッシュすればOK。

さらに安心なのは、もしPCが故障したり、ローカルのデータが消えてしまっても、
GitHub上にすべての履歴が残っているという点。
WordPressのようにデータベースをまるごとバックアップする必要がないので、管理がとてもシンプルです。

また、Cloudflare Pagesは無料枠でも十分な性能を持っており、
個人のブログ運営なら年間のドメイン代だけで快適に運用できます。

まとめ:自分の書き方を持つということ

書く環境は人それぞれです。
でも、どんなに便利なツールを使っても、「手が止まってしまう」なら意味がないと思うんです。

私がHugoとVSCodeに落ち着いたのは、何も考えずに、ただ書けるから。
ネットがなくても動くし、更新も一瞬で済む。
思考の流れを、誰にも邪魔されずに形にできる。

ときどき、私は携帯電話の基地局が無い圏外になるような場所を移動します。
電波もWi-Fiも届かない、ただ静かな時間。
そんなときでも、ノートPCを開けばいつものVSCodeが待っている。

集中したいときは、ZenモードをオンにしてMarkdownを打つ。
黒い背景の中で、カーソルだけが点滅している。
あの瞬間、世界には自分と文章だけしか存在しない気がします。

VSCodeのZenモードで執筆

その孤独が、心地いい。
そして、その自由さが、文章を自然体にしてくれるんです。

最近、 エクストリームミニマリストのTokimaru Tanaka さんをよく拝聴する機会があり、 「書くことの母艦をEmacsに移行してから、快適だ。」 と言っていました。

余計な機能を削ぎ落とした先に、自分に合う“書くための道具”が残る。
それはまるで、生活のミニマリズムと同じです。

私にとって、その道具がHugoとVSCodeだったというだけの話です。
自分の書き方を見つけることは、自分の考え方を見つけること。
自分の書き方が見つかれば、アウトプットの量は更に増えていく気がします。