Website Building

Optimizing Hugo Image Display Hugo renders Markdown images directly by default. For large images, you can wrap them in a container through an image render hook, then use CSS to improve how they are displayed. This article uses the PaperMod theme as an example and implements hover zoom with pure CSS, without JavaScript or any third-party library. That way, a failed CDN request cannot break the feature. Problems with the previous approach If you only use :active in CSS, an image is enlarged only while the mouse button is held down, and it is hard to trigger on mobile. It also only scales the current image; it does not show a higher-resolution original. ...

Adding Busuanzi Site Traffic Statistics to Hugo This article describes how to add Busuanzi site visit and reading statistics to Hugo. Steps Hugo officially recommends copying theme-related files to the site root directory when making site adjustments, so that the configuration in the root directory is applied first through the override order. This article does the same. Copy and modify the following files separately. Copy extend_head.html 1 cp themes/PaperMod/layouts/partials/extend_head.html layouts/partials/ Add: ...

Customizing Hugo’s 404 Page The default 404 page is just plain text. Today I found an adorable logo collection, ServiceLogos, and casually brought it over. Steps Modify the Nginx configuration Add the following site configuration to Nginx: 1 2 3 4 5 6 7 8 9 10 11 12 # index.html fallback location / { try_files $uri $uri/ =404; } # Custom error pages error_page 404 /404.html; error_page 403 /403.html; location ~ ^/(404|403)\.html$ { root /www/public; internal; } This Nginx configuration consists of several parts, which I will explain one by one below: ...

Adding a Friend Links Page to Hugo Friend links are a great tool for expanding a blog’s reach. This article explains how to add a friend links page to a Hugo blog. Steps Inline HTML Implementation Configuring the friend links page link is mentioned in config.yml in Building a Personal Blog with Hugo (2), corresponding to the following configuration: 1 2 3 4 - identifier: links name: 🤝Friend Links url: links weight: 60 To keep it simple and easy to modify, it can be implemented with inline HTML. ...

Responsive Image Sizing in Hugo When you insert images in Hugo, their sizes are not adapted automatically, and inconsistent image sizes can hurt readability. This article explains how to configure responsive image sizing. Steps Edit assets/css/extended/blank.css; if the file does not exist, run the following command to copy one in: 1 cp themes/PaperMod/assets/css/extended/blank.css assets/css/extended/blank.css Add the following css code: 1 2 3 4 5 6 7 8 9 10 /* When the user clicks an image in the post content, it is enlarged */ .post-content img[loading="lazy"]:active { transform: scale(1.382); } /* Make all images in a post display at the same width */ .post-content img[loading="lazy"] { width: 100%; height: auto; } Run hugo --gc to update the blog.

Hugo Code Block Folding Strictly speaking, it is not folding, it just limits the maximum height of code blocks, though the effect is quite good. Steps All of the following operations are performed in the root directory of the blog site. Control the layout with css First add a code.css to assets/css/extended/code.css, which limits the maximum height of code blocks via css, and can be adjusted according to your own blog layout. ...

Fixing Hugo Display Issues Caused by Missing CSS Press F12 to open the console, and you will see the error Failed to find a valid digest in the 'integrity' attribute for resource, which manifests as the page showing only text and icons with the layout gone. Local deployment or access via IP works fine, but access via the domain name fails. Solution The idea comes from Hugo - Failed to find a valid digest in the ‘integrity’ attribute for resource - The resource has been blocked - Host on Github. ...

Adding Math Formula Support to Hugo I happened to need it, so I just went ahead and solved it, based on KaTeX. It supports math formulas almost perfectly; both inline and display formulas can be rendered directly without modifying or adding any Shortcodes. The only drawback is that symbols with a double meaning in Markdown syntax itself, such as *, need to be escaped as \*. Steps 1. Modify extend_head.html All paths below are described with the site root directory as the current directory: ...

Enabling HTTPS on Hugo with an Nginx Reverse Proxy Sure, a website works fine over HTTP, but the browser still warns that it’s not secure, which is a bit of a buzzkill. Here’s a quick rundown of how to serve your Hugo site over HTTPS by putting an Nginx reverse proxy in front of it. The content is borrowed from Sulv’s post Deploying a Hugo blog to a Tencent Cloud lightweight server ...