hugo server on ubuntu 22.04. This page record I run hugo server in docker on public server.

Donwload hugo binary from github

Download papermod theme

Modify hugo “config.toml” file

1
2
3
4
5
6
7
# baseURL decide the url when click main logo
baseURL = 'http://localhost:1313/'
title = "Frederick's Blog"
timeZone = "Asia/Shanghai"
# paginate allows info to show on a series of pages.
paginate = 5
theme = "hugo-PaperMod-7.0"
 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
# enable code in one line (may have execute security risk)
enableInlineShortcodes = true
enableRobotsTXT = true
buildDrafts = false
buildFuture = false
buildExpired = false
enableEmoji = true
# enable highlight source code
pygmentsUseClasses = true

[minify]
disableXML = true

[languages.en]
languageName = "English"
weight = 1

[[languages.en.menu.main]]
name = "Search"
url = "search/"
weight = 10

[[languages.en.menu.main]]
name = "Tags"
url = "tags/"
weight = 10

# output content in multiple formats
[outputs]
 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
[params]
description = "Frederick's Personal Blog - http://localhost:1313"
author = "frederick"
defaultTheme = "auto"
ShowShareButtons = true
ShowReadingTime = true
displayFullLangName = true
ShowPostNavLinks = true
ShowBreadCrumbs = true
ShowCodeCopyButtons = true
ShowRssButtonInSectionTermList = true
ShowToc = true

[params.homeInfoParams]
Title = "Guten Tag!"
Content = """
Welcome to Frederick's Personal Blog.
- This blog will blog my daily IT learn and maybe some dairy.
- Have a nice day!
"""

[[params.socialIcons]]
name = "github"
url = "https://github.com/FukangSun"

[params.assets]
disableHLJS = true

[markup.goldmark.renderer]
unsafe = true

[markup.highlight]
noClasses = false

Configure hugo and papermod theme

extract papermod theme to “themes” folder to install it.

create “search.md” file in “content” folder.

touch /hugo-root-dir/content/search.md
1
2
3
4
---
title: "Search" # in any language you want
layout: "search" # is necessary
---

create “post.md” file in “archetypes” folder.

touch /hugo-root-dir/archetypes/post.md
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
---
author: "Frederick"
title: "Title"
date: "2023-02-13"
description: "this is a description"
tags: ["test1","test2"]
ShowToc: true
TocOpen: true
weight: 2
---

This is short description for preview.

<!--more-->

modify paperMod theme code for personal use

file path: ~/assets/js/fastsearch.js

  1. fuzzy search not search content, only search title and summary part, boost performance.
  2. deal search util get a enter keystroke: add a condition e.keyCode === 13 && fuse
  3. replace item.permalink to “http://124.221.159.211:80”: modify item.permalink before add it to resultSet
window.onload = function () {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                let data = JSON.parse(xhr.responseText);
                if (data) {
                    // fuse.js options; check fuse.js website for details
                    let options = {
                        distance: 100,
                        threshold: 0.4,
                        ignoreLocation: true,
                        keys: [
                            'title',
                            'permalink',
                            'summary',
                            //'content'
                        ]
                    };
    ......

sInput.onkeyup = function (e) {
    // run a search query (for "term") every time a letter is typed
    // in the search box
    if (e.keyCode === 13 && fuse) {
        const results = fuse.search(this.value.trim()); // the actual query being run using fuse.js
        if (results.length !== 0) {
            // build our html if result exists
            let resultSet = ''; // our results bucket

            for (let item in results) {
                let myitem = results[item].item.permalink;
                let originalString = myitem.toString();
                let replacedString = originalString.replace('http://localhost:1313', 'http://124.221.159.211:80');
                resultSet += `<li class="post-entry"><header class="entry-header">${results[item].item.title}&nbsp;»</header>` +
                    `<a href="${replacedString}" aria-label="${results[item].item.title}"></a></li>`;
                //console.log(results[item].item.permalink);
                console.log(replacedString);
            }

            resList.innerHTML = resultSet;
            resultsAvailable = true;
            first = resList.firstChild;
            last = resList.lastChild;
        } else {
            resultsAvailable = false;
            resList.innerHTML = '';
        }
    }
}

Make docker image, pull it, and run it

1. self-make a docker image, just easy.

2. pull docker image from tencent cloud

1
2
docker login --username=100011942350 ccr.ccs.tencentyun.com
docker pull ccr.ccs.tencentyun.com/tcr.finuks/hugo:0.110.0

3. run the hugo docker container

1
2
3
4
docker run -d --name hugo \
-p 11383:1313 \
-v /var/www/blog.frederick.com:/root/blog.frederick.com \
ccr.ccs.tencentyun.com/tcr.finuks/hugo:0.110.0

4. maintain hugo server in container

1
2
3
4
5
6
7
docker exec -it hugo /bin/bash
cd /root/blog.frederick.com
nohup hugo server --bind=0.0.0.0 > ./hugo.log &

# or I add openssh-sever in image, also could login in ssh
docker inspect hugo | grep IPAddress | cut -d '"' -f 4
ssh root@172.18.0.3

Some extra records

YAML to TOML convert

Convert YAML to TOML Online

copy-to-server.sh

here is an example bash script to upload file to server, no need to type annoy redundant commands every times.

 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
#!/bin/bash

# Define the folder variable
local_folder="/home/finuks/Downloads/blog"
remote_folder="/var/www/blog.frederick.com/content"
remote_server="finuks@81.68.141.136"
key_file="$local_folder/id_rsa"
key_option="ssh -i $key_file"

# Define the function to fix permissions on a private key file
function fix_key_file_perms {
	# Get the path to the key file from the function argument
	local key_file="$1"

	# Get the current permissions of the key file
	perms=$(stat -c "%a" "$key_file")

	# Check if the permissions are too open (greater than or equal to 644)
	if [[ "$perms" -ge 644 ]]; then
		# Set the permissions to 600
		chmod 600 "$key_file"
		echo "Private key file permissions have been updated."
	fi
}

function main {
	# the upload file name
	filepath=$1
	file=$(basename "$filepath")

	# Prompt the user for the remote location to copy the file to
	DEFAULT_LOCATION="post/2023-2"
	read -p "Enter the remote location,default '$DEFAULT_LOCATION'): " location
	location=${location:-$DEFAULT_LOCATION}

	fix_key_file_perms "$key_file"

	# Use rsync to copy the file to the remote location
	rsync -av -e "$key_option" --ignore-times --checksum --chmod=ugo=rwX $local_folder/$file $remote_server:$remote_folder/$location/$file
}

# Call the main function
main $1

get-from-server.sh

here is an example bash script that just modify “copy-to-sever.sh”, it reverse direction, used to get file from server

 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
#!/bin/bash

# Define the folder variable
local_folder="/home/finuks/Downloads/blog"
remote_folder="/var/www/blog.frederick.com/content"
remote_server="finuks@81.68.141.136"
key_file="$local_folder/id_rsa"
key_option="ssh -i $key_file"

# Define the function to fix permissions on a private key file
function fix_key_file_perms {
        # Get the path to the key file from the function argument
        local key_file="$1"

        # Get the current permissions of the key file
        perms=$(stat -c "%a" "$key_file")

        # Check if the permissions are too open (greater than or equal to 644)
        if [[ "$perms" -ge 644 ]]; then
                # Set the permissions to 600
                chmod 600 "$key_file"
                echo "Private key file permissions have been updated."
        fi
}

function main {
        # Prompt the user for the name of the file to copy
        read -p "Enter the name of the file to get: " file

        # Prompt the user for the remote location to copy the file to
	DEFAULT_LOCATION="post/2023-2"
	read -p "Enter the remote location,default '$DEFAULT_LOCATION'): " location
	location=${location:-$DEFAULT_LOCATION}

        fix_key_file_perms "$key_file"
        # Use rsync to copy the file to the remote location
        rsync -av -e "$key_option" --ignore-times --checksum --chmod=ugo=rwX $remote_server:$remote_folder/$location/$file $local_folder/$file
}

# Call the main function
main

modify_content.sh

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#!/bin/bash

# The path to the directory you want to modify
directory="/var/www/blog.frederick.com/content"

# Use the chown command to change ownership of the directory to root
sudo chown -R root:root $directory

# Use the chmod command to change permissions on the directory to 755
sudo chmod -R 777 $directory

echo "Directory permissions modified successfully"

useless nginx configuration file, just record it.

if set up hugo server in local network, also can configure nginx server, and use “sub_filter” directive.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
server {
    listen 80;
    server_name blog.frederick.com;

    location / {
        proxy_pass http://localhost:1313;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # preserve the path information
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Original-Request $request_uri;

        # handle URL rewriting
        sub_filter 'http://localhost:1313' 'http://124.221.159.211';
        sub_filter_once off;
    }
}