I’d never really done any research on building websites before. Recently, while using the Atlas browser and reading a tech blog, I suddenly asked ChatGPT out of curiosity: “How can I build a personal blog with a similar look?” ChatGPT came up with a simple and straightforward solution — Hugo + Stack.

Since I happened to have a spare VPS lying around, I decided to give it a try. This post records the setup process — my very first blog entry.

The following steps are what I did on my MacBook Pro.
If you’re on a different system, you can search for a guide that matches your setup.

Install Environment

Run the following command in your terminal:

1

brew install hugo

Verify the installation:

1

hugo version

Create a New Site

Let’s create a new site called myblog. Run the command below in your working directory:

1

hugo new site myblog

After it runs successfully, a folder named myblog will appear in your working directory. Go into that folder:

1

cd myblog

Install the Stack Theme

Stack is a popular Hugo theme available on GitHub at 👉 https://github.com/CaiJimmy/hugo-theme-stack

First, initialize git:

1

git init

Then download the Stack theme as a submodule:

1

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

Add the theme to your Hugo config file:

1

echo "theme = 'hugo-theme-stack'" >> hugo.toml

Create Your First Post

1

hugo new post/my-first-post/index.md

Start the Development Server

1

hugo server -D

If everything goes well, you’ll see a message like:

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

Then, open your browser and visit http://localhost:1313/ — you should see your brand new blog running!