Hugo Usage

2023-08-21

3 min read

Hugo can build a personal blog conveniently and quickly, providing comments, categories, searches, skins, subscriptions and other functions. Its open source code allows users to customize its default behavior at will.

principle

Hugo site root directory contains the whole meta data, the posts’ origin markdown file, themes static resources, avatar iamge etc.Just use command hugo on site root directory hugo will generate a site publish directory named public.So usually we do not modify pulish directory directly.Use 2 git repository is necessar they are hugo site root and publich directory.Publich hugo website in a particular domain,in additional to config a A record with the domain name vendor,more importantly you need config that on github gitpages.After that there will add a CNAME file located at public director.Never remove the CNAME file otherwise website will occur 404.

new post

Table 1: create a new post steps
step	process	location	illustrate
1	hugo new posts/post-name.md	your site root path	your post content
2	draft: false	post-name.md header	ready for public or not
3	toc: true	post-name.md header	title of content or not
4	summarize \n <!–more–>	post-name.md header after	summarize of this post
5	revise your outline	every outline with #	make sure the outline is correct
6	delete markdown’s toc	post-name.md header after	use hugo’s toc exclusively
7	generate html file	public's parent	generate in public dir

---
title: "Sony A7c 入门"
date: 2023-08-21T08:46:42+08:00
draft: false
toc: true
---
Sony a7c 相机入门基础知识整理
<!--more-->

<a id="orgd017a38"></a>

## devlog 设置
...

quote images

The image need located at %yoursite%/public/posts/postname/ .
Usually I put the image into a sub directory image , thus it looks like %yoursite%/public/posts/postname/image/pattern.png .

generate

Use hugo to generate html content in public directory.Command hugo for incremental construction that means some of the content will not generated, like avatar image. If want rebuild the whole public directory, firstly use hugo --cleanDestinationDir to clean the public,and then use hugo to build from scratch. Do not use hugo server, hugo server will startup a localserver for review.it leads all the static resrouces’ reference to localhost.This will makes online website occur 404 error.

css customize

Create your customize css file at %yoursite%/static/css/default.css .
put default css into the %yoursite%/themes/hugo-eureka/layouts/_default/baseof.html.

<link rel="stylesheet" href="/css/default.css">

tbody, th, tbody td {
    border: 1px solid #666;
}
tbody tr:nth-child(odd) {
    background-color: var(--color-primary-bg)
}

search

Each time when create a new post, use pagefind --source public/posts to generate index. Then config PageFind.

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({
            element: "#search",
            showSubResults: false ,
            pageSize: 3,
            showImages: false,
            bundlePath: "/posts/pagefind/",
            showEmptyFilters: false,
            translations: {
                zero_results: ""
            },
        });
    });
</script>

comments:

Comments post trigge use enableComment: false/true.