Hugo+GitHub Pagesでblog作成

August 10, 2018 BLOG 　~ 8 minute read ~

Page content

Blogをはじめた

自分が勉強していることをoutputとしてblogにまとめることにした．このblogはHugoというGoで作られた静的サイトジェネレータを使って作成した．

Hugoについて

HugoはGo製で速いらしい．最初，JekyllというRuby製の静的サイトジェネレータを利用しようと思ったが記事数が多くなると重くなるというのを見てHugoにした．また，HugoもJekyllも記事をmarkdownで書けるのでとても楽．数式も設定すれば書けるので便利．

Giraffe AcademyというYouTubeチャンネルの解説がわかりやすくそれを参考に作成した．

Giraffe AcademyのHugo解説 playlist

テーマはmainroadを利用している．

数式を表示

また，数式を書くために以下のサイトを参考に数式表示できるようにした．

Hugoで数式を導入します | しさく

layout/partials/mathjax_support.htmlというファイルを作って以下のコードを書いて数式をレンダリングできるようにした．

 1<!-- tex -->
 2<script type="text/x-mathjax-config">
 3  MathJax.Hub.Config({
 4      tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] }
 5  });
 6</script>
 7<script
 8    type="text/javascript"
 9    src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" />
10</script>

数式表示は例えばこんな感じ $$ \sum_{i=0}^N a_i $$

上記の設定だと\sumが2回続くつまり，\sum_{a=0}^A \sum_{b=0}^Bとしたりしたらうまく表示できない．これは，\prodや \intなどでも起こる．
\sum_{}の_(アンダースコア)の前に\(バックスラッシュ又は¥)を入れれば表示される．

また，ベクトルのための太字は\boldsymbol{}を使う．

$v_i, a_i, x_i$(通常)
$\boldsymbol{v}_i, \boldsymbol{a}_i, \boldsymbol{x}_i$ (太字)

Atomでmarkdownのプレビューが出来るようにと思って上記の設定をしたが結局_を入れないといけないならKaTeXを使ったほうが良いかも?
KaTeXならshortcodeを使ったり数式があるときだけjsファイルを読み込んだりするから良いかもしれない，localhostでプレビューする必要があるけど．．．

式番号の表示

式番号を自動で入れる場合には以下をlayouts/partials/mathjax_support.htmlに書く．

1MathJax.Hub.Config({
2  // Autonumbering by mathjax
3  TeX: { equationNumbers: { autoNumber: "AMS" } }
4});

そしてlayouts/partials/footer.htmlに以下を書く．

1{{- partial "mathjax_support.html" . -}}

書いたあとのlayouts/partials/mathjax_support.html．

 1{{ if and .IsPage (eq (.Param "mathjax") true) }}
 2<script type="text/x-mathjax-config">
 3MathJax.Hub.Config({
 4  tex2jax: {
 5    inlineMath: [['$','$'], ['\\(','\\)']],
 6    displayMath: [['$$','$$'], ['\[','\]']],
 7    processEscapes: true,
 8    processEnvironments: true,
 9    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code'],
10    TeX: { equationNumbers: { autoNumber: "AMS" },
11         extensions: ["AMSmath.js", "AMSsymbols.js"] }
12  }
13});
14
15MathJax.Hub.Config({
16  // Autonumbering by mathjax
17  TeX: { equationNumbers: { autoNumber: "AMS" } }
18});
19</script>
20{{ end }}

書いたあとのlayouts/partials/footer.html．

 1</div><!-- .wrapper -->
 2  <footer class="footer">
 3    <div class="container container-inner">
 4      <div class="footer__copyright">&copy; {{ now.Format "2006" }} {{ .Site.Title }}. <span class="footer__copyright-credits">{{ T "footer_credits" | safeHTML }}</span></div>
 5    </div>
 6  </footer>
 7</div><!-- .container-outer -->
 8
 9<script>
10var navigation = responsiveNav(".menu", {
11  navClass: "menu--collapse",
12});
13</script>
14{{- partial "mathjax.html" . -}}
15{{- partial "mathjax_support.html" . -}}
16</body>
17</html>

通常の$$で囲んだ数式には式番号は表示されない．LaTeXの書き方でequationかalignで囲んだ数式またはtagをつけた数式にのみ式番号が表示される． \begin{align} p(w_c|w_t)=\frac{\exp \left(v_t^{\mathrm{T}}\; v_c\right)}{\sum_{k=1}^{|V|}\exp \left(v_t^{\mathrm{T}}\; v_k\right)} \label{eq:a} \end{align} 式番号を表示させたくないところには\nonumberをつける．基本的にはLaTeXの数式の書き方だが，改行は\を6つ並べないといけない．また，数式番号にはlabelをつけることができ，例えば\label{eq:a}とラベルを付けた場合，参照にはeqref{eq:a}とすれば数式番号を参照できる．こんな感じ→\eqref{eq:a}

ちょこっと MathJax：インライン数式と別行立て数式 — しっぽのさきっちょ | text.Baldanders.info

数式については基本的にMathJaxの方のことなのでMathJaxのdocumentなどを参照して変更するのが良い．数式を参照する際に使う\eqref{}の色やフォントの太さなどの調整はMathJaxのTeX，LaTeXについて，How to style all links created by \eqref command · mathjax/MathJax-docs Wikiを参考に行った．

最終的なmathjax_support.htmlは以下．

 1{{ if and .IsPage (eq (.Param "mathjax") true) }}
 2<script type="text/x-mathjax-config">
 3MathJax.Hub.Config({
 4  tex2jax: {
 5    inlineMath: [['$','$'], ['\\(','\\)']],
 6    displayMath: [['$$','$$'], ['\[','\]']],
 7    processEscapes: true,
 8    processEnvironments: true,
 9    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code'],
10    TeX: { equationNumbers: { autoNumber: "AMS" },
11         extensions: ["AMSmath.js", "AMSsymbols.js"] }
12  }
13});
14
15MathJax.Hub.Config({
16  // Autonumbering by mathjax
17  TeX: { equationNumbers: { autoNumber: "AMS" } }
18});
19
20MathJax.Hub.Config({
21  // changing color all links created by \eqref command
22  // ref: https://github.com/mathjax/MathJax-docs/wiki/How-to-style-all-links-created-by-%5Ceqref-command
23  // MathJax document: http://docs.mathjax.org/en/latest/tex.html
24  "HTML-CSS": { styles: { ".MathJax a": { color: "black", "font-size": "100%", "font-weight": "normal" } } }
25});
26
27// fontfamily: "Menlo", "DejaVu Sans Mono", "Consolas", "Lucida Console", "monospace"
28</script>
29{{ end }}

Syntax highlightの設定

syntax highlightについては以下の記事を参考に行った．

syntax highlightを有効にするにはconfig.tomlに以下を書き加える．

1pygmentsCodefences = true
2pygmentsStyle = "themename" #themenameのところにthemeの名前を入れる

自分で色を設定したい人はconfig.tomlに

1pygmentsUseClasses = true

を加え，自分でcssコードを書く．または，既存のテーマの色を自分で少し設定し直す．既存のテーマのcssコード得るには以下のコードを実行する．

1hugo gen chromastyles --style=themename > tmp.css
2# themenameのところをテーマの名前にする．

得られたcssコードを自分のstatic/css/style.cssに書き加える．

 1/* Background */ .chroma { background-color: #f0f0f0 }
 2/* Error */ .chroma .err {  }
 3/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 4/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
 5/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
 6/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
 7/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
 8/* Keyword */ .chroma .k { color: #007020; font-weight: bold }
 9/* KeywordConstant */ .chroma .kc { color: #007020; font-weight: bold }
10/* KeywordDeclaration */ .chroma .kd { color: #007020; font-weight: bold }
11/* KeywordNamespace */ .chroma .kn { color: #007020; font-weight: bold }
12/* KeywordPseudo */ .chroma .kp { color: #007020 }
13/* KeywordReserved */ .chroma .kr { color: #007020; font-weight: bold }
14/* KeywordType */ .chroma .kt { color: #902000 }
15/* NameAttribute */ .chroma .na { color: #4070a0 }
16/* NameBuiltin */ .chroma .nb { color: #007020 }
17/* NameClass */ .chroma .nc { color: #0e84b5; font-weight: bold }
18/* NameConstant */ .chroma .no { color: #60add5 }
19/* NameDecorator */ .chroma .nd { color: #555555; font-weight: bold }
20/* NameEntity */ .chroma .ni { color: #d55537; font-weight: bold }
21/* NameException */ .chroma .ne { color: #007020 }
22/* NameFunction */ .chroma .nf { color: #06287e }
23/* NameLabel */ .chroma .nl { color: #002070; font-weight: bold }
24/* NameNamespace */ .chroma .nn { color: #0e84b5; font-weight: bold }
25/* NameTag */ .chroma .nt { color: #062873; font-weight: bold }
26/* NameVariable */ .chroma .nv { color: #bb60d5 }
27/* LiteralString */ .chroma .s { color: #4070a0 }
28/* LiteralStringAffix */ .chroma .sa { color: #4070a0 }
29/* LiteralStringBacktick */ .chroma .sb { color: #4070a0 }
30/* LiteralStringChar */ .chroma .sc { color: #4070a0 }
31/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0 }
32/* LiteralStringDoc */ .chroma .sd { color: #4070a0; font-style: italic }
33/* LiteralStringDouble */ .chroma .s2 { color: #4070a0 }
34/* LiteralStringEscape */ .chroma .se { color: #4070a0; font-weight: bold }
35/* LiteralStringHeredoc */ .chroma .sh { color: #4070a0 }
36/* LiteralStringInterpol */ .chroma .si { color: #70a0d0; font-style: italic }
37/* LiteralStringOther */ .chroma .sx { color: #c65d09 }
38/* LiteralStringRegex */ .chroma .sr { color: #235388 }
39/* LiteralStringSingle */ .chroma .s1 { color: #4070a0 }
40/* LiteralStringSymbol */ .chroma .ss { color: #517918 }
41/* LiteralNumber */ .chroma .m { color: #40a070 }
42/* LiteralNumberBin */ .chroma .mb { color: #40a070 }
43/* LiteralNumberFloat */ .chroma .mf { color: #40a070 }
44/* LiteralNumberHex */ .chroma .mh { color: #40a070 }
45/* LiteralNumberInteger */ .chroma .mi { color: #40a070 }
46/* LiteralNumberIntegerLong */ .chroma .il { color: #40a070 }
47/* LiteralNumberOct */ .chroma .mo { color: #40a070 }
48/* Operator */ .chroma .o { color: #666666 }
49/* OperatorWord */ .chroma .ow { color: #007020; font-weight: bold }
50/* Comment */ .chroma .c { color: #60a0b0; font-style: italic }
51/* CommentHashbang */ .chroma .ch { color: #60a0b0; font-style: italic }
52/* CommentMultiline */ .chroma .cm { color: #60a0b0; font-style: italic }
53/* CommentSingle */ .chroma .c1 { color: #60a0b0; font-style: italic }
54/* CommentSpecial */ .chroma .cs { color: #60a0b0; background-color: #fff0f0 }
55/* CommentPreproc */ .chroma .cp { color: #007020 }
56/* CommentPreprocFile */ .chroma .cpf { color: #007020 }
57/* GenericDeleted */ .chroma .gd { color: #a00000 }
58/* GenericEmph */ .chroma .ge { font-style: italic }
59/* GenericError */ .chroma .gr { color: #ff0000 }
60/* GenericHeading */ .chroma .gh { color: #000080; font-weight: bold }
61/* GenericInserted */ .chroma .gi { color: #00a000 }
62/* GenericOutput */ .chroma .go { color: #888888 }
63/* GenericPrompt */ .chroma .gp { color: #c65d09; font-weight: bold }
64/* GenericStrong */ .chroma .gs { font-weight: bold }
65/* GenericSubheading */ .chroma .gu { color: #800080; font-weight: bold }
66/* GenericTraceback */ .chroma .gt { color: #0044dd }
67/* TextWhitespace */ .chroma .w { color: #bbbbbb }

Reading timeについて

Reading timeをlayouts/partials/post_meta.htmlの最後に付け加えた．

1{{ if not .Site.Params.disableReadingTime }}  　~ {{ .ReadingTime }} minute read ~{{ end }}

GitHub Pagesの設定

Hugo公式のページ(Host on GitHub | Hugo)を参考にGitHub pagesの設定を行った．
GitHub Pagesには2種類のサイトの形式がある．サイトの形式によって与えられるURL，レンダリングされる場所が異なる．対応は以下のようになっている．

Type	URL	レンダリング場所
User/Organization Pages	https://<USERNAME/ORGANIZATION>.github.io/	レポジトリ直下
Project Pages	https://<USERNAME/ORGANIZATION>.github.io/<PROJECT>/	docsフォルダ直下

<USERNAME/ORGANIZATION>にGitHubのアカウント名が入り，<PROJECT>には作成したリポジトリ名が入る．
生成元のファイルなどもgit管理したいのでProject Pagesの設定を行った．手順は以下の通り．

GitHubでリポジトリを作成．（例としてリポジトリ名をblogとする．）

config.tomlに以下を追加する．

1baseurl = "https://<USERNAME/ORGANIZATION>.github.io/blog" # <USERNAME/ORGANIZATION>には自分のGitHubアカウントのユーザネーム．
2publishDir = "docs"

hugoで作成したディレクトリでhugo, git init, git add ., git commit -m "first commit"をする．
GitHubにpush．
GitHubのリポジトリのところにあるSettings>GitHub Pages>Sourceをmaster branch /docs folderにする．

これで3.のhugoで生成されたdocs folder以下の静的サイトが公開される．

ひとまずこれで公開する．Google analyticsやgoogle search console，Disqus(コメント)の導入，サイト内検索，カスタムドメインはまた今度．．．

References

Hugoについて: Giraffe AcademyのHugo解説 playlist
数式の表示: Hugoで数式を導入します | しさく; Doesn’t parse when there are more than one \sum or \inf in an equation · Issue #984 · mathjax/MathJax; Setting MathJax with Hugo | Hi, I am David; Using MathJax With Hugo Mainroad; ちょこっと MathJax：インライン数式と別行立て数式 — しっぽのさきっちょ | text.Baldanders.info
Syntax highlight: Syntax Highlighting | Hugo; HugoでのシンタックスハイライトにPython Pygmentsが不要となった - SIS Lab
GitHub Pages: Host on GitHub | Hugo
その他: Hugoでブログ作成

others