(Translated by ChatGPT)

Introduction

Recently, I’ve been learning a lot and thought it’d be great to share my knowledge online. That’s why I started building my personal website!

I tried setting up a website before but ran into some issues:

Good themes cost money.
Free themes were hard to customize without lots of HTML/CSS work.
Deployment and maintenance were complicated.

After some searching, I found Hugo’s PaperMod Theme. It has a clean layout and solved all my problems. Plus, it’s super easy to use!

What should you know before start?

Basically, the process can be NO CODE!!! But there are still something you need to know.

How to use Terminal / Console (for building up the website)
Git, GitHub (for pushing your website to GitHub)
MarkDown Syntax (for creating post)
YAML Syntax (for website configuration)

They are pretty easy to learn, especially when it’s an era that you can copy and paste these terms on ChatGPT.

What resources did I use?

You can either follow the resources I used or follow my simplified steps to get your website up quickly.

First, I watched this YouTube video, which is about 1 hour long. The video guides you through building a basic website using Hugo’s PaperMod theme. By the end, you’ll have a good understanding of Hugo and a working site.

Since the video doesn’t cover advanced features, I also checked out the PaperMod GitHub page for more details.

Steps

Let’s see the project structure first.

Project Structure

The folder structure is adjustable, and it’s recommended to first get the website running smoothly, then make modifications according to your needs.

yourWebsiteName/ # Main folder created with the hugo new site command.
├── content/ # Where your posts and menu items are stored.
│   ├── blog/ # Blog posts.
│   ├── experience/ # Work and internship experience.
│   ├── project/ # Other projects.
├── static/ # Static files like images.
├── themes/ # Contains website themes, like PaperMod.
├── public/ # Generated by running the `hugo` command; ready for deployment.
├── ...
└── hugo.yaml # Hugo’s configuration file for site settings.

Now, let’s get into how to set up your website. The steps below are based on PaperMod’s installation guide (using macOS as an example; for other systems, refer to the official docs). Follow these steps, and if you run into issues, you can search for solutions.

Step 1: Install Homebrew and Hugo

Homebrew is a package manager for macOS that makes it easy to install and manage software.

Hugo is a fast, Go-based static site generator that’s easy to use and has many themes, so you can create and deploy a website without touching the code.

# Open Terminal, install Homebrew, and check the installation
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ brew -v # Displays the Homebrew version (Homebrew 4.3.16)

# Install Hugo using Homebrew and verify it
$ brew install hugo
$ hugo version # Displays the Hugo version (hugo v0.133.0...)

Step 2: Use PaperMod to create your website

The PaperMod theme is clean and simple, with features like Profile, Home, Search, and Archive. Creating posts is easy—just add a folder and a markdown file. You can also easily add images, links, and more.

You can see a good example of a personal website built with PaperMod here.

# Create your website and navigate to its folder
$ hugo new site yourWebsiteName --format yaml # Replace yourWebsiteName with your desired name
$ cd yourWebsiteName

# Initialize git
$ git init

# Add the PaperMod theme as a git submodule
$ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
$ git submodule update --init --recursive

# Keep the submodule up to date without overwriting local changes
$ git submodule update --remote --merge

# Set PaperMod as your theme
$ echo "theme: PaperMod" >> hugo.yaml

# Start the server
$ hugo server
...
Built in 49 ms
Environment: "development"
Serving pages from disk
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)

Your basic website is now ready! Open your browser and go to localhost:1313 to see it.

Customizing Your Website

Next, you can customize your site. Before running the following tutorial, please copy my hugo.yaml to your hugo.yaml. If you have issues, you can refer to my GitHub settings under content and hugo.yaml or Offical Wiki.

Here’s what you need to do:

Here’s how my hugo.yaml is set up: the larger the weight, the further to the right it will be positioned.

Each identifier corresponds to a folder with the same name under content. So, in addition to configuring which pages should be in the menu in hugo.yaml, you also need to create the corresponding folders under content!

menu:
  main:
    - identifier: archive
      name: Archive
      url: /archive/
      weight: 10
    - identifier: blog
      name: Blog
      url: /blog/
      weight: 20
    - identifier: project
      name: Project
      url: /project/
      weight: 30
    - identifier: experience
      name: Experience
      url: /experience/
      weight: 40
    - identifier: search
      name: Search
      url: /search/
      weight: 50
    - identifier: CV
      name: CV
      url: yourCVURL
      weight: 60

Set your profile picture and intro on the homepage

Put a photo in the static directory and specify the path in hugo.yaml. I put my profile picture named headPhoto.jpg in an img folder under static.

params:
  ...
  # profile-mode
  profileMode:
    enabled: true # needs to be explicitly set
    title: Chun-Yi Lee
    subtitle: "A curious software engineer who explores all kinds of tech and loves making it easy for others to understand."
    imageUrl: "img/headPhoto.jpg"
    imageWidth: 240
    imageHeight: 260
    imageTitle: Chun-Yi's handsome headshot
    buttons:
      - name: Blog
        url: blog
      - name: Tags
        url: tags

Create a post in the Blog folder

Create a blog folder under content, then create a firstPost.md file and paste the following template.

The structure should look like this:

content/
└── blog/
    └── firstPost.md

---
title: "firstPost"
date: "2024-08-18T23:59:48+08:00"
draft: false
---

## This is my first post!
Hello, welcome to my first post!

Here are a few reminders:

Change title to the desired title and update the time to the creation time of the post.
If draft is set to true, the post will not be deployed to the website.
The process for creating experience and project follows the same steps as creating a blog post.

The setup for experience and project follows the same process as the blog setup mentioned above.

Set up the Archive page

The Archive page lets users view your posts by timeline. Create an archive.md file under content and paste the following template.

---
title: "Archive"
layout: "archive"
url: "/archive/"
summary: archive
---

To display (or hide) posts from the blog or other folders under content on the Archive page, you can add (or remove) the folder name in the mainSections section of hugo.yaml. The Archive page will then include (or exclude) all .md files under that folder.

params:
  mainSections:
  - blog
  ...

Set up the Search page

The Search page lets users search your post titles and content. Create a search.md file under content, paste the following template, and add a few lines of code in hugo.yaml.

---
title: "Search" # in any language you want
layout: "search" # necessary for search
url: "/search/"
# description: "Description for Search"
summary: "search"
placeholder: "type in your keywords.."
---

# (in the end of hugo.yaml, add these lines)
outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

Deploying Your Website

Now, publish your website online. I won’t go into details; follow this tutorial video for the deployment process—it takes about ten minutes.

You don’t need to do add theme and git since these have been done in previous step.

However, you do need to create a repository on GitHub, and push your local directory to your repository. Netlify automatically pull your repo from GitHub, and publish it.

What else can you do?

Add like and comment sections.
Learn how to embed photos and YouTube videos in your posts.
Explore PaperMod’s documentation for more useful features.

Thanks for reading! If you found this article helpful, please share it with your friends. I’ll see you in other posts!

中文版

如何在一小時內建立你的個人網頁？而且還免費！？

前言

最近我在學習各種知識時整理了很多東西，隨後想到可以分享到網路上跟大家交流討論，所以就開始了我的個人網站開發之旅啦！

其實，我之前就嘗試過要架設個人網站，但遇到不少阻礙。簡言之，好用的要錢，但免費的又有以下問題：

找不到喜歡的主題
現成主題有點醜，想手動修改template卻得要修改大量的HTML和CSS
繁瑣的部署及維護程序

在網路上搜尋一陣子後，看到Hugo的PaperMod Theme簡潔的版面及資料夾結構，加上GitHub上有9.4K顆星星，就決定試看看它了，沒想到真的解決了以上痛點，而且操作上非常容易！

開始前須要有什麼背景知識？

基本上，這整個過程可以完全不用寫程式碼！但還是有幾件事情你需要知道：

怎麼用終端機/控制台（用來架設網站）
Git、GitHub（用來把你的網站推上 GitHub）
MarkDown 語法（用來寫文章）
YAML 語法（用來設定網站）

這些概念都蠻容易上手的，尤其是現在這個有 ChatGPT 當小老師的時代，直接把這些術語複製貼上到 ChatGPT 上查就能很快學會了。

我參考了哪些資料？

你可以看參考資料自行完成個人網站的架設，也可以直接使用我提供的簡化版文字教學來快速完成。

我首先看了這個 YouTube 影片，約1小時長，這位老兄講得很簡單，手把手帶你如何使用hugo的papermod theme建立基礎的個人網站，跟著做完之後，會對Hugo開發有基礎的認知，網站雛形也出來了。

由於上述影片中沒有提到進階功能怎麼設定，所以我接著參考 PaperMod 的 GitHub，裡面有default模板可供參考。

實作你的網頁

我們先來看看專案架構長什麼樣子。了解架構後再實作，過程會比較順利。

專案結構

資料夾結構是可以調整的，建議一開始先讓網頁順利運行，再根據自己的需求進行修改。

yourWebsiteName/ # 透過 hugo new site 指令建立的主資料夾。
├── content/ # 存放所有貼文和menu項目。
│   ├── blog/ # 部落格文章。
│   │   └── post1.md # 一個貼文。
│   ├── experience/ # 實習和工作經驗。
│   │   └── exp1.md # 一個經歷。
│   ├── project/ # 其他專案。
│   │   └── proj1.md # 一個專案。
├── static/ # 靜態檔案，如圖片。
├── themes/ # 存放網站主題，如 PaperMod。
├── public/ # 執行 `hugo` 指令後生成，用於部署的網站檔案。
├── ...
└── hugo.yaml # Hugo 配置檔案，用於設定網站的基本配置。

進入正題，我將詳細介紹如何完成網站架設。

以下參考PaperMod的安裝步驟（以MacOS為例，其他作業系統請參考官方文件），可以直接看下面的教學，跑不動再去找解答。

Step 1: 安裝Homebrew和Hugo

Homebrew是一個在MacOS中非常好用的套件管理工具，透過它可以輕鬆安裝、更新和管理各種軟體包和工具。

Hugo是一個基於go的疾速架站框架，非常容易使用，且提供很多主題，不需要碰到source code也能輕鬆完成個人網站的開發與部署。

# 打開 Terminal，安裝 Homebrew，並確認已安裝完成
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ brew -v # 將顯示Homebrew版本 (Homebrew 4.3.16)

# 使用 Homebrew安裝 Hugo，並確認已安裝完成
$ brew install hugo
$ hugo version # 將顯示 Hugo版本 (hugo v0.133.0...)

Step 2: 使用PaperMod建立網頁模版

PaperMod的版面非常地簡潔乾淨，具備個人網站必備的Profile, Home, Search Template, Archive等功能。創建貼文也相當容易，只要新增資料夾和markdown(.md)檔案即可。常見功能如新增圖片、連結等都能非常方便地處理完成。甚至支援Google Analytics, SEO等進階功能。(我還沒研究這部分，目前只是想先架個workable的網站)

我覺得這個利用PaperMod開發的個人網站做得還不錯，可供參考。

# 建立你的網站資料夾並進入該資料夾中
$ hugo new site yourWebsiteName --format yaml # 把yourWebsiteName改成你想要的網站名稱
$ cd yourWebsiteName # 把yourWebsiteName改成你想要的網站名稱

# 建立git
$ git init

# 使用git submodule加載PaperMod主題
$ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
$ git submodule update --init --recursive

# 讓submodule維持在最新版本，同時確保本地的更改不會被覆蓋
$ git submodule update --remote --merge

# 讓PaperMod成為你的網站主題
$ echo "theme: PaperMod" >> hugo.yaml

# 讓網頁跑起來
$ hugo server
...
Built in 49 ms
Environment: "development"
Serving pages from disk
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)

這樣就完成初版網頁了，你可以到瀏覽器上輸入localhost:1313看看網頁的樣子。

客製化網頁

接下來，你可以開始自訂你的網站。在進行下面的教學之前，請先把我的 hugo.yaml 複製到你的 hugo.yaml。如果有遇到問題，可以參考我在 GitHub 上的設定，看 content 和 hugo.yaml 裡面的內容，或者查查官方 Wiki。

基本上你需要做這幾件事：

我的hugo.yaml設定是這樣，weight越大會被擺到越右邊。

每個identifier會對應到content底下的同名資料夾，所以除了在hugo.yaml設定menu要有哪些page之外，也要到content下創建相對應的資料夾！

menu:
  main:
    - identifier: archive
      name: Archive
      url: /archive/
      weight: 10
    - identifier: blog
      name: Blog
      url: /blog/
      weight: 20
    - identifier: project
      name: Project
      url: /project/
      weight: 30
    - identifier: experience
      name: Experience
      url: /experience/
      weight: 40
    - identifier: search
      name: Search
      url: /search/
      weight: 50
    - identifier: CV
      name: CV
      url: yourCVURL
      weight: 60

設定初始頁面的頭貼和簡介

這邊要在static裡面放一張照片，並在hugo.yaml上寫上圖片位置。我是在static底下創個img資料夾，然後把頭貼headPhoto.jpg放在裡面。

params:
  ...
  # profile-mode
  profileMode:
    enabled: true # needs to be explicitly set
    title: Chun-Yi Lee
    subtitle: "A curious software engineer who explores all kinds of tech and loves making it easy for others to understand."
    imageUrl: "img/headPhoto.jpg"
    imageWidth: 240
    imageHeight: 260
    imageTitle: Chun-Yi's handsome headshot
    buttons:
      - name: Blog
        url: blog
      - name: Tags
        url: tags

在Blog資料夾底下創建貼文

你只需要在content底下建立blog資料夾，並在底下新增一個firstPost.md，把以下模板貼上去，就完成了。

結構如下：

content/
└── blog/
    └── firstPost.md

---
title: "firstPost"
date: "2024-08-18T23:59:48+08:00"
draft: false
---

## This is my first post!
Hello welcome to my first post!

這邊有幾個提醒：

title改成你想要的標題，時間改成該貼文的創建時間，
draft設為true的話，該貼文就不會部署到網頁上。
experience和project的建立方式，同以上建立blog的流程。

設置Archive頁面

Archive頁面可以讓使用者根據時間線查看你的貼文。你只需要在content底下新增一個archive.md，把以下模板貼上去，就完成了。

---
title: "Archive"
layout: "archive"
url: "/archive/"
summary: archive
---

如果要讓Archive頁面中，顯示(或隱藏)blog或其他content底下資料夾的貼文，可以在hugo.yaml的mainSections加上(或刪掉)該資料夾名稱，Archive就會將該資料夾底下的.md檔案都納入(或排除)。

params:
  mainSections:
  - blog
  ...

設置Search頁面

Search頁面可以讓使用者用各種語言查詢你的貼文標題及內容。你只需要在content底下新增一個search.md，把以下模板貼上去，並且在hugo.yaml新增幾行程式碼，就完成了。

---
title: "Search" # in any language you want
layout: "search" # necessary for search
url: "/search/"
# description: "Description for Search"
summary: "search"
placeholder: "type in your keywords.."
---

# (in the end of hugo.yaml, add these lines)
outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

部署網站

現在要把剛剛開發好的個人網站publish到Internet上。這邊不多贅述，請參考此教學影片，部署流程大約十分鐘。

你不需要再做add theme 和 git相關操作，因為之前已經完成了。

不過，你需要在 GitHub 上建立一個repository，然後把你的本地資料夾推送到這個repo。Netlify 會自動從 GitHub 拉取你的repo並部署網站。

你還可以做的事

新增按讚、評論欄位
了解如何在貼文上嵌入照片、YouTube影片
研究PaperMod的Document挖掘更多好用的功能

非常感謝你看到這邊，如果這篇文章對你有用，請分享給你的朋友，謝謝！

How to Build a FREE Personal Website IN 1 HOUR?

Introduction

What should you know before start?

What resources did I use?

Steps

Project Structure

Step 1: Install Homebrew and Hugo

Step 2: Use PaperMod to create your website

Customizing Your Website

Set the top-right menu

Set your profile picture and intro on the homepage

Create a post in the Blog folder

Set up the Archive page

Set up the Search page

Deploying Your Website

What else can you do?

中文版

前言

開始前須要有什麼背景知識？

我參考了哪些資料？

實作你的網頁

專案結構

Step 1: 安裝Homebrew和Hugo

Step 2: 使用PaperMod建立網頁模版

客製化網頁

決定右上角的menu有哪些頁面

設定初始頁面的頭貼和簡介

在Blog資料夾底下創建貼文

設置Archive頁面

設置Search頁面

部署網站

你還可以做的事

Introduction#

What should you know before start?#

What resources did I use?#

Steps#

Project Structure#

Step 1: Install Homebrew and Hugo#

Step 2: Use PaperMod to create your website#

Customizing Your Website#

Set the top-right menu#

Set your profile picture and intro on the homepage#

Create a post in the Blog folder#

Set up the Archive page#

Set up the Search page#

Deploying Your Website#

What else can you do?#

中文版#

前言#

開始前須要有什麼背景知識？#

我參考了哪些資料？#

實作你的網頁#

專案結構#

Step 1: 安裝Homebrew和Hugo#

Step 2: 使用PaperMod建立網頁模版#

客製化網頁#

決定右上角的menu有哪些頁面#

設定初始頁面的頭貼和簡介#

在Blog資料夾底下創建貼文#

設置Archive頁面#

設置Search頁面#

部署網站#

你還可以做的事#

Introduction

What should you know before start?

What resources did I use?

Steps

Project Structure

Step 1: Install Homebrew and Hugo

Step 2: Use PaperMod to create your website

Customizing Your Website

Set the top-right menu

Set your profile picture and intro on the homepage

Create a post in the Blog folder

Set up the Archive page

Set up the Search page

Deploying Your Website

What else can you do?

中文版

前言

開始前須要有什麼背景知識？

我參考了哪些資料？

實作你的網頁

專案結構

Step 1: 安裝Homebrew和Hugo

Step 2: 使用PaperMod建立網頁模版

客製化網頁

決定右上角的menu有哪些頁面

設定初始頁面的頭貼和簡介

在Blog資料夾底下創建貼文

設置Archive頁面

設置Search頁面

部署網站

你還可以做的事