我有一个想法，利用 AI 技术制作高质量游戏。AI 模拟角色应对回复和做出行动。这意味着一种高级的 NPC 的诞生。

你不需要先做复杂网站。先做一个研究型个人主页，重点是内容结构、可读性、可维护性。

1. 推荐技术路线

你的目标是：

ML / 多模态 / 数学 / 量子计算方向的研究型英文公开身份。

所以网站应该像：

researcher homepage；
research notes archive；
project index；
reproducible experiments log；
selected writing portfolio。

不应该像：

炫技前端作品；
个人日记站；
流量博客；
杂乱导航页。

最终推荐：

text

生成器：Quarto
部署：GitHub Pages
域名：username.github.io
源码：GitHub repo
文章格式：.qmd / Markdown
代码：GitHub repositories

GitHub Pages 对用户主页的官方要求是：仓库名必须是 <username>.github.io，例如 octocat.github.io。(GitHub Docs) Quarto 官方也支持发布到 GitHub Pages；最简单的方法是把输出目录设为 docs，然后让 GitHub Pages 从该目录发布。(Quarto)

2. 部署 `username.github.io`：最稳步骤

Step 1：创建仓库

在 GitHub 新建仓库：

text

<你的 GitHub 用户名>.github.io

例如你的 GitHub 用户名是 idler，仓库名就是：

text

idler.github.io

必须完全匹配，且用户名部分要小写。GitHub 官方文档明确要求用户或组织站点使用这种仓库命名。(GitHub Docs)

Step 2：本地创建 Quarto 网站

安装 Quarto 后，在本地执行：

bash

quarto create project website idler.github.io
cd idler.github.io

或者手动创建这些文件：

text

idler.github.io/
├── _quarto.yml
├── index.qmd
├── writing.qmd
├── projects.qmd
├── notes.qmd
├── about.qmd
├── styles.css
└── posts/
    └── 2026-xx-xx-first-note/
        └── index.qmd

Step 3：配置 `_quarto.yml`

建议你从这个配置开始：

yaml

project:
  type: website
  output-dir: docs

website:
  title: "idler"
  site-url: "https://你的用户名.github.io"
  description: "Research notes on machine learning, multimodal models, mathematics, and quantum computing."
  navbar:
    pinned: true
    left:
      - href: index.qmd
        text: Home
      - href: writing.qmd
        text: Writing
      - href: projects.qmd
        text: Projects
      - href: notes.qmd
        text: Notes
      - href: about.qmd
        text: About
    right:
      - icon: github
        href: https://github.com/你的用户名
      - icon: twitter-x
        href: https://x.com/你的用户名
      - icon: linkedin
        href: https://linkedin.com/in/你的用户名

format:
  html:
    theme:
      light: cosmo
      dark: darkly
    css: styles.css
    toc: true
    toc-depth: 3
    toc-location: right
    number-sections: true
    anchor-sections: true
    smooth-scroll: true
    code-copy: true
    code-overflow: wrap

几点说明：

output-dir: docs 是为了让 GitHub Pages 直接从 docs/ 发布，Quarto 官方也把这是最简单方式之一。(Quarto)
navbar.pinned: true 用来让顶栏固定。
toc: true 和 toc-location: right 用来生成右侧目录。
Quarto 支持网站级导航，包括顶部导航栏、侧边栏、组合导航和搜索。(Quarto)
Quarto 的 HTML 输出支持 floating table of contents，适合长文导航。(Quarto)

Step 4：写 `styles.css`

先保持克制。你最需要的是固定顶栏、浮动目录、正文可读性。

css

.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.content {
  font-size: 1.02rem;
  line-height: 1.72;
}

.sidebar nav[role="doc-toc"] {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

.quarto-title-block .quarto-title-banner {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

pre code {
  font-size: 0.9em;
}

code {
  font-size: 0.92em;
}

img {
  max-width: 100%;
}

这比自写前端更稳。你之后只需要逐步微调排版。

Step 5：渲染网站

本地执行：

bash

quarto render

它会生成：

text

docs/
├── index.html
├── writing.html
├── projects.html
└── ...

Step 6：推送到 GitHub

bash

git init
git add .
git commit -m "Initial Quarto website"
git branch -M main
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git
git push -u origin main

Step 7：设置 GitHub Pages

进入 GitHub 仓库：

text

Settings → Pages

选择：

text

Source: Deploy from a branch
Branch: main
Folder: /docs

保存后，访问：

text

https://你的用户名.github.io

GitHub Pages 官方文档也说明可以从分支发布站点。(GitHub Docs)

3. License 怎么放

你的网站会同时包含：

网站源代码；
文章正文；
代码片段；
图片/图表；
项目代码；
可能还有 notebook、数据、模型。

不要全部混成一个 License。

4. 你的网站结构应该怎么设计

我建议你做成这几个页面：

text

Home
Writing
Projects
Notes
About

先不要拆太细。内容多了再拆。

Home

目标：让人 15 秒内知道你是谁、研究兴趣、有什么可看。

结构：

markdown

# idler

CS undergraduate interested in machine learning, multimodal models,
mathematical foundations, and reproducible research.

## Research interests

- Multimodal models
- Representation learning
- Mathematical foundations of ML
- Reproducible ML experiments
- Quantum computing, as a secondary interest

## Selected Writing

- CLIP from First Principles
- LoRA from Scratch
- Linear Algebra Behind Embedding Spaces

## Selected Projects

- TinyCLIP reproduction
- Minimal Vision Transformer
- Multimodal retrieval demo

## Links

GitHub / Hugging Face / X / LinkedIn / Email

Writing

放正式长文：

text

Paper analyses
Technical deep dives
Reproduction reports
Research essays

Projects

每个项目用统一格式：

text

Title
One-line description
Status: active / archived / experimental
Code
Demo
Write-up
Main result

Notes

放较短、较粗糙、持续更新的笔记：

text

Math notes
Quantum notes
Reading notes
Implementation notes

注意：Writing 是精选，Notes 是工作台。
这样可以避免你的主页显得混乱。

About

写简洁：

text

I am a CS undergraduate interested in ML, multimodal models, and mathematical foundations.
I write research notes and build small reproducible experiments.

Contact: ...

不要写太多人生宣言。

5. 可参考的网站：借鉴什么，不借鉴什么

1. `ysymyth.github.io`

Shunyu Yao 的主页非常适合你参考“研究者主页”的信息密度。它开头直接说明身份和研究方向，例如“I am a researcher at OpenAI”以及“I study agents”，然后马上进入 Selected work。(ysymyth.github.io)

你应该借鉴：

text

极简身份介绍
Selected work 优先
每个项目附 paper / repo / blog / bibtex
不做花哨设计
用作品说话

不要借鉴：

text

内容组织过于依赖已有顶级成果
早期本科生照搬会显得空

你的版本应该是：

text

Selected Writing
Selected Projects
Reproductions

而不是一开始就伪装成“已有大量代表作”。

2. Distill

Distill 的核心价值不是网页皮肤，而是文章标准。它自称 dedicated to clear explanations of machine learning，并且大量文章是 peer-reviewed、解释型、可视化强的 ML 文章。(Distill)

你应该借鉴：

text

清晰解释
概念图
数学推导
交互式/可视化思维
高质量标题和摘要
对读者认知路径的设计

不要直接借鉴：

text

复杂前端
编辑部式出版风格
过高制作成本

你已经指出了一个实际问题：长文滚动时目录/顶栏不够方便。你的 Quarto 方案可以通过 pinned navbar + right TOC 改善这一点。

3. Wes McKinney 的《Python for Data Analysis》网站

这个站非常值得参考，因为它是 Quarto 做的大型技术书。网页有章节导航、目录、GitHub 数据与 notebooks 链接；页面也明确说明这个 web version was created with Quarto。(Wes McKinney)

你应该借鉴：

text

长文/书籍式结构
左侧章节导航
右侧 table of contents
代码与数据链接
勘误/更新记录
内容优先于视觉

它还明确区分了内容和代码授权：网站内容通常不得复制或复现，但代码示例是 MIT 许可并在 GitHub/Gitee 提供。(Wes McKinney) 这正好说明：文本和代码可以分开授权。

不要借鉴：

text

一开始就做成完整 online book

你现在更适合做“文章 + notes + projects”，以后内容积累到一定程度，再整理成 book。

6. 一个适合你的站点风格

我建议你的站点定位为：

text

Minimal research notebook + portfolio

不是 blog，不是 CV-only page，也不是 online book。

视觉风格：

text

白底/暗色可切换
固定顶栏
右侧浮动目录
正文宽度适中
数学公式清晰
代码块可复制
项目链接醒目
少颜色
少动画

信息架构：

text

Home
├── Selected Writing
├── Selected Projects
├── Research Interests
└── Links

Writing
├── Paper Analysis
├── Reproduction Reports
├── Technical Deep Dives
└── Essays

Projects
├── Machine Learning
├── Multimodal
├── Math/Visualization
└── Quantum Computing

Notes
├── Math
├── ML
├── Quantum
└── Reading

About

早期文件结构：

text

.
├── _quarto.yml
├── styles.css
├── index.qmd
├── writing.qmd
├── projects.qmd
├── notes.qmd
├── about.qmd
├── posts/
│   ├── 2026-05-clip-from-first-principles/
│   │   └── index.qmd
│   └── 2026-05-lora-from-scratch/
│       └── index.qmd
└── projects/
    └── tinyclip.qmd

7. 首页初稿模板

你可以直接用这个 index.qmd：

markdown

---
title: "idler"
listing:
  contents: posts
  sort: "date desc"
  type: default
  max-items: 5
  categories: true
page-layout: full
---

## About

I am a computer science undergraduate interested in machine learning,
multimodal models, mathematical foundations, and reproducible research.

I write technical notes, paper analyses, and reproduction reports.

## Research Interests

- Machine learning and representation learning
- Multimodal models and vision-language systems
- Mathematical foundations of deep learning
- Reproducible experiments
- Quantum computing as a secondary interest

## Selected Writing

- [CLIP from First Principles](posts/2026-05-clip-from-first-principles/)
- [LoRA from Scratch](posts/2026-05-lora-from-scratch/)
- [Linear Algebra Behind Embedding Spaces](posts/2026-05-linear-algebra-embeddings/)

## Selected Projects

- **TinyCLIP reproduction** — a small-scale image-text contrastive learning experiment.
- **Minimal ViT** — a PyTorch implementation of Vision Transformer components.
- **Multimodal retrieval demo** — an experimental image-text search prototype.

## Recent Notes

::: {#listing}
:::

8. 第一篇文章模板

例如 posts/2026-05-clip-from-first-principles/index.qmd：

markdown

---
title: "CLIP from First Principles"
description: "A technical note on contrastive image-text learning, embeddings, and failure modes."
date: 2026-05-01
categories: [machine-learning, multimodal, contrastive-learning]
license: "CC BY 4.0"
toc: true
number-sections: true
---

## Abstract

This note explains the core mechanism of CLIP-style contrastive learning:
how image and text encoders are trained into a shared embedding space,
what the loss function optimizes, and where the method can fail.

## Prerequisites

- Basic linear algebra
- Cross-entropy loss
- PyTorch basics

## Problem Setup

...

## Method

...

## Implementation Notes

...

## Experiments

...

## Failure Modes

...

## Limitations

...

## References

...

这比“今天我学习了 CLIP”要强很多。

9. 不建议做的事

先不要做：

text

React/Next.js 自写博客
复杂动画
评论系统
访问统计
Newsletter
中英双语全量同步
过度设计 logo
买便宜奇怪域名
照搬别人模板

这些都会把你从研究写作拖进维护成本。

你的目标是：

text

每篇文章可读
每个项目可复现
每个链接可验证
每个页面有明确目的

10. 最终建议

你现在就用这套：

text

站点：username.github.io
框架：Quarto
部署：GitHub Pages
输出目录：docs
顶栏：pinned navbar
目录：right floating TOC
代码 License：MIT
严肃研究代码：Apache-2.0
文章 License：CC BY 4.0，或保守用 All rights reserved
参考风格：ysymyth 的研究主页信息密度 + Distill 的解释质量 + Wes McKinney/Quarto book 的长文导航

你的第一个版本不要追求“像某个大佬的网站”。更合适的目标是：

一个简洁、可信、可长期积累的 early researcher homepage。

1. 推荐技术路线

2. 部署 `username.github.io`：最稳步骤

Step 1：创建仓库

Step 2：本地创建 Quarto 网站

Step 3：配置 `_quarto.yml`

Step 4：写 `styles.css`

Step 5：渲染网站

Step 6：推送到 GitHub

Step 7：设置 GitHub Pages

3. License 怎么放

推荐方案

网站源码

研究代码仓库

文章正文

在网站 footer 写清楚

4. 你的网站结构应该怎么设计

Home

Writing

Projects

Notes

About

5. 可参考的网站：借鉴什么，不借鉴什么

1. `ysymyth.github.io`

2. Distill

3. Wes McKinney 的《Python for Data Analysis》网站

6. 一个适合你的站点风格

7. 首页初稿模板

8. 第一篇文章模板

9. 不建议做的事

10. 最终建议

1. 推荐技术路线 ​

2. 部署 username.github.io：最稳步骤 ​

Step 1：创建仓库 ​

Step 2：本地创建 Quarto 网站 ​

Step 3：配置 _quarto.yml ​

Step 4：写 styles.css ​

Step 5：渲染网站 ​

Step 6：推送到 GitHub ​

Step 7：设置 GitHub Pages ​

3. License 怎么放 ​

推荐方案 ​

网站源码 ​

研究代码仓库 ​

文章正文 ​

在网站 footer 写清楚 ​

4. 你的网站结构应该怎么设计 ​

Home ​

Writing ​

Projects ​

Notes ​

About ​

5. 可参考的网站：借鉴什么，不借鉴什么 ​

1. ysymyth.github.io ​

2. Distill ​

3. Wes McKinney 的《Python for Data Analysis》网站 ​

6. 一个适合你的站点风格 ​

7. 首页初稿模板 ​

8. 第一篇文章模板 ​

9. 不建议做的事 ​

10. 最终建议 ​

1. 推荐技术路线

2. 部署 `username.github.io`：最稳步骤

Step 1：创建仓库

Step 2：本地创建 Quarto 网站

Step 3：配置 `_quarto.yml`

Step 4：写 `styles.css`

Step 5：渲染网站

Step 6：推送到 GitHub

Step 7：设置 GitHub Pages

3. License 怎么放

推荐方案

网站源码

研究代码仓库

文章正文

在网站 footer 写清楚

4. 你的网站结构应该怎么设计

Home

Writing

Projects

Notes

About

5. 可参考的网站：借鉴什么，不借鉴什么

1. `ysymyth.github.io`

2. Distill

3. Wes McKinney 的《Python for Data Analysis》网站

6. 一个适合你的站点风格

7. 首页初稿模板

8. 第一篇文章模板

9. 不建议做的事

10. 最终建议