#はじめに
プログラミング分からないので、間違っていたりしたら教えてください。見よう見まねで調べながらやってます。この記事を書くに至った経緯は、HUGOがGo言語で爆速だっていうのを以前に見かけたのと、GitHub Pagesでなら無料でWebページが作れると知ったからです。
環境はWindows。
GitHub PagesのURL先はhttps://(USERNAME).github.io/とhttps://(USERNAME).github.io.(PROJECT)/の2種類があるそうだが、後者の場合でやっていく。詳しくはHost on GitHubに説明がある。
#準備
まずは、Install Hugoを読んでみた。
とりあえず、GitとGoとHUGOのインストールをする。
HUGOはextendedの方を選択した。無印との違いはSCSS/SASSをサポートしているかどうからしい。よく分からないけどとりあえずextendedをインストールしといた。
$ git version
git version 2.20.1.windows.1
$ go version
go version go1.11.5 windows/amd64
$ hugo version
Hugo Static Site Generator v0.54.0/extended windows/amd64 BuildDate: unknown
GitHubにリポジトリーを作る
GitHubでリポジトリーを作る。名前はhugo-testとしといた。
#雛形を作る
https://themes.gohugo.io/ から好みのテーマを選ぶ。僕はaetherというのにしてみた。
作業ディレクトリをtestにしといた。HUGOにはhugo-testを生成してもらった。名前はなんでもいい。
$ hugo new site hugo-test
<hugo-testっていうディレクトリができて、下にも色々できる>
$ cd .\hugo-test\
$ git init
$ git add --all
$ git commit -m "hugo new site hugo-test"
$ git remote add origin https://github.com/Blank71/hugo-test.git
$ git push -u origin master
<GitHubにpushした>
$ cd .\themes\
$ git clone https://github.com/josephhutch/aether.git
<選んだテーマを持ってくる>
$ cd ..
$ git add --all
<エラーを吐かれた>
$ git fetch
$ git add --all
$ git comment -m "clone aether"
$ git push -u origin master
<テーマをcloneしてきて、それをpushした>
これ以降はtest\hugo-test\で作業をする。
#初期設定
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
baseurl = "https://blank71.github.io/hugo-test/"
title = "blank71 hugo-test"
author = "blank71"
canonifyurls = true
paginate = 3
theme = "aether"
publishDir = "docs"
hasCJKLanguage = true
languageCode = "ja-jp"
-
baseurlは起点となるURL。https://(USERNAME).github.io/(PROJECTNAME)/と設定する。 -
canonifyurls = true-> baserurl からの絶対パスにする。 -
pagenate-> 一ページで表示するページ数。 -
theme-> 自分が使うテーマを書く。 -
publishDir-> GitHub Pagesで表示してもらえるようにdocs/以下に置いてもらう。 -
hasCJKLanguage = true-> 日本語を含んでるよ。
#記事作成
ということで、001っていうページを作成。
$ hugo new posts/001.md
~\gufo-test\content\posts\001.md created
~\hugo-test\content\posts\001.mdを見てみると以下のものができる。
---
title: "001"
date: 2019-02-16T14:58:22+09:00
draft: true
---
とりあえず書いてみる。
---
title: "001"
date: 2019-02-16T14:58:22+09:00
draft: false
---
test<br>
テスト
draft = falseにすると記事を投稿することができる。
$ hugo
$ hugo server
http://localhost:1313/hugo-test/で自分のページをみることができる。
短文なら大丈夫だが、概要が出てくるのが嫌なので
<!--001--> #中身はなんでもいい
<!--more-->
test<br>
テスト
と書いた。概要は規定の文字数まで記述されるが<!--more-->があると終了してくれる。
あと本文の最初の文字が大きくなるのも嫌だから、.\hugo-test\themes\aether\statics\にあるmain.min.cssとstyle.cssの.dropcaseに関する記述を削除することで解決した。
（追記0220：READMEにdropCapの記述があり、これをfalseにすれば大文字にならない。）
#GitHub Pagesでみる。
Gitをよく分かっておらずエラーが出てしまうので、.\hugo-test\themes\aether\の.gitフォルダは削除した。
$ hugo
$ git add --all
$ git commit -m "hugo"
$ git push origin master
GitHubのプロジェクトのSettingsに行って、GitHub Pages > Source > master blanch/docs folderとする。しばらくすれば、https://blank71.github.io/hugo-test/で見ることが出来るようになった。
#感想
初めて真面目にコード編集とかした。Visual Studio Codeは凄く使いやすく感じた。Gitをよく理解していないので、そこに関して躓くことが多かった。自分が不満に思ったところは、適宜自分でコードを改変したりできるようになりたい。HTML/CSSを出来るようにしよう。