Hugosite Guide

Jump to Contents ↓
December 29, 2025
Technical Web

🌐 Website Guide

→ 🚀 Quick Start: Adding a New Post

Goal: Create and publish a new Blog Post.

  • Navigate to the Folder: Go to content/blog/ or content/notes/ in your project files.
  • Create a New File: Make a new file inside the folder (e.g., my-new-post.md).
  • Copy the Header: Copy the entire header block (everything between and including the +++ lines) from an existing post.
  • Update Settings: Paste the header into your new file and update the title, date, description, and categories.
    • Note: Ensure draft is set to false to publish immediately.
  • Write Your Content: Add your text, images, and content below the second +++ line.
  • Save and Publish: Save your file and Commit/Sync your changes to update the live site.

→ 🚀 Quick Start: (Through CLI)

Goal: Add a new Blog Post.

  • Navigate to the Folder: Open your command line (CLI) and navigate to the project folder.
  • Create a New File: Create a new file inside that folder (e.g., my-new-post.md) using the command:
hugo new notes/my-new-post.md
# or
hugo new blog/my-new-post.md
  • Automatic Settings: The date, draft=false, and title will be automatically written.
  • Update Settings: Update description and categories.
  • Write Your Content: Write below the header.
  • Save and Publish: Save and Sync/Commit changes.

📂 Where Things Live (Folder Structure)

Your website files are organized in a specific structure. You will primarily work within the content folder.

→ content/

This is your main workspace. All website content is stored here.

  • blog/: Long-form articles and posts.
  • notes/: Shorter updates or snippets.
  • projects/: Portfolio projects and case studies.
  • experience/: Professional job history.
  • timeline/: Chronological life or career events.
  • publications/: Academic papers or external articles.
  • open-source/: Open-source coding contributions.
  • contact/: Content for your contact page.

→ Other Folders & Files

  • static/images/: The storage folder for all photos and screenshots used in your posts.
  • hugo.toml: The main site configuration file.
  • pagerSize = 5
  • title = 'HugoSite'
  • baseURL = 'https://example.org/'
  • disqusShortname = "hjr265-me"

📝 The Header (Front Matter)

Every content file (.md) must start with a settings block called the Front Matter. This block controls how your post appears on the site.

Example Header: (Ini, TOML)

+++
date = '2025-12-29T01:21:43+06:00'
draft = false
title = 'My New Post Title'
description = "A short summary of this post."
categories = ['Tech', 'Guide']
+++

→ Key Settings Explained:

  • title: The main headline of your post.
  • date: The publication date (Format: YYYY-MM-DD). Future dates will not be published until that day.
  • draft: Set to true to keep hidden. Set to false to publish live.
  • description: A short summary displayed on list pages.
  • categories: Tags used to organize and filter your content.

🖼️ Adding Images

  • Upload: Save your image file into the static/images/ folder.
  • Insert: Use the following code in your post where you want the image to appear:
![Description of image](/images/your-photo.webp)
  • Example: Image of Catnip
  • Tip: Use .webp or .svg formats for faster website loading.

⚠️ Caution

  • Do Not Rename Folders: Keep system folder names (like blog, static) exactly as they are.
  • Keep _index.md Files: If you see an _index.md file in a folder, leave it alone. It controls the Home Page (Landing Page).
  • Check Your Dates: Posts with a future date will not appear on the live site until that date arrives.
  • Draft Status: If a post isn’t showing up, double-check that draft is set to false.

⚙️ Advanced: Running Locally & Deploying

This section is for users who want to preview changes on their own computer before publishing.

→ Running Locally

  1. Open your command line (CLI) and navigate to the project folder.
  2. Run the command: hugo server.
  3. Open your browser to http://localhost:1313 to see your site.
  4. The site will automatically update as you save changes.

→ Building for Hosting

  1. Run the command:
hugo
  1. This generates a public folder containing your complete, ready-to-host website.
  2. Upload the contents of the public folder to your hosting provider.

→ First-Time Deployment Configuration

When hosting for the first time, update your site’s URL in the hugo.toml file:

Change baseURL to your actual domain.

baseURL = '[https://example.org/](https://example.org/)'
# to
baseURL = '[https://yourDomainName.com/](https://yourDomainName.com/)'

💬 Setting Up Comments (Disqus)

To enable comments on your blog:

  1. Create an account at Disqus.com, find disqusShortname.
  2. Open hugo.toml file.
  3. Then, update the disqusShortname value to your new account shortname provided by Disqus:
disqusShortname = "your-username"
  1. Change the code of “Disqus comment section” inside baseof.html to the code provided in the installation page of Disqus.