前回の続きです。 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のテーマがたくさんあります。
数が多すぎてかなり迷ってしまいましたが、ブログサイトなので「Blog」から絞り、更新が最近であろうページの上の方から選びました。
こちらにしました。
Hugo Theme Cleanwhite | Hugo Themes
- 説明がわかりやすそう
- 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」ディレクトリにコピーしています。
やはりHugoインストールしただけのあの状態は、イチから作るもののようです。
hugoコマンドhugo serve
hugo serve
はサーバーを立ち上げるHugoコマンドです。
コマンド入力するとこのように出ました。
Web Server is available at http://localhost:1313/
とあるので、PCに入っているHugoサーバーをブラウザで見てみます。
見れたー!
もうサイトを作った気分です。
しかし基本操作もよく分かっていないので、色々いじったり、ホスティングについてあれこれ考えていきます。
最後につまづき
コマンドラインを閉じようとしたところ、exit
とコマンドを入れても終了できない。
焦って調べたところ、そのすぐ上にも書かれているPress Ctrl+C to stop
が終了の操作でした。
ウィンドウの「zsh」と書かれていた所が「hugo」になっていたので、hugoの終了が必要なのですね。
hugo server
とCtrl+C、セットで覚えます。