WordPress用のWeb記事の執筆をMarkdownとHTMLをVimとGitHubとHugo使って、どこでも環境構築できるようにする

Webの記事の執筆を効率よくする方法について、以前にも試行錯誤してきましたが、
NeoVimを使い始めて、CLIツールを取り入れることで、新たなスタイルが出来上がりました。

WordPressのGutenberg（グーテンベルク）、ブロックエディタもサーバーのスペックが良ければ、コンピュータで記事を書くのには便利ですが、
サーバーやコンピュータに十分なスペックがないと結構重たいので、色々模索していました。

• マークダウンで管理する
• Notionで下書きをする
• 下書き専用のWordPressサーバーを用意する

などを試してきましたが、準備が大変だったりお金がかかったりと満足のいく環境は作れていませんでした。

下書きの状態で他の方にレビューをしてもらえるように、パスワード付きで公開したい、WindowsでもMacでも使えるようにクロスプラットフォームな方法が良いなど細かい実現したいこともあったのですが、

• NeoVim
• GitHub
• Pandoc
• Hugo
• Linux（VPSサーバー）

を使うことで、コストを抑えてやりたいことを実現できました。紹介します。

必要なもの

• Git
  バージョン管理と複数デバイスでの同期のためになど使います。
• NeoVim
  テキストエディターです。
• Pandoc
  HTML -> Markdown や Markdown -> HTML などの変換に使います。
• Hugo
  静的サイトジェネレーター。Markdownのプレビューと他の人にレビューしてもらう際の共有のときの見た目を整えるために使います。

これらは各OSのパッケージマネージャーを使うと簡単にインストールすることができます。

macOSの場合

Homebrewを使うのがおすすめです。

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrewのトップページにあるコマンドでインストールができます。

brew install nvim

など使いたいコマンド名で大体のCLIツールがインストールできます。

Windowsの場合

Windowsではwingetがおすすめです。

winget search neovim

などでパッケージを検索して、

winget install Neovim.Neovim

のようにしてインストールできます。
UNIXのパッケージマネージャーと比べるとちょっとパッケージ名の指定方法が違っているので注意が必要です。
※ winget install nvim とすると別のツールがインストールされてしまったりするのでお気をつけください。

Linuxの場合

DebianやUbuntuだと apt 、RedHatやCentOS系だと dnf などでインストールできます。

• GitHub
  アカウント作成して、プライベートリポジトリを作成します。
• Linux環境 (VPSなど)
  こちらは他の人に共有したいということがない場合は不要です。
  Apacheをインストールして、GitでGitHubからpullして、HugoでビルドしたHTMLを表示するために使います。

使い方

Hugoをセットアップします。

Hugo Documentation

Hugo is the world's fastest static website engine. It's written in Go (aka Golang) and developed by bep, spf13 and frien...

gohugo.io

content/ 以下にMarkdown形式でNeoVimで記事を書いていきます。

hugo server

でブラウザで見た目を確認できます。CSSも設定できます。
static/css/style.css にCSSを置いて、
layouts/ にGoテンプレートを使ってindex.htmlを作ると見た目を整えられます。

記事を書き終わったら、GitHubにpushします。

HugoでビルドするとHTMLが public/ 以下に生成されるので、
それをWordPressに貼り付けます。

hugo

コマンドでビルドできます。

Pandocを使うと、

pandoc <記事>.md -f gfm -t html -o <記事>.html

でも、Markdown -> HTML ができます。
-f は From の「F」
-t は To の「T」
-o は Outputの「O」

-f markdown でもOKですが、gfm(GitHub Flavored Markdown) の方が変換が上手くいく気がしています。

WordPressへはプラグインが使える環境ならMarkdownのインポートが出来るようですし、
タイトルのところでペーストするとバニラのWordPressでもWordPressブロックに変換されました。（バージョンによると思います。）

HTMLをコードエディタに貼り付けても良いと思います。

私は会社管理のWordPressで制限が多く、コードエディタも制限されており使えないので、
ショートコードブロックにHTMLを貼り付けるという方法に落ち着きました。

AstroかHugoで迷いましたが、Hugoを選びました。

Astroは以前に使ったことがあり、他でも使うことが多い npm を使うので、
Markdown -> HTMLをしたり、プレビューをするのはAstroにしようかと思いましたが、
Hugoを使ってみて、node_module ディレクトリなどが残らずディレクトリ階層をシンプルに保てるのでHugoを使っています。

まとめ

全てのツールがクロスプラットフォームかつ、CLIで軽量に使えるので、
パソコンのスペックが低くても快適に動作ができます。

今のフローだとgitの操作のadd, commit, pushが煩わしいので、goでそれを簡略化するCLIツールを作れないかと考えています。

次は、iPhoneでの編集がWordPressアプリだとちょっと重たい感じがするので、Markdownを上手く扱えるアプリを探しています。

iPhoneとの連携を考えるとNotionが便利だと思います。MarkdownだとNotionでも扱いやすいので、Notionと上手く連携出来るフローとかでもいいのですが、引き続き模索中です。