Chanomic Blog

HugoセットアップからGitHubにデプロイするまでの備忘録

(last modified:
)

tags:

categories:

簡単にセットアップ方法を備忘のために書いておく

前提

インストール

ターミナルにて以下のコマンドを叩く

$ brew install hugo

ブログサイトの作成

blogサイトのローカルリポジトリがある前提で進める。blogディレクトリに移動して以下のコマンドを実行する。 forceフラグをつけると、今のディレクトリに何かファイルがあった場合でもサイトを生成してくれる。僕の環境の場合はREADME.mdしかなかったので何も上書きされなかったが、hugoが生成するファイルと名前がかぶる場合は、何かファイルが上書きされる恐れがあるので注意。

$ hugo new site ./ --force

すると、何やらたくさんファイルやディレクトリを生成してくれる。

テーマの追加

contrast-hugoが気に入ったのでこれを使う。

/themesに移動して、contrast-hugoのファイルをcloneしてくる

$ git clone https://github.com/niklasbuschmann/contrast-hugo.git

後でテーマをいじるので、一応テーマ名を変更しておく。contrast-hugoをch-modifiedに変更する。

シンタックスハイライトの設定

Chromaというハイライターが入っているらしい。そのテーマはこちらで見られる。今回はgithubというテーマを利用する。

/config.tomlでpygmentsStyle=githubと指定すると、スタイルをhtmlに直接埋め込んでくれる。しかしCSSを後で自分でいじりたいのでこの方法は用いない。その代わり、pygmentsUseClasses=trueとして、CSSを利用することにする。

/themes/ch-modified/static/cssに移動して、以下のコマンドを実行する。

$ hugo gen chromastyles --style=github > syntax.css

configの設定

/config.tomlの内容を以下の通りにする。ほとんどの設定項目がデフォルトのもので、正直意味が分かっていないものもある。コメントアウトのところはAboutページのリンクを貼るものだが、Aboutページができたらコメントを外そうと思っている。

baseURL = [ブログのURL]
title = [ブログのタイトル]
author = [作成者]
paginate = 3
languageCode = "ja-jp"
DefaultContentLanguage = "ja"
enableInlineShortcodes = true
footnoteReturnLinkContents = "^"
theme = [テーマ]
publishDir="docs"
pygmentsUseClasses = true

[menu]

# 気が向いたら設定する
#  [[menu.main]]
#    identifier = "about"
#    name = "About"
#    url = "/about/"
#    weight = 10

[taxonomies]
category = "categories"
tag = "tags"
series = "series"

[privacy]

  [privacy.vimeo]
    disabled = false
    simple = true

  [privacy.twitter]
    disabled = false
    enableDNT = true
    simple = true

  [privacy.instagram]
    disabled = false
    simple = true

  [privacy.youtube]
    disabled = false
    privacyEnhanced = true

[services]

  [services.instagram]
    disableInlineCSS = true

  [services.twitter]
    disableInlineCSS = true

index.mdの作成

/contents/_index.mdを作成し、内容は以下のものとする。これは/theme/ch-modified/layouts/_default/list.htmlの{{ .Content }}に埋め込まれる。

---

---

## Others

- [Tags](tags/)
- [Categories](categories/)

KaTeXの有効化

/layouts/partials/math.htmlを作成し、内容を以下のものとする。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
                                                                                                                                                                                  onload="renderMathInElement(document.body);"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    renderMathInElement(document.body, {delimiters: [
      {left: "$$", right: "$$", display: true},
      {left: "$", right: "$", display: false}]
    });
  });
</script>

次に、/theme/ch-modified/layouts/_default/baseof.htmlを開き、以下の内容を見つける。

{{- if or .Params.math .Site.Params.math }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css" integrity="sha256-uT5rNa8r/qorzlARiO7fTBE7EWQiX/umLlXsq7zyQP8=" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha256-TxnaXkPUeemXTVhlS5tDIVg42AvnNAotNaQjjYKK9bc=" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/mathtex-script-type.min.js" integrity="sha256-b8diVEOgPDxUp0CuYCi7+lb5xIGcgrtIdrvE8d/oztQ=" crossorigin="anonymous"></script>
{{- end }}

これを次の記述に置き換える。

{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

ちなみにCSSの読み込みとかはbaseof.htmlで行うので、新しいCSSファイルを追加したい場合はここに追記することになる。

ブログの投稿方法

次のコマンドを実行すると、フロントマターにdateが書き込まれた状態の雛形がcontents/posts/にできる。

$ hugo new posts/[ファイル名].md

GitHubへのデプロイ

以下のコマンドで静的ページをdocs以下に作成する。

$ hugo

あとはcommitしてリモートリポジトリにpushする。GitHub Pagesの設定で、Sourceをmaster/docsに設定すれば終わり。

参考

HugoでKaTeX