【Hugo】ローカルにサイト(Mainroadテーマ)を構築する【サイト構築①】

【Hugo】ローカルにサイト(Mainroadテーマ)を構築する【サイト構築①】

Hugoのブログサイトをローカルに構築し、WordPressからブログ記事を移行する手順について書いていきます。

Hugoのセットアップ

GitHubのHugo公式リポジトリのリリースページから、ZIPファイルをダウンロードします。Windowsの場合、windows-amd64.zipwindows-arm64.zipの対応CPUのものを選択します。

Hugoのフォルダは今回はC:\Hugo\binとします。ZIPファイルを解凍し、hugo.exeをbinフォルダに配置します。

続いて、環境変数のパスを通します。Windowsの設定から、「システム」→左側一番下の「詳細情報」→右側の「システムの詳細設定」→一番下の「環境変数」を開きます。そこから、「ユーザーの環境変数」→「Path」を編集し、C:\Hugo\binを設定します。

Hugoの環境変数

Hugoの環境変数

コマンドプロンプトで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テーマを有効にします。

hugo.toml
1theme = "mainroad"

ローカルでサイトを確認したい場合はserverコマンドを実行し、http://localhost:1313/でサイトプレビューを確認できます。

ターミナル
1$ hugo server -D # draft:trueの下書き記事も表示する

また、新規記事の作成についてはnewコマンドで行います。

ターミナル
1$ hugo new test.md # 新規記事を作成する

Hugoの設定

Hugoの設定はhugo.toml(古いバージョンだとconfig.toml)で設定します。参考までに、以下が基本的な設定項目になります。

hugo.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で環境構築をする方法についても、別の記事にまとめていますので参考にしてみてください。

以上で記事を終わりにします。

参考文献