第一次看到“helloyaren”这个名字的时候我脑子里蹦出来的第一行代码是 hello world。紧接着冒出的问题是yaren 是什么我不认识这个单词但它读起来像人名也像某种技术代号。顺着这个思路往下想我基本可以确定一个叫 Yaren 的开发者或者一个代号为 Yaren 的项目正打算用一句“你好”向世界打个招呼。这种命名习惯在个人项目里特别常见——没有宏大叙事就是告诉别人“我来了”。“helloyaren”能做的事情比名字看起来要大得多。把它落成产品它就是一套个人名片一个承载履历、作品、文字和代码的个人站点把它当成工程它就是一条完整的个人IP流水线从起名、建站、部署、开源、写作到被搜索到每一步都有明确的技术选择。想给自己搭一个作品集的程序员想把零散经验沉淀下来的技术博主甚至刚毕业准备找工作的同学都会从这里拿走一套可以直接照搬的搭法。下文我就按照平时自己搭个人项目的顺序把这个过程完整拆开先从命名和定位聊起再把域名、建站工具、托管平台这些选型讲清楚接着给出一份能直接跑的部署流程最后分享我踩过的坑和这几年积累下来的实操经验。1. 先读懂helloyaren这个项目到底在做什么1.1 为什么是“hello”和“yaren”的组合hello 是几乎所有程序员写下的第一行代码它代表开始、连接和问候。yaren 像一个昵称、一个品牌词也可能是一个还没有被解释清楚的产品名。两者拼在一起天然就有一种“首次亮相”的味道特别适合个人站点、作品集、开源项目首页这类场景。我对这种命名一直很认可。一个好的个人项目名不需要解释三分钟它应该在第一次被看到时就传递出两层信息第一这是一个人的项目第二这是一个还处于生机勃勃阶段的项目。“helloyaren”两个词都很短能拼读好记忆域名也好注册这些都踩在了我给项目起名的标准线上。相比之下“my-personal-site-2024”这种名字又长又没有识别度等你想把它写到简历上的时候会发现一点职业感都没有。如果你也想给自己做一个类似的项目我建议先别急着写代码花一个晚上把名字定下来。名字决定了你之后所有内容、仓库、域名、社交账号的统一前缀。yaren 这种短词特别好用因为它大概率不会跟 npm 包、GitHub 用户名、域名这些关键资源撞车能省掉后面很多改名的麻烦。1.2 个人项目解决的核心痛点很多人觉得“个人项目”就是放一个博客写点碎碎念没什么用。但以一个从业者的视角看helloyaren 这类项目解决的是三个非常实际的痛点。第一个痛点是信息散落。你的简历是一份文档代码散在 GitHub 和 GitLab文章发在好几个平台作品截图躺在手机相册里。当别人想了解你的时候他要在十几个地方翻来翻去。个人站点就是把这些信息统一收口的地方一个域名解决所有“这个人到底做过什么”的问题。第二个痛点是简历单薄。面试官看简历通常只有几十秒但如果你附上一个 helloyaren 这样的个人主页里面有可访问的项目、看得见的代码、读得下去的文字他对你的判断会快很多。真实可点开的作品比简历上任何一句“熟练掌握”都有说服力。第三个痛点是成长不可见。我见过太多人做了一堆东西但因为从来不留记录半年后连自己当初怎么写出来的都忘了。个人项目的隐藏价值是它天然带着日志属性你每一篇文章、每一次提交、每一个项目说明都是给未来的自己留的底稿。时间越长这个资产越值钱。1.3 适合谁以及每个人可以从里面拿到什么helloyaren 这样的项目我按三类人来推荐。第一类是程序员尤其是一到三年经验的开发者。你们最需要的是一个能持续生长的作品集。把平时做的小工具、实验、接私活的作品整理到个人站点上比单纯刷题管用得多。第二类是技术写作者和内容创作者。你们需要一个不依赖任何平台的后花园平台可以改规则域名却永远是你自己的。第三类是准备进入职场的毕业生个人项目哪怕还不太成熟只要有一个能打开的原型和清晰的实现思路就已经让简历生动起来了。说白了helloyaren 不是一个“给别人看的产品”它是一套记录你成长的基础设施。基础设施这种东西越早建越划算。2. 动手前的方案选型域名、工具、托管平台一次定下来2.1 域名怎么选才不后悔域名是个人项目的门牌号我见过不少人在这一步反复折腾。关于选域名我的经验可以压缩成三条。第一条越短越好能拼读最重要。比如 yaren.dev、yaren.me、heylarenyaren.com 这类都比一长串拼音缩写要好。第二条后缀上不必死磕 .com个人项目用 .dev、.me、.io 都很好反而更有个性。.com 如果已经被注册或者价格虚高就果断放弃别为域名溢价买单。第三条注册后第一时间开启自动续费域名过期后被人抢注的教训真的不想再看到第二次。另外给一个实用的建议域名注册的 service 和 DNS 解析可以分开域名放在注册商解析托管到 Cloudflare 这类免费 DNS 上。好处是以后万一想换主机对线上服务的影响小得多而且 Cloudflare 还能顺带提供免费的 CDN 和 HTTPS 支持个人站点完全够用。2.2 建站工具对比Hugo、Hexo、VitePress 谁更顺手个人站点是展示型站点内容以文本和图片为主完全不需要上 WordPress 这种带数据库的动态系统。静态站点生成器是更合适的路线它把整站生成一堆 HTML 文件扔到任意托管平台就能跑速度快、免维护、成本低。我用过好几个静态生成器给你一组实用对比。工具核心特色适合谁需要注意Hugo单二进制、构建极快、模板丰富想要简单快速出站不想维护一堆 Node 依赖的人模板语法偏老需要花半小时熟悉Hexo老牌、Node 生态、中文资料多习惯 JavaScript、博客型内容为主的人依赖较多Node 升级后偶有兼容问题VitePressVue 驱动、文档站体验好前端开发者喜欢简洁 UI后续可能要写文档面向文档优化做个性化站点需要自己扩展我的建议是如果只想“搭一个正经的个人站点”优先选 Hugo。原因很现实它没有一堆 npm 包要维护升级就是换一个二进制文件构建速度在内容量不大时几乎是瞬间完成而且主题市场非常丰富。如果你是前端后面想把个人站点同时作为组件库的文档站来用那 VitePress 更顺手。选型没有绝对的对错关键是想清楚一年之后你愿不愿意继续维护它。维护成本越低你越能坚持下来。2.3 托管平台对比GitHub Pages、Vercel、Netlify 怎么选静态站点生成好了还需要一个地方让它 24 小时在线。托管平台的选择我同样按常见方案做了对比。平台优点限制推荐场景GitHub Pages免费、和代码仓库无缝、自带 CDN 和 HTTPS只适合静态内容构建能力有限月流量约 100GB个人作品集、博客最省心Vercel对前端工程化支持好、自动预览部署国内访问偶尔不稳定有前端构建需求或需要部署一些 Serverless 函数Netlify功能全面支持表单、重定向、分阶段发布免费额度对个人够用但冷启动稍慢希望有更多站点管理能力的人我个人最推荐个人静态站点用 GitHub Pages。理由很简单你的代码本来就在 GitHub推送后自动部署一条龙不需要额外注册平台也不用把构建权限交给第三方。它对个人项目来说一直是够用的最大的流量限制对普通博主来说基本触碰不到。2.4 站点内容架构首页、关于页、项目页、博客页网站选好了工具真正决定体验的是内容结构。我见过不少个人站点一进去是一堆炫酷动画翻了半天不知道这个人是谁。个人站点的内容组织最稳的是四件套首页、关于页、项目页、博客页。首页要做的事只有一件三秒钟内告诉访客你是谁、你做什么、你最值得看的东西在哪。一句话介绍加一个最重要的项目入口就够了别堆花哨的东西。关于页写真实的经历和兴趣不要写“热爱技术、乐观开朗”这种谁都会写的句子写你具体做过的东西反而更打动人。项目页是核心竞争力每条项目写清楚背景、解决的问题、用到的技术栈、取得了什么结果附上链接。博客页则是思考的沉淀区不在乎篇数多而在于每一篇是否真的讲清楚了一件事。这个结构的好处是它让每一个访客都能按需找到信息。面试官看项目页同行看博客好奇你的人看关于页。各取所需互不干扰。3. 从空白到上线helloyaren 完整部署实录3.1 本地初始化Hugo 建站与第一篇博客选 Hugo 之后本地初始化其实非常快。先到 Hugo 的 GitHub Releases 页面下载对应你操作系统的版本macOS 用户可以用 brew install hugoWindows 用户可以用 winget install Hugo.Hugo.Extended。安装完成后打开终端确认版本。hugo version然后创建一个新站点我把它叫做 hello-yaren方便和用户名区分。hugo new site hello-yaren cd hello-yaren这个命令会帮你生成一个完整的目录骨架包括 content、layouts、static、config 等文件夹。接下来是安装主题。到 themes.gohugo.io 找一套干净的主题用 git clone 把主题放进来然后修改配置文件。Hugo 的配置文件现在已经统一叫 hugo.toml在站点根目录下。一个最小可用的配置长这样baseURL https://yaren.dev/ title Helloyaren theme 你的主题名 [menu] [[menu.main]] name 关于 url /about/ [[menu.main]] name 项目 url /projects/ [[menu.main]] name 博客 url /posts/注意 baseURL 不要留默认值它直接决定了生成页面里的绝对链接。如果忘记改后面部署起来会出现样式丢失或链接指向 localhost 的问题。然后创建第一篇文章hugo new posts/hello-world.md hugo server -D浏览器打开 http://localhost:1313就能看到站点已经跑起来。这里的 -D 意思是显示草稿方便你在本地预览还没有发布的内容。3.2 自动发布GitHub Actions 一次配置永久省心本地能预览只是第一步真正让 helloyaren 上线需要推送到 GitHub并让 Pages 自动部署。早期做法是在本地手动执行 hugo 命令生成 public 目录再推到仓库的 gh-pages 分支麻烦且容易出错。现在推荐直接用 GitHub Actions配置一次之后你只要 git push 代码剩下的事情全自动。先把仓库建好名称随意比如 hello-yaren然后把本地代码推送上去。接着进入仓库的 Settings → Pages把 Source 改成 GitHub Actions。然后在仓库根目录创建 .github/workflows/deploy.yml内容可以参考下面这份name: Deploy Hugo site on: push: branches: [main] permissions: contents: read pages: write id-token: write concurrency: group: pages cancel-in-progress: true jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/configure-pagesv4 - name: Setup Hugo run: | wget https://github.com/gohugoio/hugo/releases/download/v0.124.1/hugo_extended_0.124.1_linux-amd64.tar.gz tar -xzf hugo_extended_0.124.1_linux-amd64.tar.gz sudo mv hugo /usr/local/bin/ - name: Build run: hugo --minify - uses: actions/upload-pages-artifactv3 with: path: ./public deploy: needs: build runs-on: ubuntu-latest environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - id: deployment uses: actions/deploy-pagesv4这里有一个很多新手会踩的坑Workflow 里下载的 Hugo 版本要和你本地的完全一致。我用的是 v0.124.1你本地可能是更新的版本版本不一致会导致同一套代码构建出完全不同的结果。所以在 workflow 里把版本号写死并和本地 hugo version 输出的版本保持一致能少掉很多“本地好好的线上白屏”的诡异问题。推送之后到仓库的 Actions 标签页会看到一次构建正在跑。第一次跑完GitHub Pages 就会给你一个 username.github.io/hello-yaren 这样的地址。到这里helloyaren 已经是个能在公网被访问的站点了。3.3 绑定自定义域名与 HTTPS 配置拿到默认的 GitHub Pages 地址后如果可以绑定自己的域名会专业很多。绑定流程分三步在仓库 Settings → Pages 里填入你的自定义域名在 DNS 服务商那边加一条 CNAME 记录然后在站点根目录放一个 CNAME 文件。CNAME 文件内容很简单就是你的域名yaren.devGitHub Pages 支持在仓库中直接提交这个 CNAME 文件每次部署它都会被自动识别。DNS 记录要看你的域名类型。如果用的是 www.yaren.dev 这类子域加一条 CNAME 指向 username.github.io 即可。如果要用 yaren.dev 这种裸域需要到 DNS 服务商添加 A 记录指向 GitHub Pages 的四个 IP 地址。我的建议是个人站点优先用 www 子域或一个短子域裸域配置虽然也能做但不同 DNS 服务商的规则差异大没必要一上来就给自己找麻烦。HTTPS 不用担心。GitHub Pages 对自定义域名有自动的证书签发与续期你绑定完域名之后等几个小时再看Settings 里的 Enforce HTTPS 就可以开启了。这里需要提醒一句证书签发需要时间刚绑定完就急着看页面的确会显示不安全等几个小时就好了这属于正常现象。3.4 让搜索引擎找到你的站点很多人搭完站就完了从来不主动让搜索引擎知道它的存在导致半年过去站点根本搜不到。个人站点的自然流量来源搜索引擎是最大的一块所以这一步必须做。Hugo 默认会自动生成 sitemap.xml位置在 /sitemap.xml里面列出了所有页面。你只需要到 Google Search Console 和 Bing Webmaster Tools 里验证站点所有权并提交 sitemap 即可。百度搜索资源平台对于访问量不大的个人站点优先级可以往后放。顺带地说robots.txt 也要有。只要 Hugo 主题没有特殊设置通常会自动生成一个允许所有搜索引擎抓取。如果你对内容有隐私要求再单独配置也不迟。搜索引擎提交之后一般几天内会开始索引。不用天天看数据先把内容写起来搜索收录只是一个结果内容品质才是源头。4. 让 helloyaren 被记住开源仓库与内容输出的配合打法4.1 README 决定项目第一印象如果你的 helloyaren 不只是站点还包含几个开源项目那 README 就是每个项目的门面。很多开发者的 README 只有一行“这是一个小工具”这太可惜了。访客从搜索引擎或者 GitHub 推荐进入概率最大README 就是那个让他决定要不要继续深入的入口。一个合格的 README 应该包含这些模块项目名加一句话简介一个演示截图或动态图核心原理或实现思路的简述安装和使用的命令贡献方式和许可协议。我给你一个可以直接套用的骨架# 项目名 一句话说明这个项目解决什么问题。 ## 效果演示  ## 工作方式 - 核心原理一句话讲清楚不需要长篇大论 ## 快速开始 安装npm i -g hello-yaren 使用hello-yaren --config config.json ## 文档 - 链接到更详细的说明页面 ## 支持与贡献 - 有问题开 issue附上复现步骤 - PR 前先读一下 contributing 指南 ## License MIT写 README 的时候要把自己当成第一次看到这个项目的陌生人。忘掉你写过它的所有细节只想一个问题别人拿到手能在一分钟内跑起来吗能跑起来他才会继续深入了解跑不起来再好的实现都会因为缺乏说明被永远搁置。4.2 仓库卫生这些细节暴露你的工程素养代码仓库干不干净是面试官和资深同行判断你工程素养的最快途径。我见过很多项目功能做得不错但一进仓库就看到一堆 node_modules 被提交上去、commit message 全是“update”、没有 LICENSE。这些细节会直接抵消掉你所有的技术加分。几个实用做法第一.gitignore 从一开始就配好不让 node_modules、public、临时文件混进版本管理第二commit message 统一用前缀比如 feat 表示新功能、fix 表示修复、docs 表示文档改动这种习惯对以后的回看非常有帮助第三给每个仓库选一个主流开源许可证个人项目优先选 MIT它足够宽松别人用起来也没有法律心理负担第四发布版本时打 tag配合 release notes 发布GitHub 上会有干净的版本列表。这些习惯第一次做会有点繁琐但第二次就是肌肉记忆了。它们不值钱但能极大降低你被“深入了解”的门槛。4.3 一个项目如何化作三篇高质量文章个人项目如果只停留在代码层它的传播范围会很有限。我自己的习惯是每个稍微有点意思的项目至少写成三篇文章。第一篇文章写“为什么做”讲清楚你遇到的问题、当时的背景、为什么其他方案都不够好。这类文章容易产生共鸣因为很多读者也被同一个问题困扰着。第二篇文章写“怎么做的”重点讲实现思路、关键代码、踩过的坑。这是最硬的干货也是同行最需要的部分。第三篇文章写“运营与复盘”分享上线后的数据、用户反馈、做得好和做得不好的地方。这类文章能帮你建立起“不仅会写代码还能对结果负责”的专业形象。写完自己的博客之后再把文章分发到社区平台。GitHub Discussions、掘金、知乎、博客园都可以放具体平台根据自己的受众选一两个深耕就好贪多嚼不烂。很多人忽略的是分发的时候要把文章开头稍微改一改说明这个项目的背景和适用场景这样读者就不会对你群发式的转载产生反感。5. 踩坑实录五个常见问题与排查清单5.1 部署后 404大概率不是代码问题部署完打开页面看到 404或者样式全丢是个人站点最常见的翻车现场。出现这种情况先别怀疑代码多半是分支名、baseURL 或部署路径三者之一出了问题。Hugo 的 baseURL 如果带上了子路径就很容易出问题。比如仓库名是 hello-yaren部署地址是 username.github.io/hello-yaren但 baseURL 还写着 https://username.github.io/那么所有静态资源的绝对路径都会指向域名根目录页面加载出来就是一个没有样式、没有图片的裸页面。排查方法是在浏览器里打开开发者工具看 Network 面板里静态资源的请求路径是不是多了一段或者少了一段。另外还要确认 GitHub Actions 部署时的分支名。仓库默认分支可能是 main也可能是 master如果 workflow 里监听的是 main而你一直往 master 推送Actions 根本不会触发。这个检查一分钟就能完成却是我被问得最多的一个问题。5.2 自定义域名一直不生效怎么回事自定义域名不生效大概率是 DNS 解析还没生效或者记录类型写错了。CNAME 记录生效通常需要几分钟到几小时取决于你设置的 TTL 值。在本地终端里用 ping 命令或者在线 DNS 查询工具看一下当前解析结果确认它已经指向你的 GitHub Pages 地址。另一个隐藏问题域名服务商可能把 CNAME 和 MX 邮箱记录冲突了。如果你在同一个域名下既用了 CNAME 又配置了邮箱相关记录部分 DNS 服务商不允许这样共存需要改用一个别名记录方案比如先建一个子域再转发。个人站点尽量避免这种复杂玩法把邮箱配置放到单独的子域下会省心很多。5.3 图片源不能想当然图床与资源管理我见过有人把文章图片全部外链到第三方图床结果某天图床关停整站文章全部变天书。个人站点的图片管理最稳妥的方案是把图片放到仓库里或者放到自己的对象存储中统一管理。放到仓库里有一个需要注意的点图片体积太大会拖慢页面加载仓库也会越来越臃肿。我的习惯是所有配图先经过一次压缩截图用工具压缩到合适的尺寸再上传照片则转成 WebP 或 JPEG 格式控制单张质量。一张 50KB 的图和一个 5MB 的图在移动端打开同一个页面的体验天差地别而这一点经常被忽略。如果你要用图床至少在本地留一份备份。外链图床可以在文章中用但绝不能成为唯一来源。个人站点的资产是长期积累的每个资产都要能经受住时间考验。5.4 更新动力不足个人项目如何跑过三年最后这个问题不是技术问题而是坚持问题。很多个人项目轰轰烈烈开场三个月后死在热情消退和琐碎工作里。这很正常也不用自责但如果你想真正让 helloyaren 成为一个有长期价值的项目就需要一套抗懒散的策略。我的策略是降级更新频率。不要定“每周一篇”这种目标那会变成负担改成“每季度至少一个可展示的成果”成果可以是一个新功能、一篇长文或者一个完整的复盘。这种季度的节奏既不会让人疲惫又能保证项目始终有生机。还有一个技巧是给项目设里程碑。helloyaren 从第一篇文章上线到绑定第一个域名再到第一个外部访问每一个节点都值得记录。把个人项目当成一个产品来对待去想它下个季度应该变成什么样子它就不会沦为时间胶囊而会真正成为你持续生长的证明。我个人在实际操作中最深的一点体会是像 helloyaren 这种项目真正值钱的不是那个域名不是那一堆技术栈而是你愿意为它持续投入的时间。刚开始搭建的几周会很兴奋后面中期会有一段时间觉得“没人看、没反馈、没必要”但只要跨过那个阶段它就会变成你职业道路上一个越滚越大的资产。如果你也想建一个自己的 helloyaren今晚就把名字定下来明天开始写第一行代码一年后再回头看你会感谢当初那个把 hello world 变成真实站点的自己。