Build Your Personal Website from Scratch

This guide is written for people with zero programming experience. If you can type and click a mouse, you can follow along. The whole process takes about one afternoon.

Overview: What Are We Building?

End goal: a website at your own domain (e.g. www.yourname.com), hosted on GitHub Pages, completely free (except the domain itself, ~$10–15/year).

The tech stack is simple:

Component	Role	Cost
Domain (Namecheap / Squarespace)	Your web address	~$10–15/yr
Hugo	Static site generator	Free
PaperMod	Hugo theme	Free
GitHub + GitHub Pages	Code hosting + site hosting	Free
VS Code + Cline + AI API	Your AI programming assistant	API usage, negligible

You do not need to write code yourself — the AI writes it for you. Your role is more like a “project manager”: describe what you want, and the AI executes.

Step 1: Buy a Domain

A domain is your website’s address. Two recommended registrars:

Namecheap: Affordable, friendly UI. A .com domain typically costs $9–12 for the first year.
Squarespace Domains: Cleaner interface, slightly more expensive (~$20/yr).

Instructions (using Namecheap):

Go to namecheap.com and type your desired domain (e.g. yourname.com) in the search box.
If available, click “Add to Cart” → checkout → create an account → pay.
After purchase, go to Domain List → click your domain → you’ll see Nameservers and Advanced DNS tabs. Remember this page — you’ll come back in Step 8.

💡 Tip: Stick with .com. If your name is taken, try adding a middle initial or field abbreviation (e.g. yourname-math.com).

Step 2: Install VS Code

Visual Studio Code (VS Code) is a free code editor by Microsoft. It’s also the home for Cline, your AI assistant.

Go to code.visualstudio.com and click “Download”.
Install it (macOS: drag to Applications; Windows: click Next through the wizard).
Open VS Code — you’ll see a clean editor interface.

You don’t need to understand any editor features yet. It’s just the AI assistant’s “home”.

Step 3: Install the Cline Extension

Cline is a VS Code extension that lets AI read/write files and run commands directly on your computer. Think of it as “a programmer sitting inside your machine”.

In VS Code, click the Extensions icon in the left sidebar (four squares, shortcut Cmd+Shift+X / Ctrl+Shift+X).
Search for “Cline”, find the one by saoudrizwan, click Install.
After installation, a Cline icon (robot-like) appears in the sidebar. Click it.
On first launch, it will ask you to configure an AI provider (next step).

Step 4: Configure an AI API

Cline needs a “brain”. Two excellent and affordable options:

Option A: DeepSeek API (recommended, cheapest)

Go to platform.deepseek.com and sign up.
Go to API Keys → “Create API Key” → copy the key (starts with sk-).
Top up ¥10 (~$1.5) in the billing page — enough for a long time.
Back in VS Code → Cline panel → Settings → choose OpenAI Compatible provider:
- API Key: paste your key
- Base URL: https://api.deepseek.com
- Model ID: deepseek-chat

Option B: Qwen (Tongyi Qianwen) API

Go to Alibaba Cloud Bailian and log in with Alipay/Taobao.
Go to API-KEY Management → create a key.
New users usually get free credits.
In Cline settings, choose OpenAI Compatible:
- API Key: paste your key
- Base URL: https://dashscope.aliyuncs.com/compatible-mode/v1
- Model ID: qwen-plus

💡 Both use the OpenAI-compatible format, so Cline configuration is identical. DeepSeek is cheaper; Qwen has slightly stronger Chinese comprehension. Either works.

Step 5: Build the Website

Now the fun part. In Cline’s chat box, describe what you want in plain language.

5.1 Create the Project

Type in Cline’s chat:

Create a Hugo website in the current directory using the PaperMod theme.
Site title: "Your Name | Your Field", baseURL: "https://www.yourname.com/".

Cline will automatically:

Install Hugo (if not already on your machine)
Create the project structure
Download the PaperMod theme
Generate the config file hugo.toml

5.2 Add Pages

Continue telling Cline:

Create the following pages:
- About: a short bio
- Research: list research interests
- Teaching: list TA/course experience
- Notes (blog): for writing articles
Add navigation menu links for all of them.

5.3 Write Your First Post

Create a post at content/notes/hello-world.md,
title "Hello, World", with a few test sentences.

5.4 Customize Styling (Optional)

Customize the PaperMod theme colors and fonts
to make it look like a clean academic website.

💡 You don’t need to say everything at once. Chat with Cline iteratively — after each change, refresh your browser to see the result.

Step 6: Local Testing

In VS Code’s terminal (menu: Terminal → New Terminal), run:

hugo server -D

Then open http://localhost:1313 in your browser. You’ll see a live preview — any file change auto-refreshes.

Checklist:

Homepage displays correctly
All nav links work
Post pages render properly
Mobile view (F12 → device emulation) looks good

When satisfied, press Ctrl+C to stop the server.

Step 7: Deploy to GitHub Pages

7.1 Create a GitHub Repository

Go to github.com, sign up / log in.
Click “+” → New repository.
Name it anything (e.g. my-academic-site). Important: you must set it to Public — GitHub Pages is only available for public repositories on the free plan.
After creation, in VS Code terminal:

git init
git add -A
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/my-academic-site.git
git push -u origin main

(Or just tell Cline: “Initialize git and push to GitHub for me.”)

7.2 Set Up GitHub Actions Auto-Deploy

Tell Cline:

Create a GitHub Actions workflow that builds with Hugo
and deploys to GitHub Pages on every push to main.

It creates .github/workflows/hugo.yml. After pushing, go to your repo → Settings → Pages → Source: GitHub Actions.

Wait a few minutes — your site appears at https://YOUR_USERNAME.github.io/my-academic-site/.

7.3 Bind Your Custom Domain

Repo → Settings → Pages → Custom domain: enter www.yourname.com → Save.
Check Enforce HTTPS.
Create a static/CNAME file containing www.yourname.com (tell Cline: “Create static/CNAME with content www.yourname.com”).

Step 8: DNS Configuration

Go back to your domain registrar (Namecheap → Domain List → your domain → Advanced DNS).

Add these records:

Type	Host	Value	TTL
A Record	`@`	`185.199.108.153`	Automatic
A Record	`@`	`185.199.109.153`	Automatic
A Record	`@`	`185.199.110.153`	Automatic
A Record	`@`	`185.199.111.153`	Automatic
CNAME Record	`www`	`YOUR_USERNAME.github.io`	Automatic

These four IPs are GitHub Pages’ official addresses (source).

After saving, DNS propagation takes 10 minutes to 48 hours (usually under 1 hour).

Step 9: Verify & Test

Once DNS propagates, check each item:

Browser: Open https://www.yourname.com — see your site? ✅
HTTPS: Padlock icon in the address bar? ✅ (GitHub auto-issues Let’s Encrypt certs)
Command line (optional, in terminal):

# Check DNS resolution
dig www.yourname.com +short
# Should return YOUR_USERNAME.github.io

# Check HTTP response
curl -I https://www.yourname.com
# Should return HTTP/2 200

Global reachability: Open whatsmydns.net, enter your domain, check worldwide DNS sync.
Mobile test: Open your domain on your phone’s browser (turn off Wi-Fi, use cellular).

FAQ

Q: I truly cannot code. Can I really do this? A: Yes. Every “technical operation” in this guide can be done by telling Cline one sentence. Your job is to describe what you want.

Q: I don’t understand the code the AI writes. What do I do? A: You don’t need to understand it. Like driving a car without understanding the engine. If something breaks, paste the error to Cline — it will fix it.

Q: How much does this cost per year? A: Domain ~$10–15. Hosting free (GitHub Pages). AI API a few cents per month. Total under $20/year.

Q: How do I update content later? A: Open the .md file in VS Code, edit, save, then git add -A && git commit -m "update" && git push. Or tell Cline: “Change the second paragraph of my About page to…”

Link Summary

Resource	Link
Namecheap (domain)	https://www.namecheap.com
Squarespace Domains	https://domains.squarespace.com
VS Code	https://code.visualstudio.com
Cline extension	https://cline.bot
DeepSeek API	https://platform.deepseek.com
Qwen API	https://bailian.console.aliyun.com
Hugo	https://gohugo.io
PaperMod theme	https://github.com/adityatelange/hugo-PaperMod
GitHub	https://github.com
GitHub Pages docs	https://docs.github.com/en/pages
DNS checker	https://www.whatsmydns.net

Written August 2026. If you follow along and finish, feel free to share your website with me.

这篇文章面向完全没有编程经验的朋友。你只需要会打字、会点鼠标，就能跟着做完。整个过程大约需要一个下午。

总览：我们要做什么？

最终目标：一个以你自己域名命名的网站（比如 www.yourname.com），托管在 GitHub Pages 上，完全免费（除了域名本身每年约 $10–15）。

技术栈很简单：

组件	作用	费用
域名（Namecheap / Squarespace）	你的网址	~$10–15/年
Hugo	静态网站生成器	免费
PaperMod	Hugo 主题	免费
GitHub + GitHub Pages	代码托管 + 网站托管	免费
VS Code + Cline + AI API	你的 AI 编程助手	API 按量计费，极低

你不需要自己写代码——AI 会帮你写。你的角色更像是一个"项目经理"：告诉 AI 你想要什么，它来执行。

第一步：购买域名

域名就是你网站的地址。推荐两个注册商：

Namecheap：便宜，界面友好，.com 域名首年通常 $9–12。
Squarespace Domains：界面更简洁，适合不想折腾的人，价格略高（~$20/年）。

操作（以 Namecheap 为例）：

打开 namecheap.com，在搜索框输入你想要的域名（比如 yourname.com）。
如果可用，点击 “Add to Cart” → 结账 → 注册账号 → 付款。
购买完成后，进入 Domain List → 点击你的域名 → 你会看到 Nameservers 和 Advanced DNS 选项卡。先记住这个页面，后面第八步会回来。

💡 建议：选 .com 后缀。如果名字被占了，试试加中间名缩写或专业缩写（如 yourname-math.com）。

第二步：安装 VS Code

Visual Studio Code（简称 VS Code）是微软出品的免费代码编辑器，也是 AI 编程助手 Cline 的运行环境。

打开 code.visualstudio.com，点击 “Download” 按钮。
下载完成后双击安装（macOS 拖入 Applications 文件夹；Windows 一路 Next）。
打开 VS Code，你会看到一个简洁的编辑器界面。

你暂时不需要理解编辑器的任何功能。它只是 AI 助手的"家"。

第三步：安装 Cline 插件

Cline 是一个 VS Code 插件，让 AI 直接在你的电脑上读写文件、运行命令。你可以把它理解为一个"坐在你电脑里的程序员"。

在 VS Code 左侧栏点击 扩展图标（四个方块的图标，快捷键 Cmd+Shift+X / Ctrl+Shift+X）。
搜索 “Cline”，找到发布者 saoudrizwan 的那个，点击 Install。
安装完成后，左侧栏会出现一个 Cline 的图标（像一个机器人）。点击它。
首次打开会要求你配置 AI 提供商（见下一步）。

第四步：配置 AI API

Cline 需要一个"大脑"来驱动。推荐两个对中文支持极好且价格低廉的选项：

选项 A：DeepSeek API（推荐，最便宜）

打开 platform.deepseek.com，注册账号。
进入 API Keys 页面 → 点击 “Create API Key” → 复制生成的密钥（以 sk- 开头）。
在左侧充值页面充入 ¥10（约 $1.5），足够用很久。
回到 VS Code → Cline 面板 → 设置中选择 OpenAI Compatible 提供商：
- API Key：粘贴你的密钥
- Base URL：https://api.deepseek.com
- Model ID：deepseek-chat

选项 B：通义千问（Qwen）API

打开阿里云百炼平台，用支付宝/淘宝账号登录。
进入 API-KEY 管理 → 创建密钥。
新用户通常有免费额度。
在 Cline 设置中选择 OpenAI Compatible：
- API Key：粘贴你的密钥
- Base URL：https://dashscope.aliyuncs.com/compatible-mode/v1
- Model ID：qwen-plus

💡 两家都兼容 OpenAI 格式，Cline 配置方式完全一样。DeepSeek 更便宜，Qwen 中文理解略强。选哪个都行。

第五步：搭建网站

现在进入正题。在 Cline 的对话框里，你可以直接用自然语言告诉它你想做什么。以下是推荐的操作顺序：

5.1 创建项目

在 Cline 对话框中输入：

帮我在当前目录创建一个 Hugo 网站，使用 PaperMod 主题。
网站标题叫 "Your Name | Your Field"，baseURL 设为 "https://www.yourname.com/"。

Cline 会自动执行：

安装 Hugo（如果你电脑上没有）
创建项目结构
下载 PaperMod 主题
生成配置文件 hugo.toml

5.2 添加页面

继续对 Cline 说：

帮我创建以下页面：
- About（关于我）：放一段自我介绍
- Research（研究）：列出研究方向
- Teaching（教学）：列出助教/课程经历
- Notes（漫谈/博客）：用来写文章
并在导航栏菜单里加上这些页面的链接。

5.3 写第一篇文章

在 content/notes/ 下创建一篇文章 hello-world.md，
标题是 "Hello, World"，内容随便写几句测试文字。

5.4 自定义样式（可选）

帮我自定义 PaperMod 主题的配色和字体，
让它看起来更像一个学术网站，简洁大方。

💡 你不需要一次说完所有需求。可以像聊天一样，一步步告诉 Cline 你想改什么。每次它改完，你刷新浏览器就能看到效果。

第六步：本地测试

在 VS Code 的终端（菜单 Terminal → New Terminal）中运行：

hugo server -D

然后打开浏览器访问 http://localhost:1313。你会看到你的网站实时预览——任何文件改动都会自动刷新。

检查清单：

首页正常显示
导航栏链接都能点开
文章页面排版正常
手机尺寸下（浏览器按 F12 → 切换设备模拟）没有错位

满意之后，按 Ctrl+C 停止服务器。

第七步：部署到 GitHub Pages

7.1 创建 GitHub 仓库

打开 github.com，注册/登录。
点击右上角 “+” → New repository。
仓库名随意（如 my-academic-site）。注意：必须选择 Public（公开）——免费版 GitHub Pages 只支持公开仓库。
创建后，在 VS Code 终端执行：

git init
git add -A
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/你的用户名/my-academic-site.git
git push -u origin main

（或者直接让 Cline 帮你做：帮我把项目初始化 git 并推送到 GitHub）

7.2 配置 GitHub Actions 自动部署

让 Cline 帮你：

帮我创建 GitHub Actions 工作流，每次 push 到 main 分支时自动用 Hugo 构建并部署到 GitHub Pages。

它会创建 .github/workflows/hugo.yml。推送后，进入 GitHub 仓库 → Settings → Pages → Source 选择 GitHub Actions。

等几分钟，你的网站就会出现在 https://你的用户名.github.io/my-academic-site/。

7.3 绑定自定义域名

在 GitHub 仓库 → Settings → Pages → Custom domain 填入 www.yourname.com → Save。
勾选 Enforce HTTPS。
在仓库根目录创建 static/CNAME 文件，内容写 www.yourname.com（让 Cline 做：创建 static/CNAME 文件，内容是 www.yourname.com）。

第八步：DNS 设置

回到第一步买域名的那个页面（Namecheap → Domain List → 你的域名 → Advanced DNS）。

添加以下记录：

Type	Host	Value	TTL
A Record	`@`	`185.199.108.153`	Automatic
A Record	`@`	`185.199.109.153`	Automatic
A Record	`@`	`185.199.110.153`	Automatic
A Record	`@`	`185.199.111.153`	Automatic
CNAME Record	`www`	`你的用户名.github.io`	Automatic

这四个 IP 是 GitHub Pages 的官方地址（来源）。

保存后，DNS 生效需要 10 分钟到 48 小时（通常 1 小时内）。

第九步：验证与网络测试

DNS 生效后，逐项检查：

浏览器访问：打开 https://www.yourname.com，看到你的网站？✅
HTTPS 证书：地址栏有🔒图标？✅（GitHub 自动签发 Let’s Encrypt 证书）
命令行测试（可选，在终端执行）：

# 检查 DNS 解析
dig www.yourname.com +short
# 应返回 你的用户名.github.io

# 检查网站响应
curl -I https://www.yourname.com
# 应返回 HTTP/2 200

全球可达性测试：打开 whatsmydns.net，输入你的域名，查看全球各地 DNS 是否已同步。
手机测试：用手机浏览器（关掉 Wi-Fi，用流量）访问你的域名。

常见问题

Q：我完全不会写代码，真的能做吗？ A：能。这篇文章里所有"技术操作"都可以用一句话让 Cline 完成。你的工作就是描述你想要什么。

Q：AI 写的代码我不懂怎么办？ A：不需要懂。就像你不需要懂发动机原理也能开车。如果网站出了问题，把错误信息贴给 Cline，它会修。

Q：每年要花多少钱？ A：域名 ~$10–15。托管免费（GitHub Pages）。AI API 每月几毛钱到几块钱。总计每年不超过 ¥100。

Q：以后想改内容怎么办？ A：在 VS Code 里打开对应的 .md 文件，改完保存，然后 git add -A && git commit -m "update" && git push。或者直接告诉 Cline：“帮我把 About 页面的第二段改成……"。

链接汇总

资源	链接
Namecheap（域名）	https://www.namecheap.com
Squarespace Domains	https://domains.squarespace.com
VS Code	https://code.visualstudio.com
Cline 插件	https://cline.bot
DeepSeek API	https://platform.deepseek.com
通义千问 API	https://bailian.console.aliyun.com
Hugo	https://gohugo.io
PaperMod 主题	https://github.com/adityatelange/hugo-PaperMod
GitHub	https://github.com
GitHub Pages 文档	https://docs.github.com/en/pages
DNS 检测工具	https://www.whatsmydns.net

写于 2026 年 8 月。如果你跟着做完了，欢迎给我分享你的网站。

Overview: What Are We Building?#

Step 1: Buy a Domain#

Step 2: Install VS Code#

Step 3: Install the Cline Extension#

Step 4: Configure an AI API#

Option A: DeepSeek API (recommended, cheapest)#

Option B: Qwen (Tongyi Qianwen) API#

Step 5: Build the Website#

5.1 Create the Project#

5.2 Add Pages#

5.3 Write Your First Post#

5.4 Customize Styling (Optional)#

Step 6: Local Testing#

Step 7: Deploy to GitHub Pages#

7.1 Create a GitHub Repository#

7.2 Set Up GitHub Actions Auto-Deploy#

7.3 Bind Your Custom Domain#

Step 8: DNS Configuration#

Step 9: Verify & Test#

FAQ#

Link Summary#

总览：我们要做什么？#

第一步：购买域名#

第二步：安装 VS Code#

第三步：安装 Cline 插件#

第四步：配置 AI API#

选项 A：DeepSeek API（推荐，最便宜）#

选项 B：通义千问（Qwen）API#

第五步：搭建网站#

5.1 创建项目#

5.2 添加页面#

5.3 写第一篇文章#

5.4 自定义样式（可选）#

第六步：本地测试#

第七步：部署到 GitHub Pages#

7.1 创建 GitHub 仓库#

7.2 配置 GitHub Actions 自动部署#

7.3 绑定自定义域名#

第八步：DNS 设置#

第九步：验证与网络测试#

常见问题#

链接汇总#