WSL2 + Hugo + VSCodeでブログ更新環境を作った

Apr 20, 2020 23:50 · 1396 words · 3 minute read windows wsl vscode hugo

ヤフオクでThinkpad X270を落札し、WSL2を使える環境を作りました。

Windows7をWindows10にアップデートして、WSL2を使ってみた
https://blog.kapiecii.com/posts/2020/04/18/hello-wsl2/

今回はHugoとVSCodeをインストールし、ブログを更新する環境を作ります。

Hugoのインストール

下記から、最新のHugoをダウンロードします。
https://github.com/gohugoio/hugo/releases/

今回はWSL2を使いたいので、Windows版ではなく、「Linux-64bit.deb」の形式をダウンロードします。
すんなりインストールできました。

$ sudo dpkg -i hugo_0.69.0_Linux-64bit.deb
Selecting previously unselected package hugo.
(Reading database ... 29242 files and directories currently installed.)
Preparing to unpack hugo_0.69.0_Linux-64bit.deb ...
Unpacking hugo (0.69.0) ...
Setting up hugo (0.69.0) ...
$ hugo help
hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

WSL2では、始めからgitコマンドがインストールされています。
ブログ用リポジトリをgit cloneし、デバッグ用サーバを起動してみます。

$ git clone https://github.com/kapiecii/XXXXX.git

$ hugo server -D


{ 中略 }

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

問題なく起動できました。

ということで、何のトラブルも無くすんなりとHugoのインストールは終わりました。

VSCodeの設定

VSCodeに拡張機能を入れていきます。

目次をつける

VSCodeの拡張機能を使って、記事に目次をつけます。

Markdown TOC
https://marketplace.visualstudio.com/items?itemName=AlanWalk.markdown-toc

こちらの記事を参考に、改行コードなどを変更しておきます。

【VSCode】Markdownで書いたブログに目次を付ける！（Markdown TOC）
https://dev.classmethod.jp/articles/vscode-markdown-toc-for-blog/

Vimキーバインド

テキスト編集時、Vimキーバインドを使いたいです。

Vim
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

クリップボードから画像を貼り付ける

クリップボードの画像を記事に貼り付けることができます。

paste imate
https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image

WSL2からVSCodeの起動

WSL2で下記のコマンドを実行すると、WindowsのVSCodeが起動できました。

$ code .

WSL2では、/mnt/の下にWindowsのファイルシステムをマウントした状態になっています。
WSL2とWindos相互のファイルシステムを行き来するのはめんどくさいので、コマンド1つでエディタを開いて編集を始められるのは、とてもいいですね。

困ったこと

Hugoのインストールとエディタの設定はすんなりと終わったのですが、実際に記事を書いてみると困ったこともありました。

Hugoのホットリロード機能が動かない

Hugoでは、Markdownの記事を保存すると同時に画面に変更が反映される、ホットリロード機能があります。
WSL2で下記コマンドを実行してデバッグ用サーバを起動したのですが、ホットリロード機能が動作しませんでした。そのため、変更を反映するために再度コマンドを実行する必要がありました。

$ hugo server -D

再度コマンドを実行するだけではあるのですが、地味に不便です。
全てのファイルをWSL2側に揃えるか、WSL2とWindowsにおけるファイルの権限を調整してあげると、ホットリロード機能が動くのではないかと思うので、調整をしてみようと思います。

最後に

すんなりとブログ更新の環境が整いました。WSL2はとても便利ですね。
Windowsのツールで、MicrosoftのWindows Terminalも気になっていたので、次はそちらも触ってみようと思います。

Windows Terminal (Preview)
https://www.microsoft.com/ja-jp/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab

目次