50 分钟搞定个人主页:Fork 模板 + GitHub Pages + Quarto 完整教程

👇 连享会 · 推文导航 | www.lianxh.cn

连享会：2026AI-Agent专题 · 线上时间：6月20-21日嘉宾：李学恒 (中山大学)咨询：王老师 18903405450（微信）

温馨提示: 文中链接在微信中无法生效。请点击底部「阅读原文」。或直接长按/扫描如下二维码，直达原文：

作者： 连小白 (连享会)邮箱：lianxhcn@163.com

说明：本文撰写过程中使用了 AI 辅助工具，详情参见 ChatGPT 对话。
按照本文的操作方法，你大概需要 50 分钟就可以完成个人主页的搭建，风格如下。

主页地址：https://lianyujun.github.io
github 仓库：https://github.com/lianyujun/lianyujun.github.io

1. 为什么你需要一个个人主页？

可能是中国传统文化的影响，多数国内的孩子都比较内敛。通常是到了找工作的时候才会做一份简历来展示知己，至于个人主页，基本是没有的。相比之下，不少在境外读书的学生，好早就建立了自己的个人主页，甚至是个人网站，展示自己的摄影作品、程序，甚至是一些日常博客。这有助于培养写作和深度思考习惯，也是一种分享行为，不经意间就逐渐建立起了自己的网络声誉。

经过这段时间的对比，我发现使用 Quarto + Github pages 这个工具组合，可以轻松实现个人主页的制作和发布。全程无需任何费用，也不需要学习复杂的 HTML 知识。只需要花几分钟掌握 Markdown 基本语法，Fork (克隆) 一个你中意的个人主页模版，然后修改成自己的信息即可。后期维护和更新和非常方便。

我测试了一下，按此流程，制作一个个人主页，大概需要 50 分钟，非常便捷。

在当前的学术与职业环境中，无论你是一位博士生、青年教师、硕士求职者，甚至是本科高年级学生，我都强烈建议你尽早建立一个属于自己的个人主页。个人主页就像你的 “在线名片”，它能够集中展示你的身份、研究兴趣、项目成果、发表论文和教学经验，并且可以长期保留、方便分享，是你“数字身份”的核心部分。

与 PDF 简历、微信文章以及 Google/百度学术主页不同，个人主页具有以下优势：

它是长期稳定的，不会因为一次推送而淹没；
它是可搜索的，别人只要搜你的名字、机构或研究领域，很容易找到；
它是结构清晰、可维护的，你可以随着科研和职业经历的变化随时更新内容；
它是可以链接各种平台的，比如你的 Google Scholar、ORCID、GitHub、微信公众号、知乎专栏、B 站主页等。

从招聘者的角度来看，一个结构清晰、信息完整的主页会显著提升你的可信度和专业形象；从合作者或评审者的角度来看，个人主页也是快速了解你背景与研究成果的最佳入口。

尤其对于刚起步的研究者而言，与其等期刊发表、论文被检索，不如先做好自己能控制的第一步——建立一个简单而清爽的个人主页。这不需要你掌握 HTML、CSS 或 JavaScript，只需要掌握基本的 Markdown 和一个免费工具链：Quarto + GitHub Pages。

2. 为什么选择 GitHub Pages + Quarto？

你可能会问，创建个人主页的方式有很多，为什么我们推荐用 GitHub Pages 和 Quarto？

原因很简单：免费、稳定、学术友好、扩展性强、维护成本低。 它是一个非常适合初学者、尤其是研究人员使用的方案。

A. GitHub Pages 的优势

免费托管，无需服务器和域名：GitHub Pages 是 GitHub 提供的静态网站托管服务，个人项目可免费无限使用。
无需维护，自动部署：只要把你的网站代码 push 到 GitHub 仓库，GitHub Pages 会自动部署最新版本，不需要你配置服务器、FTP 或 CI 工具。
默认域名格式清晰：当你的仓库命名为 yourusername.github.io 时，GitHub 会自动将其发布到 https://yourusername.github.io，适合作为你的永久主页地址。
与学术生态兼容良好：现在很多导师、实验室、开源项目也都托管在 GitHub 上，一个 GitHub Pages 主页更容易被学术搜索引擎收录和识别。

B. Quarto 的优势

面向科研用户设计：Quarto 是 RStudio（Posit）开发的文档编译系统，是 R Markdown 的进化版本。它专门为学术用户服务，支持论文、博客、演示、网站等多种格式。
支持 Markdown + 代码块 + 数学公式 + 文献引用：你可以在主页中自然地插入 LaTeX 数学公式、R 或 Python 分析代码，甚至支持交互式图表（如 plotly、leaflet）。
不需要掌握前端技术：不需要写 HTML/CSS/JS，只需用 Markdown 写内容，用 YAML 写配置。
可视化写作体验好：配合 VS Code 和 Quarto 插件，可以一键预览、调试和发布网站，初学者也能快速上手。

C. GitHub + Quarto 的组合：完美适配

GitHub 提供平台与发布，Quarto 负责内容与样式渲染。两者的结合，让你可以像写论文一样写网站，像 push 代码一样更新主页。最重要的是，几乎所有内容都可以复用已有模板，从 fork 开始构建你自己的主页，最大程度地降低学习成本。

ps，在写这篇推文的过程中发现，just-the-docs 也是一个不错的制作个人主页的工具。虽然功能没有本文介绍的方案齐全，但如果你只是展示静态信息（如个人简介、研究方向、联系方式等），它是一个非常简洁的选择。

3. 环境配置与前期准备

在动手制作主页之前，我们需要配置一套简单但功能齐全的工具环境。以下是推荐的工具组合：

GitHub 账号：主页将托管在 GitHub Pages 上，需要注册一个 github 账号。
GitHub Desktop（推荐）：用于管理仓库、同步网页内容，免除命令行操作。
VS Code 编辑器：下载并安装 VScode 编辑器，用于 Markdown 写作。VScode 支持多种插件。参见 VScode 插件：安装、配置和使用。
Quarto CLI 工具（quarto.org）：负责将 .qmd 文件编译为网页。
VS Code 插件：

Markdown 插件：建议安装 Markdown All in One 和 Markdown Preview Enhanced，提供语法高亮、预览等功能。详情参见 VScode：实用 Markdown 插件推荐。
Quarto 插件：安装 Quarto VS Code Extension，用于编写和渲染 Quarto 文档。

安装完成后，可以按快捷键 Ctrl + ~ 打开控制台，运行 quarto check 命令，以检查环境是否配置成功。

4. 操作流程概览

要快速构建你的个人主页，最简单的方法是基于一个已有的模板进行修改。你不需要从头开始，只需要 Fork 一个模板，然后定制你自己的内容。这样，你可以快速搭建主页框架，节省大量的时间。接下来，我将概述你需要做的基本步骤，并在 Section 5 中为你提供更详细的操作演示。

4.1 Fork 并克隆模板

选择模板：在 GitHub 上找到一个适合你需求的模板。例如，参考 lianyujun.github.io 或其他模板库。模板可以根据个人需求进行选择，简洁型或内容丰富型都有。
Fork 仓库：登录你的 GitHub 账号，打开你选中的模板页面，点击页面右上方的 Fork 按钮，将模板复制到你自己的 GitHub 仓库中。
克隆到本地：使用 GitHub Desktop 或 Git 命令行工具将刚才 Fork 的仓库克隆到你的本地计算机中。

4.2 修改主页内容

在克隆并打开仓库之后，你可以开始修改主页的内容：

修改 index.qmd 文件：主页的核心文件，你可以在其中添加个人信息、头像、联系方式等内容。使用 Markdown 格式，简单易懂。
修改 _quarto.yml 文件：这是 Quarto 的配置文件，你可以在其中修改网站的标题、菜单项、导航栏样式等。你也可以在此文件中设置网站的输出路径，指定自定义样式或主题。
更新其他 .qmd 文件：你可以根据需要修改其他页面内容，如 publications.qmd（学术成果）、blog.qmd（博客文章）等，来展示你的研究、项目和文章。
替换图片：在 images/ 文件夹中，上传并替换默认的头像、网站 logo 或其他图片。

4.3 渲染和本地预览

一旦你完成了内容修改，下一步是编译渲染页面并预览：

运行 quarto render 命令：在 VS Code 中打开终端（Ctrl + ~），然后运行命令：
```
quarto render
```
该命令会将你的 .qmd 文件转换为 HTML 页面，输出到 docs/ 文件夹。
本地预览：在 docs/ 文件夹中，找到 index.html 文件，双击打开，即可在浏览器中查看渲染后的效果。

4.4 推送到 GitHub 并部署

提交更改：使用 GitHub Desktop 或命令行工具将本地更改提交到 GitHub 仓库。
配置 GitHub Pages：

打开 GitHub 仓库页面，点击 Settings → Pages；
选择 main 分支，设置 /docs 文件夹作为发布目录。

完成设置后，几分钟后，你的个人主页将正式上线，网址为 https://yourusername.github.io。

5. 完整实例：我的主页制作流程

以上步骤概述了如何 Fork 模板并进行基本的定制，本节将以我的个人主页创建过程为例，l帮助你更好地理解如何进行内容修改和网站部署。

我的 Github 个人主页是基于 Chi Zhang 的主页修改而成的。我做了很多简化，以确保我的主页简洁明了。最终的主页只包含 7 个静态页面 (每个页面由一个普通的 .qmd 文件构成)。

你可以按照如下流程，通过 Fork lianyujun.github.io 仓库，稍作修改后形成你的个人主页。

Step 1: Fork 主页模板

登录你的 Github 账号 (yourusername)，访问我的个人主页仓库 lianyujun/lianyujun.github.io
点击右上方的 Fork 按钮 (或直接点击 Use this template 按钮)，将该仓库复制到自己的账号下。注意：

仓库名称 (Repository name*) 必须为 yourusername.github.io，这样才能自动部署为你的主页；
仓库描述可以写上你的个人介绍，如 xxx's personal page 或 xxx 的个人主页

使用 GitHub Desktop 将该仓库克隆到本地。参见 GitHub Desktop 的使用说明。更详细的介绍参见：官方使用指南。

Notes：如果你有多个 Github 账号，请确保在 GitHub Desktop 中切换到正确的账号 (依次点击 Github Desktop 界面的 File → Options → Accounts → Sign Out/In，按根据提示切换账号即可)。

Step 2: 修改内容文件

首先，你需要使用 GitHub Desktop 将该仓库克隆到本地。参见 GitHub Desktop 的使用说明。更详细的介绍参见：官方使用指南。

我将该仓库克隆到 D:\github_lianyujun 目录下，最终的仓库路径为 D:\github_lianyujun\lianyujun.github.io
注意，如果你有多个 Github 账号，请确保在 GitHub Desktop 中切换到正确的账号 (依次点击 Github Desktop 界面的 File → Options → Accounts → Sign Out/In，按根据提示切换账号即可)。

接下来，你需要更新主页的内容文件。打开 VS Code，载入该仓库 (File → Add Folder)，修改以下文件：

修改 index.qmd 文件，添加个人介绍、教育背景、研究方向；
替换 images/ 文件夹中的头像为自己的照片；
修改 _quarto.yml 文件，设定站点标题、导航栏菜单；
修改 publications.qmd、blog.qmd 等页面，填入个人论文与博客文章；

你也可以使用中文文件名，或新增一些页面，但需要将它们添加到 _quarto.yml 的导航栏中。

修改过程中的具体信息说明如下：

总体说明：

index.qmd 是主页的主要内容文件，
_quarto.yml 是配置文件，定义了网站结构和样式。这两个文件都需要根据你的个人信息酌情修改。
其它 .qmd 文件是各个子页面的内容文件，如 publications.qmd、blog.qmd 等，可以直接在 VScode 中按照 Markdown 语法格式编辑即可。

lianyujun/lianyujun.github.io 仓库的文件结构如下：

lianyujun.github.io基本文件：├── readme.md                # 仓库说明├── index.qmd                # 主页内容├── _quarto.yml              # Quarto 配置文件（导航栏、主题、输出路径等）├── styles.scss              # 自定义样式（可选，可以自行修改）├── images/                  # 文件夹：存放头像和网页 logo 等图片个人信息页面：├── blog.qmd                 # 博客文章列表页面├── books.qmd                # 阅读/推荐书籍页面├── chinese.qmd              # 中文内容页面├── codes.qmd                # 代码资源页面├── publications.qmd         # 学术成果页面├── teaching.md              # 教学资源页面生成的网站：├── docs/                    # 文件夹：渲染生成后的网页目录，用于部署到 GitHub Pages其他配置信息├── site_libs/               # Quarto 构建生成的支持库（可忽略）├── _extensions/             # Quarto 扩展插件目录（如 webr，可以忽略）├── license                  # 版权声明└── _freeze/                 # Quarto 自动管理的中间结果缓存（可忽略）

index.qmd 是主页的主要内容文件，包含个人介绍、研究方向等信息。你可以在其中添加 Markdown 格式的文本、图片、链接等。头部信息

_quarto.yml 是 Quarto 的配置文件，定义了网站的结构、导航栏、主题等。你可以在其中修改网站标题、副标题、菜单项等。

project:type:website# 项目类型设定为网站（website）output-dir:docs# 编译后输出到 docs 文件夹（GitHub Pages 默认部署目录）website:page-navigation:true# 启用页面内的导航功能（如下一页、上一页）title:"Yujun Lian"# 网站标题，将显示在浏览器标题栏和导航栏左侧site-url:https://lianyujun.github.io# 网站的完整网址（用于生成 sitemap 和 SEO）favicon:images/site-logo.png# 网页图标（浏览器标签页显示的小图标）repo-url:https://github.com/lianyujun/lianyujun.github.io# 关联的 GitHub 仓库地址repo-actions:[edit,issue]# 页面右上角显示 "Edit this page" 和 "Report issue" 链接page-footer:# 网页底部信息left:|# 左侧内容，可使用 Markdown 格式[lianxh.cn](https://www.lianxh.cn)<br>right:|# 右侧内容Madewith[Quarto](https://quarto.org/)<br>navbar:# 顶部导航栏设置background:"#A9CCE3"# 设置导航栏背景色（十六进制颜色码）search:true# 启用全站搜索功能（右上角搜索框）right:# 导航栏右侧菜单项-text:"Home"# 首页链接href:index.qmd-text:"Publications"# 学术成果页href:publications.qmd-text:"Books"# 推荐书单页href:books.qmd-text:"Blogs"# 博客文章页href:blog.qmd-text:"Codes"# 代码资源页href:codes.qmd-text:"中文"# 中文内容页面href:Chinese.qmd-text:"CV"# 简历 PDF href:CV.pdfformat:html:theme:styles.scss# 自定义主题样式，引用本地 SCSS 文件toc:true# 启用侧边目录（Table of Contents）toc-position:right# 目录位置设为右侧toc-depth:3# 设置目录的最大层级（H3 级标题）

Step 3: 渲染网页并预览

在 VSCode 中按快捷键 Ctrl + ~ 打开终端，依次执行如下命令：

切换到项目根目录。命令为 (路径为你的仓库所在文件夹)：
```
cd D:\github_lianyujun\lianyujun.github.io
```
渲染网页。执行如下命令：
```
quarto render
```
该命令会将 .qmd 文件编译为 HTML 网页，输出到 docs/ 文件夹中。
20250718173551
预览网页。生成的网页位于 docs/ 文件夹下，双击 index.html 即可本地浏览。

Step 4: 部署上线

上一步完成后，docs/ 文件夹下已经生成了你的个人主页的的完整 HTML 文档 (本地文档)，你可以将其部署到 GitHub Pages 上，以便其他人访问。

将本地文件推送到远程仓库。

在 GitHub Desktop 中，填写备注信息，然后点击 Commit to main 提交更改；
然后点击 Push origin 将更改推送到 GitHub。

在 GitHub 远程仓库中设置 GitHub Pages：

打开你的仓库页面，点击 Settings；
在左侧菜单中选择 Pages；
在 Source 部分，选择 main 分支，并设置 /docs 目录作为发布目录；
点击 Save 保存设置。

等待几分钟后，你就可以通过 https://yourusername.github.io/ 访问自己的个人主页了。我的主页地址是 https://lianyujun.github.io/，页面内容就是大家在推文开头部分看到的效果。

Step 5：在你的 github 仓库中显示个人主页地址

为了让其他人更容易找到你的个人主页，你可以在 GitHub 个人主页仓库的介绍信息中添加主页链接：

打开 GitHub 个人主页仓库 lianyujun/lianyujun.github.io，点击右上方设置按钮 (齿轮形状)。
在弹出的对话框中，找到 Website 一栏，勾选 Use your GitHub Pages website，你的个人主页地址将自动填入。Note：如果你使用的是自定义域名，可以在这里填写你的域名。
点击 Save Changes 保存设置。

Step 6：更新与维护

若需更新，可以先在本地修改 index.qmd、_quarto.yml 等文件，然后按照 Step 3 的方法重新执行 quarto render 命令编译网页，最后在 GitHub Desktop 中提交并推送更改即可。

6. 进一步扩展与美化

在成功部署基础主页之后，你可以根据自己的需求，对页面结构、内容模块、功能样式进行进一步扩展。Quarto 提供了极强的灵活性和模块化设计，便于维护和美化。

A. 使用分类与标签管理博客内容

Quarto 支持为每篇博客文章添加 categories: 和 tags: 字段。
可以自动生成分类页或标签云页面，便于导航。
详情参见 chizapoth.github.io (github)。

B. 使用交互式图表或嵌入代码输出

Quarto 支持 R、Python、Julia 等语言嵌入代码块，输出图表。
比如在 projects.qmd 中嵌入 matplotlib、plotly 的代码与图表展示。
参见 Kazuyuki Nagimoto 主页中 Research Workflow with Quarto + {targets} 页面 (点击此处查看对应的 .qmd 文档)。

C. 绑定自定义域名（可选）

如果你购买了自己的域名（如 .com），可在 GitHub Pages 的设置中绑定该域名，并将 DNS 指向 GitHub 的 IP 地址。如 Kazuyuki Nagimoto 主页。
然后在仓库根目录添加一个 CNAME 文件，内容为你的域名（如 www.mydomain.com），GitHub 会自动配置 HTTPS 证书。

7. 优秀模板示例

如果你希望学习得更深入，这里是一些推荐资料和 Quarto 主页的优秀示例，可供模仿或参考。

官方教程与文档

Quarto 官方网站：https://quarto.org/docs/
创建 Quarto 网站教程（Sam Csik）：网页，GitHub

风格各异的模板推荐

模板地址	简介
chizapoth.github.io	清爽明快，栏目清晰，适合学生
valegiunchiglia.github.io	简洁两栏布局，适合展示 CV
vbaliga.github.io	纯文字型结构，最小化设计
drganghe.github.io	支持多目录、内容丰富，适合实验室或项目组主页
samanthacsik.github.io	多栏布局，右侧关键词导航
kazuyanagimoto.com	美观大气，但后台复杂，不推荐初学者

更多模板可以在 GitHub 上搜索 .github.io + quarto + personal 得到，参见 GitHub 搜索结果。

8. 相关推文

Note：产生如下推文列表的 Stata 命令为：lianxh quarto github 个主页 VScode , md nocat ex(搜索资源金融命令交互)安装最新版 lianxh 命令：ssc install lianxh, replace

初虹, 2022, Markdown-LaTeX：经管人的VSCode配置大全, 连享会 No.1004.
初虹, 2024, 让「记录」变得简单：Markdown使用详解, 连享会 No.1456.
左祥太, 2022, 如何搭建个人主页-GitHub / Gitee, 连享会 No.1005.
李原, 2024, 使用 Quarto 打造你的个人主页, 连享会 No.1338.
杨涵慧, 2024, 如何使用Github创建你的个人主页？, 连享会 No.1337.
王胜文, 2023, VScode编辑器：常用快捷键-Markdown专题, 连享会 No.1174.
范思妤, 2022, GitHub中最受欢迎的Stata仓库, 连享会 No.1022.
连享会, 2024, AI编程助手大盘点：不止ChatGPT和Copilot, 连享会 No.1394.
连享会, 2020, 在 Visual Studio (vsCode) 中使用正则表达式, 连享会 No.10.
连小白, 2025, vscode.dev：在线版 VScode 使用指南, 连享会 No.1620.
连玉君, 2023, Stata编程：快速查找Stata代码片段, 连享会 No.1319.
连玉君, 2024, VScode插件：安装、配置和使用, 连享会 No.1490.
连玉君, 2024, VScode：实用 Markdown 插件推荐, 连享会 No.1390.
连玉君, 2024, 从基础到 AI 助手：Python 用户最爱的 VScode 插件清单, 连享会 No.1489.
连玉君, 2025, 无法下载github仓库中的数据？网页跳转的原理与 Stata、R、Python 解决方案, 连享会 No.1628.
连玉君, 2021, 用VScode正则表达式转换Markdown和LaTeX链接, 连享会 No.839.
郝亮, 2025, Quarto 助力论文和讲义撰写, 连享会 No.1592.
黄晨晨, 2023, Stata：利用Stata生成动态文档-Quarto, 连享会 No.1304.

连享会微信小店上线啦！

Note：扫一扫进入“连享会微信小店”，你想学的课程在这里······

New！ Stata 搜索神器：lianxh 和 songblGIF 动图介绍搜：推文、数据分享、期刊论文、重现代码 ……👉 安装：. ssc install lianxh. ssc install songbl👉 使用：. lianxh DID 倍分法. songbl all

🍏 关于我们

连享会 ( www.lianxh.cn，推文列表) 由中山大学连玉君老师团队创办，定期分享实证分析经验。
直通车： 👉【百度一下：连享会】即可直达连享会主页。亦可进一步添加「知乎」,「b 站」,「面板数据」,「公开课」等关键词细化搜索。