Mac でブログの作成方法を Octopress から Hugo へ移行しました。その過程について自分向けに記しておきます。

元々は GitHub Pages の機能を用いてブログを公開する方法に便乗していました。その代表的な手段として Octopress があったのですが、Octopress がアップデートされないことに伴い Ruby の version がデッドロックに入り、Hugo 移行を決意しました。

主にこちらのページを参考にしました：

筆者の環境は：

Mac OS X Catalina 10.15.7

です。

初期設定

まずは Hugo を入れなくていはなりません。

$ brew install hugo

筆者は Homebrew でしたので、これで。（今後も $ と書いた場合はターミナルです。）
そこから、最初のセットアップに入ります：

$ hugo new site <ブログ名>
$ cd <ブログ名>
$ git init

テーマ

Hugo はテーマを入れないと動きません。 Hugo Theme Gallery から選べます。各テーマの説明を見てインストールしてみてください。

筆者はせっかくこれまで Octopress を使っていたので、 “Octopress Hugo” というものを使用し、同じデザインで戻って参りました。

https://themes.gohugo.io/hugo-octopress/

このページです。↑筆者自身へ：常にここに帰ってください。

記事をコピー

Octopress で markdown で書いていた記事を、URL そのままに全部移したいわけです。ターミナルで：

$ cp <octopressディレクトリ>/source/_posts/* <hugoディレクトリ>/content/post/
$ cp -r <octopressディレクトリ>/source/images/ <hugoディレクトリ>/static/images

これを打つと、markdownファイルと画像ファイルを移せます。（<hugoディレクトリ> は上の <ブログ名> と同じディレクトリです。）デフォルトでは <hugoディレクトリ>/static/images というディレクトリがなかったので、適宜手動で作ってください。

文字列置換

Octopress と Hugo では markdown 文法の書き方が微妙に違います。例えばOctopressでは見出しは ## でしたが、Hugo では ##　にしないといけないため、こうした置換を一斉に行います。

しかし、Mac の sed コマンドでだいぶ苦戦しました。最初は指示に従って：

 $ find . -type f -exec sed -i "" -e 's/## /##  /g' {} \;

と入れたのですが、エラーが置きました。どうやら、 -type f だと .DS_Store ファイルも含めてしまうため、

sed: -i may not be used with stdin
sed: RE error: illegal byte sequence

といったエラーを吐くようです。そのため -type f ではなく、 -name で .markdown 形式のファイルを一括指定しました。

 $ find . -name \*.markdown -exec sed -i "" -e 's/## /##  /g' {} \;

「もっとよむ」でお馴染みの more タグを入れている方はこちらも：

 $ find . -name \*.markdown -exec sed -i "" -e 's/<!-- more -->/<!--more-->/g' {} \;

Hugo はタイムスタンプの形式に指定がある（Hugoでは 2016-09-25T15:09:57 のような形式のタイムスタンプでないとダメ）ので、こちらを適用↓

 $ find . -name \*.markdown -exec sed -i "" -e 's/date: \([0-9]\{4\}-[0-9]\{2\}-[0-9]\{2\}\) \([0-9]\{2\}:[0-9]\{2\}\)$/date: \1T\2:00+09:00/g' {} \;

特に $ sed コマンドは、どうやら Mac のみの特殊仕様もいろいろ有るみたいなので、凄く注意して下さい。ブログ文章ファイルはバックアップを取っておきましょう。

パーマリンク

これは皆さんに当てはまるか分かりませんが、筆者は移行にあたって少し不便な要素がありました。基本的に Octopressでは <ブログ名>.github.io./blog/YYYY/MM/DD/ というURLになるようにセットしていました。Octopress の _comfig.yml で

permalink: /blog/:year/:month/:day/:title/

と入れていました。

これは Hugo では config.toml にて

[permalinks]
  post = "/blog/:year/:month/:day/"

と書いておけば継承できます。

しかし、Hugo に移行するにあたり、私のブログに不都合がありました。URL を維持するために、

私のブログには、いくつかURLが （同上）/YYYY/MM/DD/title とか （同上）/YYYY/MM/DD/Ch1 とかで終わるページがある。
Hugo でパーマリンクに /:slug/ を末尾に入れれば（ post = "/blog/:year/:month/:day/:slug/"）にすれば解決すると見せかけて、:/slug は他の記事にも自動で勝手にタイトルをURLに入れてしまうため面倒

という問題があったので、:slug は入れずに、例外的なブログ記事だけ、markdownファイル冒頭のヘッダー（title: "ほげほげ"などがある段落）に、

url: "blog/2013/12/23/title/"

のようにパーマリンクを書き、手動で設定しました。

Twitter Card (OGP)

Twitter や social media で、URLつきで投稿した場合にプレビューみたいなサムネイルを表示してくれるもの：これが OGP です。Hugo-Octopress では “Twitter Card” という名称でこれを与えています。

Hugo-Octopress 公式指示

この設定をしておくべきです。まずは config.toml　に以下を加えます。

[params]
  # Twitter card config
  # Enable.
  twitterCardEnabled = true
  # Don't include the @.
  # twitterCardSite = 
  twitterCardDomain = "parsiya.net"
  # Don't include the @.
  twitterCardAuthor = "CryptoGangsta"

ただ、これだけだと画像のURL指定が変になっているので、マニュアルにあった処理をします。 your-website/themes/Hugo-Octopress/layouts/partials/custom_twitter_card.html ファイルを your-website/layouts/partials/custom-twitter-card.html にコピペします。で、

<meta name="twitter:image:src"

ではじまる行がサムネイル(Twitter Card)を司っているので、ここを

<meta name="twitter:image:src" content="https://ayuha167.github.io/images/Hugo/TwitterCard.jpg/>

に書き換えます。これをしておけば、後は markdownページのヘッダーに

twitterImage: true

の項目を追加するだけでOGP（Twitter Card）が自動生成されます。

ツイートボタン

このページにもついている、読者に押して頂く「ツイートする」ボタンのことです。addThis という外部サービスを使いました。

これらをご参考に：

まずは AddThis 公式サイトに行き、アカウント作成します。Google アカウントでいけます。右上の “Profile Settings” から自分の ID が見られるので、ra-XXXXXXXXXXXXXX 的な番号を控えておきましょう。

続いてはローカルでの Hugo ディレクトリで作業です。 AddThis はおそらく、選んだテーマによって操作するディレクトリが変わります。筆者は themes/Hugo-Octopress/ の中で操作しました。
例えば公式マニュアル指示では /partials/ の中に addthis.html を作れとのことですが、私の場合は themes/Hugo-Octopress/layouts/partials の中に追加しました。

いずれにせよ /partials に作った各ファイルの内訳は以下です：

addthis.html

<div class="addthis_inline_share_toolbox"></div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{- .Site.Params.addThis -}}" async></script>
<script type="text/javascript">
    var addthis_config = addthis_config||{};
    addthis_config.data_track_addressbar = false;
    addthis_config.data_track_clickback = false;
</script>

addthis-script.html

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{- .Site.Params.addThis -}}" async></script>

で、これを紐付けるために、 config.toml に自分の addThis ID を入力します。

[params]
    addThis = "ra-XXXXXXXXXXXXXXX"

これで準備完了です。あとは HTML でこのボタンは生成できますので、筆者は themes/Hugo-Octopress/layouts/partials/post_footer.html の中に：

<body>
{{ partial "addthis" . }}
{{ partial "addthis-script" . }}
</body>

この文を書き加えたら起動しました。

Table of Content

目次（Table of Content）を自動生成出来ます。markdown の文中で：

｛｛< toc >｝｝

と記入するだけで目次（ToC）が生成出来るようになりました。結果は以下：

もしくは、markdown のヘッダーで toc: true と記入すれば自動で最初に目次が発生します。

…と、ここまでで下準備は終了です。

新記事を投稿

ブログ記事、つまり markdown の新しいページを作成したい場合は、このコマンドでいけます：

 $ hugo new blog

厳密にタイトルを指定したい場合は、

 $ hugo new post/title.markdown

プレビュー

出来たページを確認したい場合は、

$ hugo server -D

で、ブラウザで localhost:1313 へ行けば確認できます。

移行

遂に移行の刻です。

Hugo ディレクトリで GitHub の初期設定が必要です。ここを参考にしました：

https://prog-8.com/docs/git-env

筆者はそこまで GitHub が得意ではないので、手動でやりました。例えば、元の Octopress でのリポジトリが ayuha167.github.io だったので、GitHub の Settings からテキトーに違う名前にして空けました（ayuha1919.github.io など）。リポジトリで Rename を押せばいけます。実質削除です。

その後、GitHub で “New Repository” を作成。こちらの名前（Repository Name）を ayuha167.github.io にします。（つまり筆者の場合、上の <ブログ名> の部分が ayuha167 にあたります。）

あとは、ここまで作ってきたローカルの <ブログ名> ディレクトリにあるファイルを Push します。このページを参考にpushしました↓

https://qiita.com/satzz/items/e24bd703fc04fb45f7ef

ターミナルにて、

$ cd <ブログ名>
$ git clone <GitHubリポジトリのアドレス>

をします。<GitHubリポジトリのアドレス> は GitHub で「↓Code」ボタンから現れます。たいてい <ユーザー名>/<ブログ名>.github.io のはずです。
上のコマンドを実行すると、<ブログ名>.github.io という空のディレクトリが生成されます。

$ hugo コマンドを使うと、Hugo が作ってくれたページが /public ディレクトリ以下に生成されます。そのため /pubglic 以下をリポジトリの gh-pages ブランチへ push します。ブランチを用意するところまでは：

$ hugo 
$ cd public
$ git init
$ git remote add origin git@github.com:ayuha167/ayuha167.github.io
$ git checkout -b gh-pages

これで準備完了です。このあと、実際に push するには、

$ git add --all
$ git commit -m 'release `date '+%Y-%m-%d %H:%M’`'
$ git push origin gh-pages

です。これでページが公開されたはずです。

せっかちな人は index.html （私の場合は https://ayuha167.github.io/index.html ）にアクセスすると、すぐにチェック出来ます。

備忘録

筆者へ。

新ポストを送るには、ブログのディレクトリ（/ayuha167）に入ってから、

$ hugo
$ cd public
$ git add --all
$ git commit -m'コメント'
$ git push origin gh-pages

を打たなければなりません。これが面倒なので、ブログのディレクトリに push.sh というシェルコマンドファイルを作りました。以下です：

push.sh

#!/bin/sh

hugo

cd public
git add --all
git commit -m'push from push.sh'
git push origin gh-pages 

cd ..

そのため、内容をアップデートしましたら、ブログのディレクトリ直下で、

$ sh push.sh

とやるだけでアップデート出来ます。

エラーチェックをするだけなら $ hugo や $ hugo server -D でも可です。

備忘録：埋め込み

Hugo の埋め込みは特殊です。iframe がそのままでは使えません。例えば YouTube は：

｛｛< youtube 12vAUFA8O2E >｝｝

となります。結果は以下：

これは、Shortcode と呼ばれる方式です。 /layouts/shortcodes/shortcode名.html というファイルを置くことで、markdown 中でも iframe を有効化出来ます。

こちらの記事を参考に。

例えば Google Drive のファイル埋め込みを有効化する場合、/layouts/shortcodes/googledrive.html というファイルを作成し、中身は：

<div class="embed google-drive">
	<iframe src="https://drive.google.com/file/d/{{ index .Params 0}}/preview" width="640" height="360" allow="autoplay">
	</iframe>
</div>

とします。すると、記事内で：

{{＜ googledrive 固有コード ＞}}

と打てば、 https://drive.google.com/file/d/固有コード/preview だったモノが埋め込まれます。このように、iframe が向こうでも自分で Shortcode を作って実用させられます。

恋心は超グリーディ

普段質問されることを文章起こした場所です。ライブ配信やゲームイベントにまつわるものです。もしくは、たまに筆者の趣味の文章が交じります。

Octopress から Hugo へ移行