Hugo に入門する。

Hugo 環境構築

インストールは以下。

$ brew install hugo
$ which hugo
/usr/local/bin/hugo
$ hugo version
Hugo Static Site Generator v0.55.6/extended darwin/amd64 BuildDate: unknown

プロジェクト作成と初期設定は以下。

$ hugo new site tech-blog-hugo
Congratulations! Your new Hugo site is created in /path/to/workspace/tech-blog-hugo.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

$ cd tech-blog-hugo
$ git init
Initialized empty Git repository in /path/to/workspace/tech-blog-hugo/.git/
$ git remote add origin https://github.com/pepese/tech-blog-hugo.git
$ git config --local user.name pepese
$ touch .gitignore
$ echo /public > .gitignore

記事の作成

コマンドは hugo -h あるいは hugo [command] -h で確認できる。

テーマの設定

Hugoのテーマ一覧から好きなテーマを選んで以下のように設定する。

$ cd themes
git submodule add https://github.com/Vimux/mainroad themes/mainroad

設定ファイルの編集

config.toml を編集する。
設定はテーマによってクセがあるので、テーマの github をよく見ること。

DefaultContentLanguage = "ja"
languageCode = "ja-JP"

baseURL = "https://pepese.github.io/"
title = "ぺーぺーSEのテックブログ"
theme = "mainroad"
enableRobotsTXT = true
googleAnalytics = "xxxx"

[Params]
  description = "備忘録用メモサイト"
  twitter_cards = true
  readmore = true

[Params.sidebar]
  home = "right"
  list = "left"
  single = true
  widgets = ["social", "recent", "taglist"]

[Params.widgets]
  recent_num = 5 # Set the number of articles in the "Recent articles" widget
  tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)

[Params.widgets.social]
  twitter = "xxxx"
  github = "xxxx"

記事の生成と記載

記事は hugo new <content配下のディレクトリ>/タイトル.md コマンドで作成する。

$ hugo new blog/HexoからHugoに移行する.md
/path/to/workspace/tech-blog-hugo/content/blog/HexoからHugoに移行する.md created

記事へのパスは content/ ディレクトリ配下の構造と同じになる。
上記だと [baseURL]/blog/HexoからHugoに移行する/ が記事へのパス。
ファイル名がパスになるのがイヤな場合は、各記事で slug を設定すると変更できる。
また、まだ作成中の記事は draft を true にする。

---
title: "HexoからHugoに移行する"
date: yyyy-MM-dd...
slug: "hugo-basics"
tags:
- hugo
draft: true
---

Hexo から Hugo に移行する時のメモ。

<!--more-->

上記の slug 設定だと記事へのパスは [baseURL]/blog/hugo-basics/ になる。
また、記事生成時の雛形は archetypes/default.md となっており、  （ READ More ：続きを読むの境界）など好みの設定を入れておくとよい。

ローカル実行

hugo server コマンドでローカル実行できる。

$ hugo server -D

-D オプションを付与することで、ドラフト版の記事もビルド・確認できる。

Tips

タグをつける

タグ Hugo でいうところの Taxonomy というものの一部。
config.toml に以下を設定する。

[taxonomies]
	tag = "tags"

各記事で以下のように tags を設定する。

---
title: "HexoからHugoに移行する"
date: 2019-05-26T16:09:06+09:00
slug: "hugo-basics"
tags:
- hugo
draft: true
---

上記では hugo というタグが作成される。
リスト形式で複数指定することも可能。

アーカイブページの作成

アーカイブは Taxonomy の一部。 config.toml に以下を設定する。

[taxonomies]
	archive = "archives"

各記事で以下のように archives を設定する。

---
title: "HexoからHugoに移行する"
date: 2019-05-26T16:09:06+09:00
slug: "hugo-basics"
tags:
- hugo
draft: true
archives:
- 2019/05
---

上記で 2019/05 のアーカイブが作成される。
2019 や 2019/05/26 といった単位のアーカイブを複数作成することも可能。
また、以下のようなタグをサイドバーなど任意の場所に作成してアーカイブページへのリングを設置する。

<!-- archives start -->
<ul>
  {{ range $name, $items := .Site.Taxonomies.archives }}
    <li><a href="{{ $.Site.BaseURL }}archives/{{ $name | urlize | lower }}">{{ $name }} ({{ .Count }})</a></li>
  {{ end }}
</ul>
<!-- archives end -->

さらに layouts/taxonomy/archive.html としてアーカイブページ自体も作成する。

{{ define "main" }}
<h3>アーカイブ：{{ .Title }}</h3>
</pre>
{{ range .Data.Pages }}
<li style="list-style:none">
    <div class="date">{{ .Date.Format "2006.01.02 (Mon)" }}</div>
    <h3 class="list__title post__title ">
        <a href="{{ .Permalink }}">{{ .Title }}</a>
    </h3>
</li>
<br />
{{ end }}
{{ end }}

Github Pagesへの公開

公開用コンテンツが生成された public/ を普通に Github Pages に対応したリポジトリに push する。

$ rm -fR public
$ git submodule add -f https://pepese@github.com/pepese/pepese.github.io.git public
$ hugo
$ cd public
$ git add .
$ git commit -m "update"
$ git push origin master

branch 作るとかは好みで。

sitemap.xml の作成

デフォで作成されてる。

robots.txt の作成

デフォで作成されてるが、自分で変種したい時は以下。

config.toml の設定で enableRobotsTXT = true とする
/layouts/robots.txt に雛形を準備する

User-agent: *
Disallow : /img/
Disallow : /css/
Disallow : /js/
Sitemap : {{ $.Site.BaseURL }}sitemap.xml

404ページの作成

デフォで作成されてる。

Google Adsenseの設置

ポイントは、 取得したテーマを直接編集不要 ということ。
Hugo では同名のファイルであれば、テーマのレイアウト（ themes/[テーマ名]/layouts ）より独自のレイアウト（ layouts/ ）が優先される。
そのため、ヘッダ、フッタ、サイドバーなどアドを差し込みたい部品をそれぞれ独自に作成する。

$ mkdir layouts/partials
$ touch layouts/partials/header.html
$ touch layouts/partials/footer.html
$ touch layouts/partials/sidebar.html

上記のファイルについて、利用しているテーマから同名のファイルの中身をコピペして好きな内容を書き加えればカスタマイズできる。
以下のようなアドを上記のファイルに適宜差し込む。

<!-- ad start -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="xxxx"
     data-ad-slot="xxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ad end -->

Google Analyticsの設置

config.toml に以下を設定するだけ。

googleAnalytics = "UA-xxxxxxxx-x"

Amazonアソシエイトの設置

やり方は Google Adsense の時と同様で、以下のようなアドを layouts/ 配下のファイルに適宜差し込む。

<!-- ad start -->
<!-- Amazon -->
<script type="text/javascript"><!--
amazon_ad_tag = "xxxxxxxx"; amazon_ad_width = "160"; amazon_ad_height = "600"; amazon_ad_logo = "hide";//--></script>
<script type="text/javascript" src="http://ir-jp.amazon-adsystem.com/s/ads.js"></script>
<!-- ad end -->

Twitterの設定

Twitter Cards

config.toml ファイルに以下の設定を追加する。

[Params]
  description = "ぺーぺーSEがプログラミング（Go、Java、JavaScript、Python、Ruby）、クラウド（AWS）、Web構築などのメモを残すサイト。"
  twitter_cards = true

[Params.widgets.social]
  twitter = "@PeePeeSE"

これでheadタグ内に以下のメタが追加される。（所謂 Twitter Cards）

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ぺーぺーSEのテックブログ">
<meta name="twitter:description" content="ぺーぺーSEがプログラミング（Java、JavaScript、Python、Ruby）、クラウド（AWS）、Web構築などのメモを残すサイト。">
<meta name="twitter:creator" content="@PeePeeSE">

フォロー・シェアボタンの設置

これまたやり方は Google Adsense の時と同様。
以下のようなフォローボタンを layouts/ 配下のファイルに適宜差し込む。

<a href="https://twitter.com/PeePeeSE" class="twitter-follow-button" data-show-count="false">Follow @PeePeeSE</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

以下のようなシェアボタンを layouts/ 配下のファイルに適宜差し込む。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="PeePeeSE">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

画像の配置

static/ 配下に img というディレクトリを作ってそこに画像を保存する。
記事から参照する場合は、 Markdown で

![This is a image](/img/img01.png)

というふうに記載すると HTML で

<p><img src="/img/img01.png" alt="This is a image" /></p>

のように展開される。
画像サイズなど指定したい場合は Markdown の中に直接 HTML タグを書いてしまう。

RSS Feedの設置

RSS のファイルはデフォで作成されているが、index.xml という名前でちょっとイヤなので config.toml に以下の設定をしてリネームする。

[outputFormats.RSS]
baseName = "feed"

上記で /feed.xml で参照できるようになるので、以下のように好きな場所にボタンを設置する。

<!-- RSS Feed start -->
<a href="/feed.xml" title="RSS Feed"><img src="/img/rss_32.png" alt="RSSを購読する"></a>
<!-- RSS Feed end -->

OGPの設定

OGP （Open Graph Protcol）は、FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・サムネイル画像を表示させる仕組みのこと。
以下で OGP が有効になる。

[Params]
  opengraph = true

以下で画像を設定できる。

[Params]
  images = ["img/yaruwo.gif"]

なお、上記の設定方法は現在のテーマが利用している _internal/ 以下のファイルを利用するもので標準の Internal Template の仕様に従っている。

URLのクロールとインデックス登録を検索エンジンにリクエストする

Google（Yahoo）
- Googleアカウントを取得してGoogle Search ConsoleのFetch as Googleからリクエストする。
bing

数式を表示できるようにする

Hugo ではデフォで Mathjax というものを利用できる。
config.toml に以下を設定することで有効になる。

[Params]
  mathjax = true

$$ $$ で囲めば数式になる。

$$ a = b + c\\\ x = y + z $$

上記は以下のように書いている。

$$
a = b + c\\\\\\
a = b + c
$$

なぜか改行はバックスラッシュが 6 つ必要、、、？
書きっぷりは公式など参照。

Hugo入門