Hugo - テーマの設定

前回の続きです。 Hugoをインストールしたてのディレクトリ構造はこのようになっています。

サイトディレクト
┗ archetypes
 ┗ default.md
┗ content
┗ layouts
┗ themes
┗ config.toml
┗ data
┗ static

archetypesディレクトリ以外はすべて空のディレクトリです。
唯一あった2つのファイルの中身は以下です。

default.md

--
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true

--

※実際は↑ハイフン3つです(Markdownの関係上区切り線になってしまう)

config.toml

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"

Hugoをインストールしただけではとてもまっさらな状態です。

テーマを選ぶ

WordPressみたいにテーマをイチから作ることも出来ますが、初心者なのですでにあるテーマを使います。
Hugoのテーマがたくさんあります。

Complete List | Hugo Themes

f:id:yokoyoko_115:20200229234225p:plain

数が多すぎてかなり迷ってしまいましたが、ブログサイトなので「Blog」から絞り、更新が最近であろうページの上の方から選びました。

こちらにしました。

Hugo Theme Cleanwhite | Hugo Themes

f:id:yokoyoko_115:20200229234836p:plain

  • 説明がわかりやすそう
  • Chinese(簡体字)に慣れる練習
  • デザイン

という点で決めました。

ページの「Download」ボタンを押すとGitHubページへ行き、そこにも同じREADMEがあるので英語を読みます。

...どうやらシンプルなブログ機能を持ったテーマのようです。
私にぴったりです。

Quick Startをやってみる

The simplest way is to start with the example site coming with this theme, then you can play around and add your own stuff.

example site...サンプルサイトなしの状態でこのテーマを使う方法があるのかは謎ですが、以下に従ってコマンド入れていきます。

$ mkdir test
$ cd test
$ mkdir themes
$ cd themes
$ git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
$ cp -r hugo-theme-cleanwhite/exampleSite/** ../
$ cd ..
$ hugo serve

ディレクトリを作ってそこにリポジトリをクローンするということなので、Hugoインストール時にできたあのディレクトリは使わない気がする...
と思ったので、別のところ(冒頭に書いた「サイトディレクトリ」のある階層)で試してみます。

exampleSiteを使う

cp -r hugo-theme-cleanwhite/exampleSite/** ../exampleSiteがサンプルサイト。これを「test」ディレクトリにコピーしています。

f:id:yokoyoko_115:20200301005931p:plain

やはりHugoインストールしただけのあの状態は、イチから作るもののようです。

hugoコマンドhugo serve

hugo serveはサーバーを立ち上げるHugoコマンドです。
コマンド入力するとこのように出ました。

f:id:yokoyoko_115:20200301011239p:plain

Web Server is available at http://localhost:1313/

とあるので、PCに入っているHugoサーバーをブラウザで見てみます。

見れたー!

もうサイトを作った気分です。
しかし基本操作もよく分かっていないので、色々いじったり、ホスティングについてあれこれ考えていきます。

最後につまづき

コマンドラインを閉じようとしたところ、exitとコマンドを入れても終了できない。
焦って調べたところ、そのすぐ上にも書かれているPress Ctrl+C to stopが終了の操作でした。
ウィンドウの「zsh」と書かれていた所が「hugo」になっていたので、hugoの終了が必要なのですね。
hugo serverとCtrl+C、セットで覚えます。