Setup Hugo and Gitlab CI

2021-03-23 703 words 4 minutes

Contents

This is the first post of this website :)

I setup Hugo, adopt hugo-clarity theme and publish the site usign Gitlab pages via Gitlab CI.

1 Setup Hugo with hugo-clarity theme

I selected hugo as I wanted to use static website generator that easily be supported by git and Gitlab-CI based workflow. I have used Mkdocs for the other websites and wanted to use alternative way.

Hugo looks to have plenty of templates. I checked:

and set it up by hugo-clarity as that’s looking good.

Install hugo

Installed hugo via brew to local Macbook Pro(macOS Catalina)

1
2
3
4


$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.7
BuildVersion:	19H524

1
2
3


$ brew install hugo
$ hugo version
hugo v0.82.0+extended darwin/amd64 BuildDate=unknown

Ref:

https://gohugo.io/getting-started/quick-start/

Create new site and add a theme

I defined the site name as “site” that should appear as a gitlab repository.

1
2
3
4
5


$ hugo new site site
$ cd site
$ git init
$ git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity
$ cp -a themes/hugo-clarity/exampleSite/* .

2 Configure hugo

I just copied the hugo-clarity/exapmleSite/config.toml and customized some.

config.toml

1
2
3
4
5


baseURL = "https://tatoflam.gitlab.io/site/"
title = "making note"
author = "tato"
copyright = ###
...

Add App ID and client code for get json from instagram api

When launching server, an error was raised by getJson from instagram API. That’s because instagram does not allow the API request without App ID and client code. I needed to do:

Generate facebook developer ID https://developers.facebook.com/quickstarts/
Add personal site domain
At the dashboard screen > “product” > select “oEmbed” and “confirm”
At “settings” > “detail”, check App ID and Client Token
Change application to live mode(“開発中”)
- On switching to live mode, facebook asks about privacy policy URL. Add static page URL for personal website.

Add layouts/shortcodes/instagram.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{{- $pc := .Page.Site.Config.Privacy.Instagram -}}
{{- if not $pc.Disable -}}
{{- if $pc.Simple -}}
{{ template "_internal/shortcodes/instagram_simple.html" . }}
{{- else -}}
{{ $id := .Get 0 }}
{{ $hideCaption := cond (eq (.Get 1) "hidecaption") "1" "0" }}
{{ with getJSON "https://graph.facebook.com/v10.0/instagram_oembed?url=https://www.instagram.com/p/" $id "/&hidecaption=" $hideCaption "&access_token=[App ID here]|[Token here]" }}{{ .html | safeHTML }}{{ end }}
{{- end -}}
{{- end -}}

Then shortcodes for instagram works like:

Ref. hugo-clarity - configuration

3 Launch local server

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


$ hugo server
Start building sites … 

                   | EN | PT  
-------------------+----+-----
  Pages            | 46 | 29  
  Paginator pages  |  0 |  0  
  Non-page files   |  0 |  0  
  Static files     | 61 | 61  
  Processed images |  0 |  0  
  Aliases          | 28 | 15  
  Sitemaps         |  2 |  1  
  Cleaned          |  0 |  0  

Built in 625 ms
Watching for changes in /Users/tatsuro.homma/repo/gitlab/site/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/tatsuro.homma/repo/gitlab/site/config.toml, /Users/tatsuro.homma/repo/gitlab/site/config/_default, /Users/tatsuro.homma/repo/gitlab/site/config/_default/menus
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

Then you can see generated page at http://localhost:1313/site/

4 Setup Gitlab CI

Hugo has an instruction to host website to gitlab.

Create .gitlab-ci.yml

1

$ cd ~/repo/gitlab/site

.gitlab-ci.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


image: monachus/hugo

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
  - hugo -D --theme=hugo-primer
  artifacts:
    paths:
    - public
  only:
  - master

Set gitignore file

1

$ echo "/public" >> .gitignore

git commit and push

1
2
3
4


$ git add .
$ git commit -m "Inital commit"
$ git remote add origin git@gitlab.com:tatoflam/site.git
$ git push -u origin master

If you have trouble when pushing your repository, check:

Git remote configuration

1
2
3
4


$ git remote set-url origin git@gitlab.com:tatoflam/site.git
$ git remote -v
origin  git@gitlab.com:tatoflam/eda.git (fetch)
origin  git@gitlab.com:tatoflam/eda.git (push)

SSH key configuration

1
2
3
4
5
6


$ ssh-add -l

$ ssh-add ~/.ssh/id_gitlab4

$ ssh -T git@gitlab.com
Welcome to GitLab, @tatoflam!

Set visibility in Gitlab page

On settings/repository in gitlab.com page, Settings > General > “Visibility, project features, permissions”,

Project visibility: private
Pages: Everyone