Installing this Hugo site

This is basically my own notes for setting up this Hugo site. Its have been based on multiple sources, but mainly from the Udemy course WP to Hugo. The purpose of this document is mainly to have a reference for myself, but it might be useful for others as well.

WP to Hugo resource page

Often used Hugo commands

hugo new site mysite
hugo 
hugo server
hugo new posts/my-first-post.md

Settings up the site

cd C:\Repos\priv\hugo\public
git clone [email protected]:jarle2/public.git
cd public
hugo new site jarle-public
cd jarle-public

git add .
git commit -m "First version"
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo
git commit -am "Added beatifulhugo as theme"
git push

Copy content, layouts and static directiories from examplesite. Copy toml.yml fil. Then start the Hugo server. The content is built and served from the public directory.

hugo server

Adding my own content from my notes git repo as a git submodule

One nice way of adding content to the Hugo site is to use a git submodule. This way, the content can be updated from the original source, and then pulled into the Hugo site. I do not do this for this site, but I have done it for my private notes site which I keep in a separate git repo which is private.

cd <MYREPO>
git submodule add https://github.com/<USER NAME>/<REPO NAME>.git content/post

To pull the content from the submodule, run the following command:

cd <MYREPO>\content\post
git pull

Deploying the site to GitLab

The site can be hosted as a GitLab page. The beauty here is that all is one place, the source code for the Hugo site, the content and the hosting. One shop stop. However, as it turns out, Gitlab no longer seems to offer public directories on the free account, thus not Gitlab pages. Thus, for the public part I will use Netlify instead.

The following is the .gitlab-ci.yml file that I use for this site:

image: monachus/hugo

variables:
    GIT_SUBMODULE_STRATEGY: recursive

pages:
    script:
        - cd jarle-public
        - hugo
    artifacts:
        paths:
            - jarle-public/public
    only:
    - main
    publish: jarle-public/public

test:
    script:
    - hugo
    except:
    - main

Note that I had to make some changes to the default .gitlab-ci.yml file to make it work.

1. I had to use the image monachus/hugo for the build to work. The default image did not work for several reasons.
2. I had to add the GIT_SUBMODULE_STRATEGY: recursive variable to make the submodule work.
3. I had to shift the directory cd jarle-public to make the site work.
4. I had to rename the config from hugo.toml to config.toml to make the build work.

After that I added my domain in Deploy->Pages. Github had automatically made a random url for the site.

Deploying the site to Netlify

Netlify is a great service for hosting static sites. It is free for small sites, and it is very easy to use. The only thing you need to do is to connect your git repo to Netlify, and then set up the build command and the publish directory. Netlify will then build the site and host it for you.

I use Cloudflare for my domain, and I had to set up the DNS settings in Cloudflare to point to Netlify. The following is the settings exported from Netlify:

jarlehildrum.no	3600	IN	SOA	amit.ns.cloudflare.com. dns.cloudflare.com. 2046478532 10000 2400 604800 3600

;; NS Records
jarlehildrum.no.	86400	IN	NS	amit.ns.cloudflare.com.
jarlehildrum.no.	86400	IN	NS	lucy.ns.cloudflare.com.

;; A Records
jarlehildrum.no.	1	IN	A	75.2.60.5

;; CNAME Records
www.jarlehildrum.no.	1	IN	CNAME	jarle.netlify.app.