Table of Contents

モチベーション

• ブログを書きたい
• デザインを自由にカスタマイズしたい
• WordPressなどのCMSで管理するほどでもない
• StaticGenの上位にHugoがある

記事を新規作成する

$ hugo new post/<article name>.md

• プロジェクトディレクトリにあるarchetypes/のdefault.mdを元に新しいエントリがcontent/以下に作成される．

リアルタイムでプレビューしながら記事を執筆orテーマをカスタマイズする

$ hugo server --watch -D --port <port> --bind 0.0.0.0 --baseURL=<local machine's IP address>

• コードを変更するごとに自動でリロードさせるためには，--watchをつける．
  
• Draft記事を表示させるためには，-Dをつける．
  
• --bindを指定しない場合は，127.0.0.1にbindされる．127.0.0.1へのbindだと，hugo serverを実行しているローカルマシンからのアクセスhttp://localhost:<port>のみに制限されてしまう．0.0.0.0にbindすることで，LAN内にあるローカルマシン以外（スマホなど）からはhttp://<local machine's IP address>:<port>でアクセスできるようになる．

Themeのカスタマイズ

ユーザが指定したパラメータを呼び出す

• .Params.xxxはarticleのfront-matterから参照される
  
• .Site.Params.xxxはconfig.tomlから参照される

リストコンテンツの順番を制御できるページネーションを実装する

{{ $v1 := where .Pages ".Params.type" "!=" "about" }}
{{ $v2 := where .Pages ".Params.type" "!=" "terms" }}
{{ $pages := $v1 | intersect $v2 }}
{{ $paginator := .Paginate $sorted (index .Site.Params "paginate" | default 100) }}

{{ if gt $paginator.TotalPages 0 }}
  {{ range $index, $page := $paginator.Pages }}
    <article class="post post-entry">
      <a class="post-link" href="{{ .Permalink }}">
        <header class="post-header">
          <p class="post-meta">{{ .Lastmod.Format "2006.1.2" }}</p>
          <h2 class="post-title">{{ .Title }}</h2>
        </header>
        <footer class="post-footer">
          
        </footer>
      </a>
    </article>
  {{ end }}
{{ end }}

• font-matterにて指定されたtypeがaboutまたはtermsならリストに表示しないようにする．ここでは，intersectを用いてwhere句のORを実装している．
• font-matterで指定されたlastmod順にソートする
• config.tomlにて指定されたpagenateを１ページで表示する最大値とする．pagenateが指定されていない場合は100をdefaultとして用いる

静的サイトをジェネる

• HUGO_ENV=production hugoによって，public/に静的サイトが生成される
• Google Analyticsなどはproductionで有効になるように実装されていることが多いので，HUGO_ENV=productionと環境変数を指定する．例えば，theme内で以下のような実装があるならHUGO_ENV=productionが必要． {{ if eq (getenv "HUGO_ENV") "production" | or (eq .Site.Params.env "production") }}{{ end }}