WordpressからHugoへ移行しました

これまでWordpressを使ってサイトを構築してきましたが、このたびHugoを利用したサイト運営に切り替えることにしました。

Wordpressからの移行作業とHugoの基本についてメモしておきます。

作業環境

OS Windows 10
Hugo実行ファイルディレクトリ C:\Hugo\bin
Hugo作業ファイルディレクトリ %USERPROFILE%\hugo\www

Hugo導入

インストール

Releases · spf13/hugoからhugo_0.15_windows_amd64.zipをダウンロード
zipを解凍して、hugo_0.15_windows_amd64.exeをhugo.exeにリネーム
C:\Hugo\binというフォルダを作成してhugo.exeを移動
システム環境変数のPathにC:\Hugo\binを追加

作業ファイルディレクトリ作成

コマンドプロンプトで下記コマンドを実行

cd %USERPROFILE%\hugo
hugo new site www

%USERPROFILE%/hugo/www配下に下記フォルダおよびファイルが生成される

www/
│  config.toml
│
├─archetypes/
├─content/
├─data/
├─layouts/
└─static/

WordPressの記事をHugoでビルド可能な形式へ変換

WordPressから記事をエクスポート

Wordpressのカテゴリを、そのままcontentフォルダ内に作成するサブフォルダで区分して、Section機能を利用することにしたので、カテゴリごとにXMLファイルをエクスポート。

パーマリンクのスラッグに日本語が使われていたら英数字に変更
カテゴリーやタグのスラッグに日本語が使われていたら英数字に変更
WordPress管理画面 > ツール > エクスポート
エクスポートする内容で投稿を選択 >　それぞれのカテゴリーを選択
エクスポートファイルをダウンロードを実行して、カテゴリごとにxmlファイル（***.wordpress.yyyy-mm-dd.xml）をダウンロード

Rubyインストール

Downloadsから、RubyInstallerをダウンロード。（私はRuby 2.2.4 (x64)を選択しました）
rubyinstaller-2.2.4-x64.exeを実行
インストールの途中で下記オプションにチェックを入れる

Rubyの実行ファイルへ環境変数PATHを設定する
.rbと.rbwファイルをRubyに関連づける
コマンドプロンプトでruby -vを実行して、バージョンが表示されればOK

WordPressのxmlファイルをHugoでビルド可能な形式に変換

Import XML of Wordpress to Hugoからwp-xml-hugo-import.rbをダウンロード
wp-xml-hugo-import.rbを開き、コメントを読んで、適宜自分のスタイルに変更
- path変換部分のURLを変更
- カテゴリの代わりにSectionで区分するため、category該当部分を削除
- filenameコンバート部分は、post_idの代わりにpost_nameを使うように変更
- tagを引き継ぐためのコードを追加（Tさん、ありがとう!）
下記コマンドでカテゴリ別にXMLファイルを変換して、フォルダ名をカテゴリ名に変更

ruby wp-xml-hugo-import-mono.rb ***.wordpress.yyyy-mm-dd.xml

変換後のファイルで、タイトルに”が使われていたら"に変更

変換した記事ファイルを配置

contentフォルダ配下にSectionごとのフォルダを作成して、コンバートしたファイルを配置

www/
│  config.toml
│
├─archetypes/
├─content/
│     ├─dev/
│     ├─mobile/
│     └─other/
├─data/
├─layouts/
└─static/

画像ファイルの移動

WordPressの/wp-contents/uploadsフォルダに入っている画像フォルダ（ファイル）をstatic/imgフォルダに移動

www/
│  config.toml
│
├─archetypes/
├─content/
├─data/
├─layouts/
└─static/
    └img/
       └─2016/
           └─04/
               HOGE.png

元のパス monoworks.co.jp/wp-content/uploads/2016/04/HOGE.png

変更後のパス imag/2016/04/HOGE.png

Hugo初期設定

config.tomlの記述

基本的なサイト設定を記述（必要に応じて適宜追加）

baseurl = "https://monoworks.co.jp"
languageCode = "ja-JP"
title = "Mono Works"
hasCJKLanguage = true
canonifyurls = true

hasCJKLanguage = trueは、タグなしでも、日本語のSummaryを70文字で抑えるため canonifyurls = trueは、相対パス指定を有効にするため

partialの作成

サイトのヘッダーなど部品化したいパーツをlayouts/partial配下に格納

www/
│  config.toml
│
├─archetypes/
├─content/
├─data/
├─layouts/
│   └─partial/（部品）
│           header.html
│           footer.html
└─static/

このように配置したヘッダとフッタのhtmlの内容を埋め込む場合、下記のようにhtmlを記述

{{ partial "header" . }}
    本文
{{ partial "footer" . }}

default.mdの設置（スラッグの設定）

初期状態でcontent/devフォルダにhogehoge.mdというファイルを作って、ページを生成すると、公開時URLはmonoworks.co.jp/post/dev/hogehogeとなります（最後のhogehogeがスラッグ）。

つまり、初期状態だと「記事のファイル名」＝「パーマリンクのスラッグ」となるのですが、ファイル名とスラッグが連動していると、ファイル名を変えたびにページのURLが変わってしまったり、もろもろ面倒。

そこで、archetypesフォルダ内にdefault.mdファイルを追加して、下記のようにslugやtagsをブランク指定しておき、記事作成時に手動で設定。ここで設定したslugの内容が記事公開時のスラッグとなります。

+++
slug = ""
tags = ["", ""]
draft = true
+++

このdefault.mdの内容がhugo newで新規作成されるファイルのFront matterとなるので、その他にも自分にとって必須な項目も記述しておく。なお、archetypes\default.mdを配置すると、draft = trueは自動生成されなくなるなるので、これも指定。dateとtitleは、どちらの状況でも自動生成されるので省略してます

ページの作成

カテゴリの代わりにSectionで区分するため、content\mobile配下にhogehoge.mdというファイルを作成して、monoworks.co.jp/mobile/hogehoge/というURLに表示する。このhogehoge.mdを作成するには、コマンドプロンプトで下記コマンドを実行。

cd %USERPROFILE%\hugo\www （ブログのルートフォルダに移動）
hugo new mobile\hogehoge.md

これで、content\mobile\hogehoge.mdが生成される。hogehoge.mdの内容は以下のとおり。項目の並び順はABC順になるようです。

+++
date = "2016-08-03T18:03:38+09:00"
draft = true
slug = ""
tags = ["", ""]
title = "hogehoge"

+++

slugとtagsを手動で入力。titleは、自動でファイル名が入っているので、本来のタイトルに変更。文字列は基本的に何でもOKだけど、クォーテーション「"」などは「"」と記述

テーマ

公開されているテーマを試してみるには、Hugo Themes Siteを参照して、GitHub - spf13/hugoThemes: All Themes Hugo等で公開されているテーマファイルをthemes/配下にgit cloneして、hugo起動時に-t="テーマ名"オプションで、試してみたいテーマを指定。

全テーマを試してみたい場合は、下記コマンド（全テーマファイルで675MBでした）

git clone --recursive https://github.com/spf13/hugoThemes.git themes

うちのサイトは、（借り物CSSなどありますが）一からテーマを作ってみました。今後、少しずつ手を入れていく予定

ローカル環境でAndroid端末からサイトの確認

ローカルのWiFi環境で、iOS端末やAndroid端末でのコンテンツ表示確認をおこないたい場合、下記のようなオプションを付けてHugoを起動

hugo server -b="192.168.x.x" --bind="192.168.x.x" -D -w

これでモバイル端末から192.168.x.x:1313でサイトの確認ができるようになります。オプションの詳細は、hugo server --helpで確認

（2016-10-29追記：こちらの記事で書きましたが、baseURLの指定はhttp://を付けるのが正しいみたいです。）

Flags:
      --appendPort[=true]: append port to baseurl
      --bind="127.0.0.1": interface to which the server will bind
      --disableLiveReload[=false]: watch without enabling live browser reload on rebuild
      --meminterval=100: interval to poll memory usage (requires --memstats)
      --memstats="": log memory usage to this file
      --noTimes[=false]: Don't sync modification time of files
  -p, --port=1313: port on which the server will listen
      --renderToDisk[=false]: render to Destination path (default is render to memory & serve from there)
  -w, --watch[=true]: watch filesystem for changes and recreate as needed

Global Flags:
  -b, --baseURL="": hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts[=false]: include content marked as draft
  -F, --buildFuture[=false]: include content with publishdate in the future
      --cacheDir="": filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --canonifyURLs[=false]: if true, all relative URLs will be canonicalized using baseURL
      --config="": config file (default is path/config.yaml|json|toml)
  -d, --destination="": filesystem path to write files to
      --disableRSS[=false]: Do not build RSS files
      --disableSitemap[=false]: Do not build Sitemap file
      --editor="": edit new content with this editor, if provided
      --ignoreCache[=false]: Ignores the cache directory for reading but still writes to it
      --log[=false]: Enable Logging
      --logFile="": Log File path (if set, logging enabled automatically)
      --pluralizeListTitles[=true]: Pluralize titles in lists using inflect
      --preserveTaxonomyNames[=false]: Preserve taxonomy names as written ("Gérard Depardieu" vs "gerard-depardieu")
  -s, --source="": filesystem path to read files relative from
      --stepAnalysis[=false]: display memory and timing of different steps of the program
  -t, --theme="": theme to use (located in /themes/THEMENAME/)
      --uglyURLs[=false]: if true, use /filename.html instead of /filename/
  -v, --verbose[=false]: verbose output
      --verboseLog[=false]: verbose logging

サイト生成してみる

コマンドプロンプトで下記コマンドを実行。

cd %USERPROFILE%\hugo\www （ブログのルートフォルダに移動）
hugo

実行後、publicフォルダ配下に実環境にアップするファイル群が生成されます

www/
│  config.toml
│
├─archetypes/
├─content/
├─data/
├─layouts/
├─public/
│         この中に生成されたファイル群をサイトにアップロード
│
└─static/

とりあえず、レンタルサーバーのしかるべき場所と同期させて、別途イメージファイルなどもアップして、おしまい

Mono Works

チラシのすきま