Hugo

Tracking website usage is essential for understanding your audience and improving your content. For my Hugo website, I chose to use Azure Application Insights (App Insights) because I just like it. This guide is inspired by this tutorial. Setting Up Azure Resources To get started, search for Application Insights in the Azure Marketplace. Click Create and fill in the required details: Once done, click Review + Create to finalize the setup. ...

Info Page To customize the info page for PaperMod based website: params: homeInfoParams: Title: "👋Hello World!" Content: >- Welcome to Huijing Huang's tech blogs! Social Icons To add social icons: params: socialIcons: - name: "github" url: "https://github.com/rewrlution" - name: "linkedin" url: "https://www.linkedin.com/in/huijing-huang/" - name: "email" url: "mailto:sssjtuhuang@gmail.com" Here’s the full list of social icons. Tags To enable the tags mode for the PaperMod theme in Hugo, add tags to the post’s front matter: date: "2025-02-28T14:16:39-08:00" draft: false title: "Hugo Infopage" tags: ["hugo", "PaperMod", "customization"] Configure the config.yaml to include the taxonomies settings: ...

Display Math Equations To display math equations in Hugo, we need to add math typesettings. I followed the PaperMod - Math Typesetting tutorial since I use it as the template. The tutorial uses KaTex as the library. Step 1: Math.html Create a partial under /layouts/partials/math.html. I use the Auto-render Extension to render the math inside it, and I include the reference to the script: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib" crossorigin="anonymous" /> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js" integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh" crossorigin="anonymous" ></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous" onload="renderMathInElement(document.body);" ></script> Step 2: Extend Head.html Then we need to include this partial in extend_head.html. ...

Hugo Basics What is Hugo? Hugo is a popular open-source static site generators. It takes your content written in Markdown format, applies templates, and generates a static HTML website. It is written in Go and has great performance. Comment: I have used other static site generators before, including Gatsby and Docusaurus. I prefer Hugo because it is very easy to use, and good for lightweight websites. Get Started Install Hugo and run the following command to verify you have installed Hugo: ...