Updated on 2020-04-28HugoとGithub Pagesで個人ブログを作ったので作業メモ。
macOS Catalina 10.15.4で作業した。
手順
- GitHub repositoryを作成
- Hugoでサイト作成
- GitHub Pagesで公開
- 独自ドメイン設定
- 記事を追加
GitHub repositoryを作成
GitHubで新しくリポジトリ(例えばblogという名前)を作成する。このリポジトリにはHugoのプロジェクトを配置する。プライベートリポジトリでも可。
次に、username.github.ioリポジトリを作成する。ここにはHugoで生成したサイトのファイルを配置するため、パブリックリポジトリとして作成する必要がある。
1
2
3
4
5
| $ hugo new site blog
$ cd blog
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite themes/hugo-theme-cleanwhite
$ cp -r themes/beautifulhugo/exampleSite/* .
$ hugo server -D
|
Hugoでサイト作成
Hugoをインストールする。
作業ディレクトリに移動し、hugoコマンドで新規プロジェクトを作成する。
1
2
3
| $ cd ~/workspace
$ hugo new site blog
$ cd blog
|
テーマをインストールする。今回はClean Whiteを選んだ。テーマはsubmoduleとして追加する。
1
2
| $ git init
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite
|
テーマが用意してくれているサンプルページをベースに構築する。サンプルページをコピーする。
1
2
| $ cd ~/workspace/blog
$ cp -r themes/hugo-theme-cleanwhite/exampleSite/* .
|
設定ファルを編集する。
baseurlは独自ドメインを使わない場合username.github.io、使う場合はそのドメインを指定する。titleはブログのタイトルを、themeはテーマ名(hugo-theme-cleanwhite)を指定する。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| baseurl = "https://keepcodingkeepclimbing.com/"
title = "Keep Coding, Keep Climbing"
theme = "hugo-theme-cleanwhite"
languageCode = "ja-jp"
googleAnalytics = ""
paginate = 8 #frontpage pagination
hasCJKLanguage = true
[outputs]
home = ["HTML", "RSS", "Algolia"]
[params]
header_image = "img/home-bg-jeep.jpg"
SEOTitle = "Keep Coding, Keep Climbing"
description = "programming and rock climbing"
keyword = "programming, software, machine learning, climbing, bouldering, blog"
slogan = "programming and rock climbing"
image_404 = "img/404-bg.jpg"
title_404 = "404 Not Found"
omit_categories = false
# algolia site search
algolia_search = true
algolia_appId = ""
algolia_indexName = ""
algolia_apiKey = ""
# Sidebar settings
sidebar_about_description = "Edge deep learning research engineer, open source enthusiast and rock climber"
sidebar_avatar = "img/avatar.jpg" # use absolute URL, seeing it's used in both `/` and `/about/`
featured_tags = true
featured_condition_size = 1
about_me = true
custom_css = ["css/custom-font.css"]
[params.social]
rss = true
twitter = "https://twitter.com/mshrh3"
linkedin = "https://www.linkedin.com/in/masahiro-hiramori-63b992167/"
github = "https://github.com/mshr-h"
googlescholar = "https://scholar.google.com/citations?user=NSCMi88AAAAJ"
facebook = "https://www.facebook.com/masahiro.hiramori"
[[params.addtional_menus]]
title = "CV"
href = "/top/cv/"
[[params.addtional_menus]]
title = "ABOUT"
href = "/top/about/"
[outputFormats.Algolia]
baseName = "algolia"
isPlainText = true
mediaType = "application/json"
notAlternative = true
[params.algolia]
vars = ["title", "summary", "date", "publishdate", "expirydate", "permalink"]
params = ["categories", "tags"]
[markup.tableOfContents]
endLevel = 2
startLevel = 1
[markup.highlight]
style = "dracula"
[markup.goldmark.renderer]
unsafe = true
|
以下のコマンドでローカルにて確認できる。
http://localhost:1313/をブラウザで開くとサンプルページが表示される。
GitHub Pagesで公開
hugoでビルドしたページはpublic/ディレクトリに生成される。このディレクトリをusername.github.ioにプッシュすることで、GitHub Pagesが更新される。
hugoで作成したblogディレクトリをリモートのblog/リポジトリに紐付け、public/ディレクトリをusername.github.ioリポジトリに紐付ける。
1
2
3
| $ cd ~/workspace/blog
$ git remote add origin https://github.com/mshr-h/blog
$ git submodule add -b master https://github.com/mshr-h/mshr-h.github.io public
|
この時点で各リポジトリとディレクトリの対応関係は以下の通り。
1
2
3
| ~/workspace/blog/ <-> https://github.com/mshr-h/blog
+-public <-> github.com/mshr-h/mshr-h.github.io
+-themes/hugo-theme-cleanwhite/ <-> https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
|
Clean Whiteテーマにはデプロイスクリプトdeploy.shが用意されているので、これ使ってデプロイする。
1
2
| $ cd ~/workspace/blog
$ ./deploy.sh
|
独自ドメイン設定
独自ドメインを使う場合、username.github.ioリポジトリとDNSレコードの設定が必要。
username.github.ioリポジトリの設定タブからGitHub PagesのCustom domainに独自ドメインを指定する。
DNSのAレコードに以下を追加する。
1
2
3
4
| 185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
|
詳細はここを参照する。
記事を追加
新しい記事を作成し、デプロイする。
1
2
3
| $ hugo new post/2020-04-01-article-title.md
$ vim content/post/2020-04-01-article-title.md
$ ./deploy.sh
|
Clean Whiteテーマ特有の設定
Clearn Whiteテーマはデフォルトで中華フォントのため、日本語フォントを使うためにはCustom CSSでフォントを指定する必要がある。
static/css/custom-font.cssに以下の内容を保存する。
1
2
3
| body, h1, h2, h3, h4, h5, h6, .navbar-custom {
font-family: Helvetica,"Sawarabi Gothic",Meiryo,"メイリオ","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",YuGothic,"游ゴシック",Arial,sans-serif;
}
|
config.tomlにすでにcustom_cssに関して記載があるため、以下に書き換える。
1
| custom_css = ["css/custom-font.css"]
|
これでブログの設定完了。