WordPressだと、記事を書くためにサイトに行かないといけないのがわずらわしくて、Hugoに移行した。 同様のものとしてJekyllがあるが、Jekyllはサイト生成が遅いらしく、Hugoに移行している例があったのでHugoにした。

仕組みとしてはMarkdownで記事を書いた後、hugoのコマンドでHTMLに変換後はGitHub Pagesなどにpushする。

Quickstart

とりあえずここを読んで感覚をつかむ。

Wordpressからの移行

変換

SchumacherFM/wordpress-to-hugo-exporterを使うとhugoの形式に変換してくれる。

リダイレクト

Wordpressからはてなブログへの移行 - リダイレクトの設定 「Redirection」プラグインの設定 - ほるひーとの日記を参考にして、リダイレクトの設定をする。 正規表現で以下のようにした。

/blog/([^/]+)/([^/]+)/(.*).html$

https://tmsanrinsha.net/post/\1/\2/\3

code部分の変更

[...]
:
[/...]

:%s/\[\(.*\)\]\n\s*\(\_.\{-}\)\s*\n\[\/\1\]/```\1\2```/gc

:%s/\[\(.*\)\]\s*\(\_.\{-}\)\[\/\1\]/\="```" . submatch(1) . "\r" . substitute(submatch(2), '\s\+\n', '', 'g') . "\r```"/g

で変更する

[...]...[/...]

:%[email protected]\v\[(.*)\]\s*(.{-})\s*\[/\1\]@`\2`@gc

GitHub Pages

Mardownなどのサイト作成に必要な部分はPrivateリポジトリで管理して、作成されたサイトのコードをGitHub Pagesで公開する。PrivateリポジトリでもGitHub Pagesはpublic。

具体的にはdocsというディレクトリ以下にファイルを置くとGitHub Pagesで公開できる設定があるのでそれを使う。以下参照。

Hugoで作成するとpublicディレクトリにサイトのコードが吐かれる。このディレクトリをdocsに変更するオプションはないっぽいので、publicをdocsのシンボリックリンクにすることにする。

$ ln -s public docs

逆にするとGitHub Pagesが出来ないので注意。

独自ドメインを設定する

ドメインの取得

お名前.comでドメインを取得した。【保存版】お名前.comは使うな!ドメインを取得する時はWhois情報公開に注意!気をつけることまとめとxyzドメインのSEO効果 | ため雑!によると、whois登録代行したほうがよいらしい。チェックを忘れずに。

GitHubのSettingsでCustom domainを取得した「tmsanrinsha.net」に変更した。

HTTPSにせずに独自ドメインを使ってみる

GitHub Pagesで静的なサイトを公開し、独自ドメインを設定する - Qiitaを参考にして設定する。

Setting up an apex domain - User DocumentationではCNAMEを推奨しているが、トップドメインに対してやる場合は、CNAMEを指定できないので、Aレコードでやる。

HTTPS化する

Custom domainを使うと、httpになってしまうのでCloudFlareでHTTPSにする。

FreeだとCloudFlare-GitHub間は平文(GitHub Pages Now (Sorta) Supports HTTPS, So Use It)。

CloudflareでブログをHTTPS化 | To Be Decidedを参考にして行った。 ただし、Aレコードで設定した。

DISQUS

DISQUSをHugoで使う · MM2E

MathJax

設定は、使いたいエントリーで以下を書くか、すべてのページで読み込むようにフッターの設定を変更する。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [['$','$'], ["\\(","\\)"]],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
});
</script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

_がmarkdownの斜体に使われて、数式がうまく表示されない時がある。\_をエスケープすればよいが、_が多くエスケープが面倒な場合は以下のようにする。

ディスプレイ数式モードの場合は全体を<div>で囲む。

<div>
$$ ... $$
</div>

インライン数式はMathJax with HugoのSolutionに書いてあるように`で囲む。 そしてスタイルがわからないように<code>のclassをJSで追加して、cssの設定をする。

ディスプレイ数式モードで複数行の式を書く。

<div>
$$\begin{align}
1 &= (x-1)(x-2) \\
  &= x^2 - 3x + 2
\end{align}$$
</div>
$$\begin{align} 1 &= (x-1)(x-2) \\ &= x^2 - 3x + 2 \end{align}$$

Accelerated Mobile Pages

dim0627/hugo_theme_robustはAMPに対応している。Google AdSenseについてはAMP 広告ユニットを作成する - AdSense ヘルプ参照。

output

異なるフォーマットで出力できる。