バイバイ、WordPress。ハロー Hugo

WordPressをやめてHugoに移行した。

1 WordPressをやめてHugoに移行した。

mixhostで2年ほど運用していたWordPressサーバをやめることにした。

1.1 WordPressは更新が手間

大きなポイントは「WordPressで記事を書く」環境が定まらなかったこと。

なにか記事にまとめよう、と考えると、まずはMarkdownでまとめている。エディターはvscode。そこで作ったmdファイルを、

1. ブラウザを開き
2. 管理画面に入り
3. 記事を作成ボタンを押して
4. mdファイルをコピペした後、「#」を削除してh1に書き換えたり、リンクを修正する

これでようやく記事が完成する。

無駄な作業が多すぎる、と常々感じていた。趣味の一環でブログを書いているのに、その趣味に余計な手間をかけたくない。

mdファイルをHTMLに変換して、そのHTMLをWordPressに貼り付けて、といった試行錯誤や、いくつかのWordPress更新ツールも試してみたが、どうにもしっくりこなかった。

1.2 なんとなく設定した管理画面のBasic認証がめんどい

完全に自業自得でブーメランでしかない

インフラの設定の練習を兼ねて、mixhostのhtaccessファイルを色々と設定して、WordPressの管理画面にBasic認証をかけたりあれこれしていた。

設定をしている間は楽しかった。

設定してみると、記事を書くためにワンアクションが増えただけとなった。

2 Hugoへの移行

WordPressでなければなんだってよかった。あえて選定基準を上げるなら

• どうせならサーバレス
• Netlifyを使ってGithub連携、自動デプロイさせてみたい
• markdownで記事を書きたい
• 過去のデータの移設が簡単なこと

が選定基準だった。hugoでなくてはならない理由はないが、積極的な理由もなかった。

2.1 WordPressのデータをエクスポートする

2.1.1 WordPress to Hugo Exporterプラグインのインストール

Githubの公式からZipファイルをダウンロード

WordPressのダッシュボードで「プラグイン」→「新規追加」を行いインストールができる。簡単。

2.1.2 過去データのエクスポート

WordPressのダッシュボードで「プラグイン」から「有効化」する。

「ツール」→「Export to Hugo」を押してしばらく待つとZipファイルがダウンロードできるようになるそうだが、何度やってもできなかった。

2.1.3 コマンドラインからのエクスポート

幸い公式に手順があったので実行することにした。

WordPressのルートディレクトリでいいかと思っていたが、プラグインのルートディレクトリで実行する必要があった。

それと公式の手順にも書いてあるが、出力先はファイル名ではなく出力ディレクトリ名である必要があることに注意

2.2 hugoサーバの作成

2.2.1 ローカル環境の構築

メインとなるhugoの環境はpeaceiris/hugo-extended-dockerを利用させてもらった。これにnetlify functionsを動作させたり色々させるためのnpm専用Dockerを用意した。

具体的なフォルダ構成としては

1
2
3
4
5
6

❯ tree
.
├── docker-compose.yml
└── npm
    ├── Dockerfile
    └── docker-compose.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

version: '3'
services:
    hugo:
        build: peaceiris/hugo:v0.87.0-full
        volumes:
            - "../:/src"
        ports:
            - "1313:1313"
        working_dir: /src/site
        depends_on:
            - "npm"
        command:
            - server
            - --bind=0.0.0.0
            - --buildDrafts
            - --environment=development
    npm:
        build: npm
        volumes:
            - "../:/src"
        ports:
            - "9000:9000"
        working_dir: /src/site/
        command:
            - -c
            - "npm run serve"

といった形とした。

npmのDockrfileはnpmライブラリのインストールとEntrypointをbashにしている。

色々と試したものの、FROM:nodeで落としてくるコンテナイメージだと、うまくpackege.jsonの中のscriptを起動できず力技になっている。改善したい。

2.2.2 初期記事作成

力技でローカル環境を構築したので早速新規記事を作成することにした。

まずはローカルの開発環境を構築する。

Dockerなのでdocker-compose up --buildで完了する。

次に記事を作成する。

エディタはvscodeを利用している。

vscodeの拡張機能、Dockerから、立ち上げたhugoのコンテナに対してAttach shellする。

hugoの記事を作成するためのコマンド、hugo new content/posts/hellow-hugo.mdを実行する。

これだけでテンプレートから記事が作成される。素敵。

2.2.3 Netlifyを利用したデプロイ

このブログはNetlifyを利用してデプロイをする。といっても手順は公式で公開されていて、

1. Netlifyでアカウント作成
2. 初期セットアップGUIでGithubの連携、リポジトリ(Private可)、ブランチを選択
3. GUIの流れでDeployを実行する

だけ。これだけ。まずは最初はHellowWorld的な記事だけ作ってサイト公開をするのがいいと思う。ローカル環境構築した流れでnetlify functionsやWordPressの全データ移行、hugoテーマの導入。などを色々やりすぎたせいで、netlifyでデプロイさせる時の初期設定が色々と複雑になってしまい初回のデプロイに苦労した。まずはシンプルな状態でデプロイしそこに対して少しずつ設定を追加することを強くお勧めする。