Hugoで静的サイトを作る(3) 細かい設定 ～ ビルド

Sponsored Link

前回のpostでデザインの修正を行ったので、あとは設定ファイル等細かい部分を作っていきます。

faviconを追加する

今回のthemeではfaviconが設定されていません。themeの内容を確認したところ、themes/robust/layouts/partials/meta.htmlがすべてのページで読み込まれる、headタグ内に挿入されるpartialの用でした。従って、このpartialをlayout/partials/以下にコピーし、下記内容を追記しました。

<link rel="shortcut icon" href="/images/favicon.ico" />

これによりhttp://example.com/images/favicon.icoがfaviconのURLとなりますが、images/favicon.icoは静的ファイル、つまりstatic/以下のファイルを返すので、static/images/favicon.icoにファイルを配置することで任意のfaviconを使用することができます。

記事作成時のアーキタイプを修正する

これはthemeというわけではないですが、themeに合わせてhugo newした際に出力されるmdファイルのデフォルト値を設定します。下記のようにしました。tocは目次を生成するかしないかです。

---
date: {{ .Date }}
toc: true
title: "{{ replace .TranslationBaseName "-" " " | title }}"
tags: []
draft: true
---

config.tomlの修正

見た目が整ったので、あとは全体的な設定を行います。 config.tomlで最低限下記の要素を修正する必要があります。

  • baseURL … 実運用環境でのURL
  • languageCode … 日本語コンテンツなのでja-jp
  • title … サイトのタイトル

他にGoogleAnalyticsやDisqus、今回使用するthemeであるRobustにおいてはauthor、各種シェアボタンやGoogle Adsenseに関する設定を必要に応じて行います。Robustの設定についてはRobustを参照してください。私は[outputs]と[params.author]を設定しました。

Sponsored Link

記事を書いてビルド

あとはhugo new post/*****で記事を書いていきます。 下記のようにFrontMatterのdraftはfalseにし、必要に応じてtagsとcategoriesにより記事にタグをつけ、カテゴリ分けましょう。Robustではサイドバーにタグごと、カテゴリごとのインデックスが生成されます。

$ cat content/post/2017/09/helloworld.md
---
title: "Initialpost"
date: 2017-09-27T21:36:39+09:00
draft: false
toc: true
categories: ["blog"]
tags: ["foo", "bar"]
---

これは最初の記事です。
`blog`カテゴリに属し、`foo`タグと`bar`タグをつけています。

いよいよ静的ファイル群を生成します。コマンドはhugoのみです。

$ hugo
Started building sites ...
Built site for language en:
0 of 1 draft rendered
0 future content
0 expired content
2 regular pages created
5 other pages created
0 non-page files copied
4 paginator pages created
1 tags created
0 categories created
total in 29 ms

publicディレクトリにファイルが生成されるので、これをVPSなりパブリッククラウドなりレンタルサーバなりにアップすれば公開となります。

まとめ

ここまでで概ねHugoを用いたサイト運用の準備ができたので、しばらくはこの運用で様子見をしようと思います。

Sponsored Link
Previous Article
Next Article