HUGOとGitHub Pagesで自分のBlogページを作ってみた（Windows）

#はじめに

プログラミング分からないので、間違っていたりしたら教えてください。見よう見まねで調べながらやってます。この記事を書くに至った経緯は、HUGOがGo言語で爆速だっていうのを以前に見かけたのと、GitHub Pagesでなら無料でWebページが作れると知ったからです。

環境はWindows。
GitHub PagesのURL先は`https://(USERNAME).github.io/`と`https://(USERNAME).github.io.(PROJECT)/`の2種類があるそうだが、後者の場合でやっていく。詳しくは[Host on GitHub](https://gohugo.io/hosting-and-deployment/hosting-on-github/#github-project-pages)に説明がある。

#準備
まずは、[Install Hugo](https://gohugo.io/getting-started/installing/)を読んでみた。
とりあえず、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](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\`で作業をする。

#初期設定

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

```config.toml
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を見てみると以下のものができる。

```001.md
---
title: "001"
date: 2019-02-16T14:58:22+09:00
draft: true
---
```
とりあえず書いてみる。

```001.md
---
title: "001"
date: 2019-02-16T14:58:22+09:00
draft: false
---
test<br>
テスト

```

`draft = false`にすると記事を投稿することができる。

```
$ hugo
$ hugo server
```
[http://localhost:1313/hugo-test/](http://localhost:1313/hugo-test/)で自分のページをみることができる。

![001.jpg](https://qiita-image-store.s3.amazonaws.com/0/329632/14bf164f-33c7-5d60-c168-8386f4b8a2df.jpeg)
![002.jpg](https://qiita-image-store.s3.amazonaws.com/0/329632/5c7a6d0d-9b5b-7161-2dca-27175561d317.jpeg)

短文なら大丈夫だが、概要が出てくるのが嫌なので

```
<!--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/](https://blank71.github.io/hugo-test/)で見ることが出来るようになった。

#感想
初めて真面目にコード編集とかした。Visual Studio Codeは凄く使いやすく感じた。Gitをよく理解していないので、そこに関して躓くことが多かった。自分が不満に思ったところは、適宜自分でコードを改変したりできるようになりたい。HTML/CSSを出来るようにしよう。