Hugoを使ったblogをGitLab CIを使ってGitLab Pagesで公開する

Posted by     "utimukat55" on Wednesday, June 26, 2019

TOC

Hugoを使ったblogをGitLab CIを使ってGitLab Pagesで公開する

今回、このblog開設にあたって同時にやってみたかったことは標記の通りで、

  1. PCでMarkdownを作成、編集したものをgit commit、git pushすると
  2. git pushを契機としてGitLab CIが動いてblogを生成し、その結果
  3. GitLab Pages上で全世界に公開される

を実践します。シーケンス図で書くとこんな感じです。

sequenceDiagram participant Me as Me participant P as Someone participant PC as PC participant Repo as GitLab participant GP as GitLab Pages Me->>PC: Hugo操作(Markdown作成、編集)/git commit PC-->>Me:   Me->>PC: git push PC->>Repo: git push Repo-->>PC:   PC-->>Me:   opt .gitlab-ci.yml Repo->>Repo: ビルド・テスト Repo->>GP: デプロイ GP-->>Repo:   end P->>GP: アクセス GP-->>P: コンテンツ

信じられないくらい躓きがありましたが、このエントリが見えているということは公開まではこぎ着けたということです。それでは手順をおさらい。

Hugoのインストール

Extendedと無印のもの

WSL上のUbuntuへインストールするにあたって、Hugoは現在以下の2種類のオフィシャルビルドがあります。

  • Extendedと呼ばれるもの
  • そうでないもの

もの凄く大雑把に言ってしまうとExtendedと呼ばれるものはSCSS/Sassと呼ばれるCSSのプリプロセッサを組み合わせて使う際に環境変数LD_LIBRARY_PATHを設定するワークアラウンドをする必要がない方のHugoで、今現在はこれらを使わないとしても後々影響する可能性はあると思うので、選べる環境であれば最初からExtended付きをインストールするのが良いのではないかと思います。

逆に、Githubのリリースページで配布されているパッケージを見ると以下の環境では無印のみ配布されています。

  • DragonFlyBSD
  • FreeBSD
  • Linux(32bit/ARM/ARM64)
  • macOS(32bit)
  • OpenBSD
  • Windows(32bit)

aptからインストール

現在WSL上のUbuntuは18.04LTSですがaptから普通に入れようとすると

$ apt-cache policy hugo
hugo:
  Installed: (none)
  Candidate: 0.40.1-1
  Version table:
     0.40.1-1 500
        500 http://jp.archive.ubuntu.com/ubuntu bionic/universe amd64 Packages

となっており、これは2018/04/25リリースとちょっと古いのでパス。

Snapでインストール

https://gohugo.io/getting-started/installing/#snap-package

Snapが使える環境であればこれが一番面倒が少ないかと思います。今回Windows10上のWSLで動いているUbuntuという環境なので、snapが使えないという制約に引っ掛かります。

$ snap install hugo --channel=extended
Interacting with snapd is not yet supported on Windows Subsystem for Linux.
This command has been left available for documentation purposes only.

ということでこれもパス。

Extended対応のdebをダウンロードして入れる

https://github.com/gohugoio/hugo/releases

から hugo_extended_0.55.6_Linux-64bit.deb をインストールします。

$ wget https://github.com/gohugoio/hugo/releases/download/v0.55.6/hugo_extended_0.55.6_Linux-64bit.deb
# dpkg -i hugo_extended_0.55.6_Linux-64bit.deb

バージョン確認。

$ hugo version
Hugo Static Site Generator v0.55.6-A5D4C82D2/extended linux/amd64 BuildDate: 2019-05-18T08:08:34Z

blogを作る

Hugoコマンドのインストール後、blogを作るに当たっては作り方に2つのアプローチがあると思います。手順を1つ1つ確認しながら進めていく方法既に出来上がっているリポジトリをcloneして必要な箇所を書き換える方法1です。今回は前者で進めます。

hugo_whiteというディレクトリを作り、その中のro_followupというディレクトリにHugoのblogを作成します。

~$ mkdir hugo_white
~$ cd hugo_white/
~/hugo_white$ mkdir ro_followup
~/hugo_white$ cd ro_followup/
~/hugo_white/ro_followup$ hugo new site .
Congratulations! Your new Hugo site is created in /home/hogehoge/hugo_white/ro_followup.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

テーマを選ぶ

Hugoで使うテーマを選びます。Hugoではテーマ選びが非常に重要でなぜそこまでテーマ選びが重要かというと、

  • Hugo自体が活発に開発が行われており、変更の影響をテーマが受けやすい
  • そのため、古いテーマを選ぶとうまく適用できないことも
  • かといって新しいテーマを選んでもHugoの変更ペースについていけなくなると使えなくなってしまうため、将来的に工数が増える心配がある

以上のことから、自分のやりたいことを満たしつつ最小のメンテナンスで済む、将来的に息の長いテーマを選びます。

今回テーマを選ぶ基準としたのは、レスポンシブ対応2、見た目がきれいなもの。これだけでも自分の記事を追加してGitLab Pages上でうまく表示できたことを確認できるまで3回繰り返しています。今回利用するテーマはClean White Theme for Hugo

結局いくつかテーマを見てみた結果、以下の条件が安牌に近くなるのではと感じています。

  1. Minimum Hugo Versionが低い→昔からある(Clean Whiteの場合0.10)
  2. Updatedが最近→最近でも必要に応じてメンテされている(Clean Whiteの場合2019-04-02)
  3. GitHub/GitLabのスター数が多い(目安としてはできれば3桁、最低でも2桁。Clean Whiteの場合124)

この3つを全て満たしながら自分の希望も合わせると、数はそんなにないはずです。本当は最初に白ベースではないという希望もありましたが一致するテーマがなく断念しました。

テーマを決めたら作成したblogをgitで管理するようにし、サンプルサイトが表示されるところまで一気にいきます。注意点としては、git submodule addコマンドは最後の引数(ここではthemes/hugo-theme-cleanwhite)を間違えるとhugo serverコマンドの実行でエラーになるので、一字一句間違えずにhugo-theme-cleanwhite。

~/hugo_white/ro_followup$ git init
Initialized empty Git repository in /home/hogehoge/hugo_white/ro_followup/.git/
~/hugo_white/ro_followup$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite
Cloning into '/home/hogehoge/hugo_white/ro_followup/themes/hugo-theme-cleanwhite'...
remote: Enumerating objects: 24, done.
remote: Counting objects: 100% (24/24), done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 556 (delta 11), reused 7 (delta 1), pack-reused 532
Receiving objects: 100% (556/556), 7.04 MiB | 808.00 KiB/s, done.
Resolving deltas: 100% (285/285), done.
~/hugo_white/ro_followup$ git submodule init
~/hugo_white/ro_followup$ git submodule update
~/hugo_white/ro_followup$ cp -r themes/hugo-theme-cleanwhite/exampleSite/* .
~/hugo_white/ro_followup$ hugo server
Building sites … WARN 2019/06/25 19:25:29 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/06/25 19:25:29 found no layout file for "HTML" for "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/06/25 19:25:29 Page's .URL is deprecated and will be removed in a future release. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Params.url.
WARN 2019/06/25 19:25:29 Page's .RSSLink is deprecated and will be removed in a future release. Use the Output Format's link, e.g. something like:
    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}.
WARN 2019/06/25 19:25:29 found no layout file for "HTML" for "taxonomyTerm": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/06/25 19:25:29 found no layout file for "HTML" for "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2019/06/25 19:25:30 Page's .UniqueID is deprecated and will be removed in a future release. Use .File.UniqueID.
WARN 2019/06/25 19:25:30 Page's .Dir is deprecated and will be removed in a future release. Use .File.Dir.
WARN 2019/06/25 19:25:30 .File.UniqueID on zero object. Wrap it in if or with: {{ with .File }}{{ .UniqueID }}{{ end }}
WARN 2019/06/25 19:25:30 .File.Dir on zero object. Wrap it in if or with: {{ with .File }}{{ .Dir }}{{ end }}

                   | EN
+------------------+----+
  Pages            | 67
  Paginator pages  |  8
  Non-page files   |  0
  Static files     | 59
  Processed images |  0
  Aliases          | 17
  Sitemaps         |  1
  Cleaned          |  0

Total in 1087 ms
Watching for changes in /home/hogehoge/hugo_white/ro_followup/{content,data,layouts,static,themes}
Watching for config changes in /home/hogehoge/hugo_white/ro_followup/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

ここまでエラーなくできた場合は http://localhost:1313/ でサイトを確認できるはずです。

この状態までできた時のディレクトリ構成は以下となります(インストールしたテーマによって異なります)。

~/hugo_white/ro_followup$ tree .
.
├── archetypes
│   └── default.md
├── build_algolia_index.sh
├── config.toml
├── content
│   ├── post
│   │   ├── 2017-11-03-hello-world.md
│   │   ├── 2017-11-04-istio-install_and_example.md
│   │   ├── 2017-11-07-istio-traffic-shifting.md
│   │   ├── 2017-11-08-istio-canary-release.md
│   │   ├── 2017-11-28-access-application-from-outside.md
│   │   ├── 2018-01-02-nginmesh-install.md
│   │   ├── 2018-02-03-authentication-and-authorization-of-microservice.md
│   │   ├── 2018-02-09-docker-without-sudo.md
│   │   ├── 2018-02-09-vim-tips.md
│   │   ├── 2018-03-13-use-docker-behind-http-proxy.md
│   │   ├── 2018-03-29-what-is-service-mesh-and-istio.md
│   │   ├── 2018-04-11-service-mesh-vs-api-gateway.md
│   │   ├── 2018-04-16-using-helm-to-deploy-to-kubernetes.md
│   │   ├── 2018-05-01-may-day-jiulonghu.md
│   │   ├── 2018-05-21-algolia-integration-with-jekyll.md
│   │   ├── 2018-05-22-user_authentication_authorization.md
│   │   ├── 2018-05-23-external_system_auth.md
│   │   ├── 2018-05-23-istio-auto-injection-with-webhook.md
│   │   ├── 2018-05-23-service_2_service_auth.md
│   │   ├── 2018-05-24-set_up_my_ubuntu_desktop.md
│   │   ├── 2018-06-02-istio08.md
│   │   ├── 2018-06-04-introducing-the-istio-v1alpha3-routing-api.md
│   │   └── readme.md
│   ├── search
│   │   └── placeholder.md
│   └── top
│       ├── about.md
│       └── books.md
├── data
├── deploy.sh
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
│   └── img
│       ├── 404-bg.jpg
│       ├── contact-bg.jpg
│       ├── disqus.png
│       ├── favicon.ico
│       ├── favicon.png
│       ├── fullscreenshot.png
│       ├── home-bg-jeep.jpg
│       ├── post-bg-coffee.jpeg
│       ├── post-bg-unix-linux.jpg
│       ├── post.png
│       ├── rewards.png
│       ├── search.png
│       ├── sitesearch.png
│       ├── tag-bg.jpg
│       ├── tn.png
│       ├── wechat_qrcode.jpg
│       └── zhaohuabing.png
└── themes
    └── hugo-theme-cleanwhite
        ├── LICENSE
        ├── README.md
        ├── archetypes
        │   └── post.md
        ├── exampleSite
        │   ├── build_algolia_index.sh
        │   ├── config.toml
        │   ├── content
        │   │   ├── post
        │   │   │   ├── 2017-11-03-hello-world.md
        │   │   │   ├── 2017-11-04-istio-install_and_example.md
        │   │   │   ├── 2017-11-07-istio-traffic-shifting.md
        │   │   │   ├── 2017-11-08-istio-canary-release.md
        │   │   │   ├── 2017-11-28-access-application-from-outside.md
        │   │   │   ├── 2018-01-02-nginmesh-install.md
        │   │   │   ├── 2018-02-03-authentication-and-authorization-of-microservice.md
        │   │   │   ├── 2018-02-09-docker-without-sudo.md
        │   │   │   ├── 2018-02-09-vim-tips.md
        │   │   │   ├── 2018-03-13-use-docker-behind-http-proxy.md
        │   │   │   ├── 2018-03-29-what-is-service-mesh-and-istio.md
        │   │   │   ├── 2018-04-11-service-mesh-vs-api-gateway.md
        │   │   │   ├── 2018-04-16-using-helm-to-deploy-to-kubernetes.md
        │   │   │   ├── 2018-05-01-may-day-jiulonghu.md
        │   │   │   ├── 2018-05-21-algolia-integration-with-jekyll.md
        │   │   │   ├── 2018-05-22-user_authentication_authorization.md
        │   │   │   ├── 2018-05-23-external_system_auth.md
        │   │   │   ├── 2018-05-23-istio-auto-injection-with-webhook.md
        │   │   │   ├── 2018-05-23-service_2_service_auth.md
        │   │   │   ├── 2018-05-24-set_up_my_ubuntu_desktop.md
        │   │   │   ├── 2018-06-02-istio08.md
        │   │   │   ├── 2018-06-04-introducing-the-istio-v1alpha3-routing-api.md
        │   │   │   └── readme.md
        │   │   ├── search
        │   │   │   └── placeholder.md
        │   │   └── top
        │   │       ├── about.md
        │   │       └── books.md
        │   ├── deploy.sh
        │   └── static
        │       └── img
        │           ├── 404-bg.jpg
        │           ├── contact-bg.jpg
        │           ├── disqus.png
        │           ├── favicon.ico
        │           ├── favicon.png
        │           ├── fullscreenshot.png
        │           ├── home-bg-jeep.jpg
        │           ├── post-bg-coffee.jpeg
        │           ├── post-bg-unix-linux.jpg
        │           ├── post.png
        │           ├── rewards.png
        │           ├── search.png
        │           ├── sitesearch.png
        │           ├── tag-bg.jpg
        │           ├── tn.png
        │           ├── wechat_qrcode.jpg
        │           └── zhaohuabing.png
        ├── images
        │   ├── disqus.png
        │   ├── fullscreenshot.png
        │   ├── post.png
        │   ├── rewards.png
        │   ├── screenshot.png
        │   ├── sitesearch.png
        │   └── tn.png
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.algolia.json
        │   │   └── single.html
        │   ├── index.html
        │   ├── partials
        │   │   ├── category.html
        │   │   ├── comments.html
        │   │   ├── footer.html
        │   │   ├── head.html
        │   │   ├── header.html
        │   │   ├── nav.html
        │   │   ├── page_view_counter.html
        │   │   ├── pagination.html
        │   │   ├── portfolio.html
        │   │   ├── post_list.html
        │   │   ├── posts.html
        │   │   ├── reward.html
        │   │   ├── search.html
        │   │   └── sidebar.html
        │   ├── search
        │   │   └── list.html
        │   ├── taxonomy
        │   │   ├── category.html
        │   │   └── tag.html
        │   └── top
        │       └── single.html
        ├── static
        │   ├── css
        │   │   ├── bootstrap.min.css
        │   │   ├── custom.css
        │   │   ├── font-awesome.min.css
        │   │   ├── fonts
        │   │   │   ├── FontAwesome.otf
        │   │   │   ├── fontawesome-webfont.eot
        │   │   │   ├── fontawesome-webfont.svg
        │   │   │   ├── fontawesome-webfont.ttf
        │   │   │   ├── fontawesome-webfont.woff
        │   │   │   └── fontawesome-webfont.woff2
        │   │   ├── hux-blog.min.css
        │   │   ├── iDisqus.min.css
        │   │   ├── style.css
        │   │   ├── syntax.css
        │   │   └── zanshang.css
        │   ├── img
        │   │   ├── favicon.ico
        │   │   ├── reward
        │   │   │   ├── alipay-1.png
        │   │   │   ├── alipay-10.png
        │   │   │   ├── alipay-100.png
        │   │   │   ├── alipay-2.png
        │   │   │   ├── alipay-5.png
        │   │   │   ├── alipay-50.png
        │   │   │   ├── alipay-btn.png
        │   │   │   ├── wechat-1.png
        │   │   │   ├── wechat-10.png
        │   │   │   ├── wechat-100.png
        │   │   │   ├── wechat-2.png
        │   │   │   ├── wechat-5.png
        │   │   │   ├── wechat-50.png
        │   │   │   └── wechat-btn.png
        │   │   └── search.png
        │   └── js
        │       ├── bootstrap.js
        │       ├── bootstrap.min.js
        │       ├── eac.min.json
        │       ├── fitvids.js
        │       ├── hux-blog.js
        │       ├── hux-blog.min.js
        │       ├── iDisqus.js
        │       ├── iDisqus.min.js
        │       ├── jquery.js
        │       ├── jquery.min.js
        │       ├── jquery.tagcloud.js
        │       ├── jquerymigrate.js
        │       ├── production.min.js
        │       └── reward.js
        └── theme.toml

36 directories, 171 files

GitLabでリポジトリを作る

blog用のリポジトリを作る

一旦この状態でGitLabに取っておきたいのでGitLabのリポジトリを作ります。

GitLabのダッシュボードから新規プロジェクトをクリック

新規プロジェクトをクリック

プロジェクト名にblog名の識別子を入れるとProject slugにも同じように文字列が入るので、Create projectを押すとリポジトリが作られます。Visibilityは公開したい場合はパブリックでいいと思いますが今回は生リポジトリを公開する旨味がないのでプライベート。Initialize repository with a READMEにチェックを入れてしまうと後でpullする時にconflictするのでチェックは外しておきます。

プロジェクト名を入力

gitで一連の作業をする中で、git remote add originの引数はGitLabのclone欄に表示されているURLとなります。

リポジトリのURL

また、hugoの生成物は/publicに出力されるので、これをgitとして管理しないようにします。

~/hugo_white/ro_followup$ echo "/public" >> .gitignore
~/hugo_white/ro_followup$ git config user.email "hogehoge@localhost"
~/hugo_white/ro_followup$ git config user.name "hogehoge"
~/hugo_white/ro_followup$ git remote add origin https://gitlab.com/hogehoge/ro_followup.git
~/hugo_white/ro_followup$ git add .
~/hugo_white/ro_followup$ git commit -m "Initial commit"
[master (root-commit) f543413] Initial commit
 50 files changed, 4103 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .gitmodules
 create mode 100644 archetypes/default.md
 create mode 100755 build_algolia_index.sh
 create mode 100644 config.toml
(snip)
 create mode 100644 static/img/zhaohuabing.png
 create mode 160000 themes/hugo-theme-cleanwhite
~/hugo_white/ro_followup$ git push -u origin master
Username for 'https://gitlab.com': hogehoge
Password for 'https://hogehoge@gitlab.com':
Counting objects: 59, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (52/52), done.
Writing objects: 100% (59/59), 2.13 MiB | 77.00 KiB/s, done.
Total 59 (delta 0), reused 0 (delta 0)
To https://gitlab.com/hogehoge/ro_followup.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

これでいつでもどこでもこのリポジトリを引っ張り出してblog更新できるようになりました!!

blogエントリを作成する

ではせっかくGitLabにpushしたので、全然違うディレクトリでcloneした方を作業ベースにしましょう。

~$ mkdir hugo_work
~$ cd hugo_work/
~/hugo_work$ git clone https://gitlab.com/hogehoge/ro_followup.git
Cloning into 'ro_followup'...
Username for 'https://gitlab.com': hogehoge
Password for 'https://hogehoge@gitlab.com':
remote: Enumerating objects: 59, done.
remote: Counting objects: 100% (59/59), done.
remote: Compressing objects: 100% (52/52), done.
remote: Total 59 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (59/59), done.

テーマをsubmoduleとして管理しているので、別リポジトリでcloneした場合は追加でgit submodule init git submodule updateを実行。

~/hugo_work$ cd ro_followup/
~/hugo_work/ro_followup$ git submodule init
Submodule 'themes/hugo-theme-cleanwhite' (https://github.com/zhaohuabing/hugo-theme-cleanwhite.git) registered for path 'themes/hugo-theme-cleanwhite'
~/hugo_work/ro_followup$ git submodule update
Cloning into '/home/hogehoge/hugo_work/ro_followup/themes/hugo-theme-cleanwhite'...
Submodule path 'themes/hugo-theme-cleanwhite': checked out '722b6c6c91fdd3255fc79887d7bb196640a61bef'

手始めに記事を一つ作成します。

~/hugo_work/ro_followup$ hugo new post/greeting.md
/home/hogehoge/hugo_work/ro_followup/content/post/greeting.md created

Hugoではhugo newコマンドで記事を作成するが慣例的にpost/の下に記事を作成するテーマが多いです。また、現在のHugoはデフォルトではcontentの下にpost(SECTIONNAME)/ファイル名で記事を作成します。記事のファイル名にはマルチバイト文字も使用可能ですが、後々URLの一部となるため、NFD等考えると個人的にはお勧めしません。

hugo newコマンドで作成したMarkdownファイルは、メタ情報定義部分のFrontmatterと記事本文に分かれますが、テーマによってこのFrontmatterも異なります。今回使用しているClean Whiteでは以下のMarkdownを出力します。

---
title:       "An Example Post"
subtitle:    ""
description: ""
date:        2018-06-04
author:      ""
image:       ""
tags:        ["tag1", "tag2"]
categories:  ["Tech" ]
---

これは他のテーマと比較してもかなり定義が最初から多くなっています。これを書き換えて記事を作成します。

---
title:       "ご挨拶"
subtitle:    ""
description: ""
date:        2019-06-25T19:06:11+09:00
author:      ""
image:       ""
tags:        ["greeting"]
categories:  ["greeting"]
---
# このブログについて
このblogでは私が運用している他のblogの設定値やノウハウを書き溜めておくメモのようなものになる予定です。

基本的には(このblogも含め)[Hugo](https://gohugo.io/)を使用して色々書いていきたいなと思ってます。

また、大抵のテーマではFrontmatter部にdraft:という行が存在し、これをtrueにすることで実際のblogには出力しない3ようにできます。手元で内容を確認したら、gitにcommitしましょう。

~/hugo_work/ro_followup$ git add content/post/greeting.md
~/hugo_work/ro_followup$ git config user.email "hogehoge@localhost"
~/hugo_work/ro_followup$ git config user.name "hogehoge"
~/hugo_work/ro_followup$ git commit -m "publish greeeting entry"
~/hugo_work/ro_followup$ git push -u origin master

config.tomlを書き換える

Hugoのblog全体の設定を記述するファイルは直下にあるconfig.tomlとなっているので、これを書き換えます4

また、このconfig.tomlもテーマによって大きく内容が異なります。

~/hugo_work/ro_followup$ diff -u config.toml.org config.toml
--- config.toml.org     2019-06-25 19:32:01.872313700 +0900
+++ config.toml 2019-06-25 19:52:23.482696200 +0900
@@ -1,7 +1,7 @@
-baseurl = "https://zhaohuabing.com"
-title = "Huabing Blog"
+baseurl = "https://hogehoge.gitlab.io/ro_followup"
+title = "極個人的落穂拾い"
 theme = "hugo-theme-cleanwhite"
-languageCode = "en-us"
+languageCode = "ja-jp"
 # Enable comments by entering your Disqus shortname
 disqusShortname = ""
 googleAnalytics = ""
@@ -13,6 +13,7 @@
 home = ["HTML", "RSS", "Algolia"]

 [params]
+  editURL = "https://gitlab.com/hogehoge/ro_followup/edit/master/content/"
   header_image = "img/home-bg-jeep.jpg"
   SEOTitle = "赵化冰的博客 | Zhaohuabing Blog"
   description = "赵化冰,程序员, 开源爱好者,生活探险家 | 这里是 赵化冰 的博客,与你一起发现更大的世界。"

最初に変えるべきところとして、

  • languageCodeをja-jp(日本語-日本)
  • titleを変更
  • baseurlをGitLab Pagesの出力先へ
  • [params]のeditURLにGitLabのWeb IDEの編集画面のURLへ追加

を変更しています。[params]のSEOTitleはタブにも表示されるブログ名にもなっているので、スローガンのようなものを設定すると良いかもしれません。これもcommit、pushします。

~/hugo_work/ro_followup$ git add config.toml
~/hugo_work/ro_followup$ git commit -m "change config.toml"
~/hugo_work/ro_followup$ git push -u origin master

GitLab Pagesでサイトを公開する

これまでは変更をgit commitgit pushしても手元やGitLab上で変化するしかありませんでしたが、gitリポジトリ直下に.gitlab-ci.ymlを配置するとGitLabがCIを回して処理結果をGitLab Pagesへ出力することができるようになります。今回は以下の内容で直下に.gitlab-ci.ymlを作成します。

image: monachus/hugo

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

gitにcommit、pushします。

~/hugo_work/ro_followup$ git add .gitlab-ci.yml
~/hugo_work/ro_followup$ git commit -m "add .gitlab-ci.yml"
~/hugo_work/ro_followup$ git push -u origin master

GitLabへのgit pushを契機にGitLab CIでのビルドが始まります。パイプライン自体はすぐに終わりますが実際にページが見れるようになるまで初回は30分はかかるのでじっと待ちます

パイプラインの処理結果

生成結果のURLは https://hogehoge.gitlab.io/ro_followup になります。*hogehoge*はGitLabのユーザー名、*ro_followup*はリポジトリ名。

出来上がりを確認して、手元での実行結果と同じようになることを確認します。今回他に試したテーマではCSSが適用されなかったり記事がpostではなくpostsだったりで追加されなかったりした結果これに落ちつきました。お疲れさまでした。

ブラウザで動作確認


  1. https://gitlab.com/pages/hugo [return]
  2. PC等の大画面、スマホ等の細長画面で開いた場合にレイアウトを自動的に切り替えることで見易さを損なわないようにすること [return]
  3. 手元で確認する場合はhugo server -Dで出力させることが可能 [return]
  4. 書き換えないとサンプルブログそのままになる [return]

comments powered by Disqus

See Also