example.md

Hands-on Practice: Publish Your First Post

This tutorial starts with plain writing, then adds Markdown formatting, and finally adds an image. Use a practice post so you can experiment without changing an existing article.

Part 1 — Write and compile a simple post

Create a Personal draft:

npm run new:personal -- personal/bai-viet-thuc-hanh.md

Open content/personal/bai-viet-thuc-hanh.md and replace its contents with:

---
title: "Bài viết thực hành đầu tiên"
date: 2026-09-05
description: "Một bài viết nhỏ để tôi làm quen với cách Hugo tạo trang web."
category: "Thực hành"
article_lang: "vi"
draft: true
---

Hôm nay tôi tạo bài viết đầu tiên bằng Hugo. Tôi bắt đầu bằng một đoạn ngắn để tập trung vào quy trình thay vì cố viết thật hoàn hảo.

Điều tôi muốn kiểm tra rất đơn giản: bài viết có xuất hiện đúng trang Personal không, tiêu đề có dễ đọc không và đường dẫn có hoạt động không.

Compile the site with drafts enabled:

npm run sync:vendor
npx hugo --buildDrafts --destination public

Then preview it:

npx hugo server --buildDrafts

Open the local URL printed by Hugo, visit Personal, and select the practice post.

Part 2 — Add formatting

Add this below the existing paragraphs:

## Điều tôi vừa học

Tôi đã đi qua ba bước: **tạo file**, *viết nội dung*, rồi xem Hugo biến Markdown thành một trang web.

- Tiêu đề nằm trong front matter.
- Nội dung nằm bên dưới front matter.
- `draft: true` giữ bài viết khỏi trang công khai.

> Viết một phiên bản nhỏ giúp tôi hiểu quy trình trước khi thêm nhiều thứ hơn.

Tôi cũng có thể thêm [một đường dẫn](https://gohugo.io/documentation/) để người đọc tìm hiểu thêm.

Save the file and refresh the browser. Check the heading, list, quotation, emphasis, and link.

Part 3 — Add an image

Turn the post into a page bundle. Create a folder, move the Markdown file, and rename it to index.md:

content/personal/bai-viet-thuc-hanh/
└── index.md

Place a small image named goc-hoc-tap.jpg beside index.md:

content/personal/bai-viet-thuc-hanh/
├── index.md
└── goc-hoc-tap.jpg

Add this line to index.md:

![Góc học tập nơi tôi viết bài đầu tiên](goc-hoc-tap.jpg)

Refresh the preview. Confirm that the picture loads and that its alt text describes what matters in the image.

Part 4 — Publish or clean up

To publish the exercise, change draft: true to draft: false, run the production build, then commit and push:

npm run build:pages -- --gc --baseURL /Personal-Blog/
git add content/personal/bai-viet-thuc-hanh
git commit -m "Add my first practice post"
git push origin main

If this was only practice, delete the practice file or folder before committing. Hugo will return the Personal page to its previous state.