初心者が静的CMS(Hugo)でCSSフレームワーク(min)を使って遊ぶシンプルな自作テーマのサイト

Hugo 自作テーマ by min

Hugo 自作テーマについて

Lastmod: 2019-04-19
theme css html layout

xubuntu 18.04 LTSで、Hugoを利用してWebサイトを作ってみる個人的な遊び。

作成時は、Hugo Version: 0.54.0

Hugoで自作テーマの表示確認をするために、WordPressのテーマユニットテストデータを使用しています。(フロントマターなどの修正あり)

日本語カテゴリー・タグなどは、Hugoビルド時に日本語フォルダが生成されるので、サーバー環境によってエラーやトラブルになるため、小文字の英数字・ローマ字を使用しています。

type:post、type:pageは削除。

当サイト内の記事・ページは、修正が必要と感じたところを変更しています。

Hugoの自作テーマ

軽量でシンプルな自作テーマ・テンプレートを目標としました。

この自作テーマでは、Hugo本体に、ノーマライズCSS・軽量CSSフレームワーク・ライトボックス・シンタックスハイライト・アイコンフォントを盛り込んでいます。

レスポンシブ対応ですが、モバイル・スマホ・iPad・タブレットなどでは最終的に1カラムの縦表示(垂直方向)から逆算して無難に仕上げています。

パソコンでの表示は、最大横幅:960pxで定番の2カラム。

画像と文字の回り込みは使う場面が限られてくるので、Hugoのマークダウン記述を重点として、基本的に1カラムで表示させるための垂直構成で記事を作成することを前提とします。

サイドバー・ヘッダーメニューなどは生成されるものも決まってくるので、各リンク先の90%以上は手動入力です。

config.toml

タクソノミーに関する記述は、「config.toml」で設定する。

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

おおまかな感じだと「config.toml」に、タクソノミーに関する記述をして、生成・出力されるものをサイドバーへ書く。

<ul>
  <li><a href="{{ .Site.BaseURL }}categories/">カテゴリー</a></li>
  <li><a href="{{ .Site.BaseURL }}tags/">タグ</a></li>
</ul>

カテゴリー・タグは、.mdファイルのフロントマターでパラメーター・メタデータを追加する。(このサイトは、toml形式)

+++
title = "Hugo 自作テーマについて"
date = "2019-03-24T22:10:01+09:00"
lastmod = ""
categories = ["theme"]
tags = ["css","html","layout"]
description = "記事のディスクリプション"
slug = ""
url = "/posts/theme-1"
author = "ひかげ"
draft = "true"
+++

記事を書いて、hugoの生成されるものをローカル環境で確認しながら、自作テーマで使いやすいように配置していく。

変数や条件分岐などを覚えると、より良いテーマができるはず。

おわりに

hugoのサイト生成・記事の書き方、使い方は2〜3時間くらいで把握できると思います。

感覚として、全くの初心者でも公式サイトや検索で学びながらだと、だいたい3〜5日くらいでカンタンな自作テーマの作成が可能です。(個人差あり)