Hugoのブログサイトをローカルに構築し、WordPressからブログ記事を移行する手順について書いていきます。
GitHubのHugo公式リポジトリのリリースページから、ZIPファイルをダウンロードします。Windowsの場合、windows-amd64.zip
かwindows-arm64.zip
の対応CPUのものを選択します。
Hugoのフォルダは今回はC:\Hugo\bin
とします。ZIPファイルを解凍し、hugo.exe
をbinフォルダに配置します。
続いて、環境変数のパスを通します。Windowsの設定から、「システム」→左側一番下の「詳細情報」→右側の「システムの詳細設定」→一番下の「環境変数」を開きます。そこから、「ユーザーの環境変数」→「Path」を編集し、C:\Hugo\bin
を設定します。
コマンドプロンプトでhugo help
を実行し、ヘルプ一覧が表示されたらインストール完了です。
なお、Hugoのバージョンアップデートについては、新しいバージョンのZIPファイルをダウンロードし、C:\Hugo\bin
に配置したhugo.exe
を新しい物へ差し替えればOKです。
C:\Hugo
内にブログ用のフォルダを作成して初期サイトを構築します。サイトはGitHubで管理するので、Gitリポジトリの初期化もしておきます。
1$ cd C:\Hugo\
2$ hugo new site <サイト名>
3$ cd C:\Hugo\<サイト名>
4$ git init
サイト名を自分の好きな名前に変えて下さい。
続いてテーマを導入します。Hugoには豊富なテーマプラグインがありますが、当サイトではシンプルかつ今までのブログのスタイルに近かったMainroadを採用しました。
今回はGitのサブモジュールとして追加します。
1$ git submodule add https://github.com/vimux/mainroad themes/mainroad
hugo.toml
の設定ファイルの記述を追加してMainroadテーマを有効にします。
1theme = "mainroad"
ローカルでサイトを確認したい場合はserverコマンド
を実行し、http://localhost:1313/
でサイトプレビューを確認できます。
1$ hugo server -D # draft:trueの下書き記事も表示する
また、新規記事の作成についてはnewコマンド
で行います。
1$ hugo new test.md # 新規記事を作成する
Hugoの設定はhugo.toml
(古いバージョンだとconfig.toml
)で設定します。参考までに、以下が基本的な設定項目になります。
1baseURL = "<サイトURL>"
2title = "<サイトタイトル>"
3DefaultContentLanguage = "ja"
4languageCode = "ja-JP"
5theme = "mainroad"
6hasCJKLanguage = true
7summarylength = 120
8enableGitInfo = "true" # 最終更新日をgitから取得
9timeout = "60s"
10
11[services.googleAnalytics]
12 ID = "G-XXXXXXXXXX" # アナリティクスのトラッキングID
13
14[permalinks]
15 post = "/:contentbasename/"
16
17[Params]
18 Subtitle = "<サイトサブタイトル>"
19 description = "<サイト説明文>"
20 post_meta = ["date", "categories"]
21 highlightColor = "#0095d9"
22 dateformat = "2006-01-02"
23 customCSS = ["/css/custom.css"]
24 toc = true
25[Params.sidebar]
26 home = "right"
27 list = "right"
28 single = "right"
29 widgets = ["categories", "taglist", "recent", "archives", "social"]
30
31[Params.widgets]
32 recent_num = 5
33 categories_counter = true
34 tags_counter = true
35
36[taxonomies]
37 tag = "tags"
38 category = "categories"
39 archive = "archives"
40
41[related]
42 includeNewer = true
43[[related.indices]]
44 name = "tags"
45 weight = 80
46[[related.indices]]
47 name = "categories"
48 weight = 60
49
50[[Menus.main]]
51 Name = "当サイトについて"
52 URL = "/about"
53 weight = 10
54[[Menus.main]]
55 Name = "プロフィール"
56 URL = "/profile"
57 weight = 20
58[[Menus.footer]]
59 Name = "プライバシーポリシー"
60 URL = "/privacy-policy"
61
62[markup.goldmark.renderer]
63 unsafe = true
記事のデータ移行にはwordpress-to-hugo-exporterというWordPressプラグインがあるので、それが使えれば簡単に移行ができると思います。
GitHubの「Download ZIP」からダウンロードし、ZIPファイルをWordpressのプラグインページからアップロードすることで、WordPressのツールからエクスポートが可能になります。
当サイトの場合は「Export to Hugo」のエクスポートのZIPファイルが、何故かエラーで何回やってもダウンロード出来なかったので、手動でコピペして記事を移しました…。
移行作業としては記事内容のコピペが主で、それをマークダウン形式に書き換える作業が殆どでした。
今回は、ローカルでブログを構築する所まで紹介しました。また、Dockerで環境構築をする方法についても、別の記事にまとめていますので参考にしてみてください。
以上で記事を終わりにします。