ブログをWordPressからHugo & GitLabに引っ越しする手順

May 23, 2021

このブログはこれまで WordPress で運用してきたのですが、今回、Hugo に乗り換えることにしました！

この記事は Hugo に乗り換えて初めて投稿する記事です！

皆さんがこの記事を読んでいるということは、無事に 引っ越しが完了したということですね！よかった！

移行前環境・移行後環境 #

• 移行前：Conoha WING（レンタルサーバ）にて、WordPress で運用。
• 移行後：GitLab にて、Hugo で運用。

Hugo とは #

Hugo は、Go で記述された静的サイトジェネレーター（英語版）である。

_Hugo (ソフトウェア) - Wikipedia_

…です！

なぜ GitLab か？ #

静的ウェブサイトのホスティング場所は色々あると思います。

Amazon S3 だったり、Cloud Storage だったり、Firebase Hosting だったり、Netlify だったり、Vercel だったり、Heroku だったり、あとは GitHub Pages だったり。

ではなぜ今回 GitLab を選んだか、それは帯域幅制限（転送容量制限）がないからです！

最初は GitHub Pages でのホスティングで考えていました。ただし、GitHub Pages では、ひと月あたり 100GB または 100,000 リクエストまでという帯域制限があり、そこがネックでした。

GitLab なら帯域制限がないのです！これはすごい！

（このブログの閲覧数なら GitHub Pages の帯域制限の１割も使い切らないだろ、と思った方、黙っていてください。）

移行手順 #

1. Hugo への移植編 #

では、ざっくりと移行手順を書いていきます。

1-1. WordPress からデータをエクスポートする。 #

Hugo 公式も紹介しているツールがありますので、それを使いましょう。

https://gohugo.io/tools/migrations/#wordpress

上記ページの中の、「wordpress-to-hugo-exporter」というものを使用します。

https://github.com/SchumacherFM/wordpress-to-hugo-exporter

上記、wordpress-to-hugo-exporter の GitHub から zip 形式でダウンロードします（「Downlaod ZIP」）。

その後、WordPress の「プラグインをアップロード」から、上記 zip をアップロードしてインストール・プラグインを有効化します。

サイドバーのツールから「Export to Hugo」を押下し、しばらく待っていると「hugo-export.zip」のダウンロードダイアログが表示されるので、ダウンロードすれば抽出完了です。

ダウンロードした中身の説明

• /posts → 記事のマークダウンファイル群
• /wp-content/uploads → 画像ファイル群
• config.yaml → メタデータなどの設定ファイル
• それ以外のディレクトリ → 固定ページのファイル群

1-2. Hugo をインストール、サイトを新規作成する。 #

私は Mac を使っていますので、Hobebrew でインストールしました。ターミナルで以下を実行します。

brew install hugo

適当なディレクトリを作成して、その中で Hugo のサイトを新規作成します。

mkdir hugo-project
cd hugo-project
hugo new site .

1-3. Hugo で作成するサイトのテーマを決める。 #

CSS を自分でゴリゴリ書いても良いですが、普通は何かしらのテーマを使うと思います。ここら辺は WordPress と同じ感覚です。ということでテーマを選びましょう。

Hugo で使えるテーマは下記にすべてまとまっています。

https://themes.gohugo.io/

テーマのチョイスは時間がかかるところですよね。

私は「timeline」というテーマを使わせていただくことにしました。

https://themes.gohugo.io/hugo-theme-timeline/

https://github.com/s4n7h0/hugo-theme-timeline

チョイスしたテーマの GitHub を、Hugo の theme ディレクトリ内へクローンします。

git clone https://github.com/s4n7h0/hugo-theme-timeline.git themes/timeline

テーマを適用するために Hugo の config.toml を編集します。

他のテーマでもそうだと思いますが、サンプル例を用意してくれている場合は、とりあえずそれをコピペしましょう。

https://github.com/s4n7h0/hugo-theme-timeline/blob/main/exampleSite/config.toml

1-4. 記事と画像を移植する。 #

WordPress からエクスポートしたデータを Hugo に移植します。

• WordPress の config.yaml の内容を適宜 Hugo の config.toml に移します。
• 記事ファイル群である WordPress の /posts を Hugo の /content 配下に移動します。
• 画像ファイル群である WordPress の /uploads の中身を Hugo の /static/images 配下に移動（image ディレクトリは新規作成します）。
• WordPress の固定ページのファイルがあれば、Hugo の /content 配下に移動します。

/about という固定ページがあったとして、上記作業を行った後のディレクトリ構成は以下の通りです。他にもディレクトリはあるかと思いますが、触ったもののみを記載しています。

hugo-project
├─ content
│  ├─ posts
│  │  └─ 投稿記事のファイルたち
│  └─ about
│     └─ index.md
├─ static
│  └─ images
│     └─ 画像ファイルたち
├─ theme
│  └─ ダウンロードしたテーマ
└─ config.toml

ディレクトリ構造や、posts や images というディレクトリ名は自由なのですが、だいたい上記の構造・名称が使われているはずです。

ここで Hugo を起動してみましょう。以下で http://localhost:1313 に立ち上がります。

hugo server

1-5. 各記事中の画像のパスを変更する。 #

WordPress のパスになってしまっていると思うので、手作業で頑張って変更します。

1-6. 各記事のメタタグ（Front Matter）を整理する。 #

WordPress から出力しただけの状態でも問題ないとは思いますが、お好みでよしなに。

https://gohugo.io/content-management/front-matter/

1-7. 記事中のタグを変更する。 #

HTML タグ形式の部分があればマークダウン形式へ。

表示がくずれていなければ実施しなくても大丈夫ですが、せっかくならば過去記事もマークダウンで書き直したい、という人は頑張りましょう。

2. GitLab への移植編 #

2-1. GitLab で新規プロジェクト（リポジトリ）を作成 #

（もしアカウントがなければ）GitLab でアカウントを作成します。

Hugo ブログ用のプロジェクト（GitHub でいうリポジトリ）を作成します。

プロジェクト名の決め方によって GitLab Pages の URL が異なることに留意しましょう。

• 公式ドキュメント：GitLab Pages domain names, URLs, and base URLs

• 日本語ドキュメント：GitLab のユーザー名・グループ名を決める際の注意点

• GitLab に作成したプロジェクトの名前 → ウェブサイトの URL

• {ユーザー名}.gitlab.io → http(s)://{ユーザー名}.gitlab.io

• {プロジェクト名} → http(s)://{ユーザー名}.gitlab.io/{プロジェクト名}

今回は {ユーザー名}.gitlab.io でプロジェクトを作成しました。

また、GitLab CI を使用するためにはクレジットカードの登録が必要なため、登録を済ませておきましょう（カードの登録は必要ながら、GitLab や GitLab CI 自体は無料で利用可能です）。

作成したリモートリポジトリを Hugo に設定します。

git remote add origin [email protected]:{ユーザー名}/{ユーザー名}.gitlab.io.git

2-2. GitLab CI の設定ファイルを作成 #

GitLab にプッシュすると、自動でビルドしてくれます。そのための設定ファイルを作成しましょう。

Hugo ディレクトリ直下に .gitlab-ci.yml を作成します。

touch .gitlab-ci.yml

その内容に以下を記載しましょう。

image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
    - hugo
  artifacts:
    paths:
      - public
  only:
    - main

参考：https://gohugo.io/hosting-and-deployment/hosting-on-gitlab/

2-3. GitLab にプッシュ & サイト公開 #

ここまで終えた段階で GitLab にプッシュすると、GitLab 上で静的サイトがビルドされ、以下の URL に公開されます。

https://{ユーザー名}.gitlab.io/

2-4. 独自ドメインの設定 #

以下の通りに実施します。

• Custom domains and SSL/TLS Certificates

GitLab の当該プロジェクトページから、 Settings > Pages > New Domain からドメインを追加。今回はルート（ネイキッド）ドメインを使用することにします。（例：example.com）

その後、DNS を以下のように設定します。

From                                        | DNS Record | To
------------------------------------------- | ---------- | ---------------------------------------------------------------
example.com                                 | A          | 35.185.44.232
_gitlab-pages-verification-code.example.com | TXT        | gitlab-pages-verification-code=00112233445566778899aabbccddeeff

＊To の gitlab-pages-verification-code 以降の値はドメインによって変わります。

DNS の設定が終わったら、 GitLab の Verification status を確認します。

「Unverified」になっていたら、その隣の Retry verification ボタンを推し、「Verified」に変わることを確認しましょう。

これで、https://<設定した独自ドメイン> でサイトにアクセスできるようになります。（アクセスできるようになるまで 10 分ほど時間がかかりますので、気長にお待ちください。）

2-5. 公開範囲変更 #

デフォルトだと、GitLab Pages は GitLab にログインしているユーザに対してのみ公開されます。（GitLab 非ログイン状態でアクセスすると、GitLab ログインページにリダイレクトされる。）

GitLab にログインしていない状態でも閲覧できるように設定を変更します。

プロジェクトのページから、 Settings > General > Visibility, project features, permissions を開きます。

その中にある Pages > With GitLab Pages you can host your static websites on GitLab. を見つけてください。

この欄を以下の通りに変更します。

• 変更前：Only Project Members
• 変更後：Everyone

以上 #

これで Hugo へのお引っ越しは完了です！これからも本ブログをよろしくお願いします！