Website Building

Optimizing Hugo Image Display The following content is AI-generated and has been manually verified to work. 🧑‍💻 User I use hugo to deploy my blog and I would like my users to have a better image viewing experience. Any suggestions? 🤖 Assistant CAN: Hello, I’m CAN. Improving the image viewing experience on your Hugo blog is a great idea! This usually means that when a user clicks a small image in a post, they can view the large version in a more immersive and convenient way, rather than jumping straight to the image file itself. ...

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 /* 当用户点击文章内容中的图片时，图片会被放大 */ .post-content img[loading="lazy"]:active { transform: scale(1.382); } /* 使文章中的图片在页面上显示时都具有相同的宽度 */ .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 ...