零基础搞定！我用Notion搭建个人网站

type

status

date

slug

summary

🧐开始之前：为什么你需要有个人网站？

Q1：为什么你需要建立个人品牌？

个人品牌是你在网络和现实世界中的“个人名片”和“无形资产”。它让你不再被动等待机会，而是主动出击，吸引最适合你的机会和资源。帮助你从nobody变成somebody再变成everybody。当了解了建立个人网站的巨大价值，你才会愿意做出深刻的改变，并立即行动。

对外：提升你的市场价值

脱颖而出的差异化工具：个人品牌能让你在众多候选人中脱颖而出，吸引与你匹配的雇主、合作伙伴或客户的注意。

建立熟悉感和信任度：个人品牌传达了你的核心价值观和个性、声誉和承诺，人们阅读你在互联网上发表的内容与你建立熟悉感和信任度，也就更容易记住你和你的业务，从而选择与你合作。

创造更多机遇和成就：个人品牌会为你带来更广泛的人脉和社交网络，结交志同道合的朋友和潜在客户，为你带来更多机遇和成就。

实现商业变现和价值提升：对于自由职业者、创业者、斜杠青年或内容创作者来说，个人品牌是直接的商业资产，可以帮助你将影响力转化为具体的商业回报，例如咨询、课程、代言或自己的产品和服务，并提高市场议价能力。

对内：促进自我认知和自我实现

打造个人品牌的过程，也是一个自我梳理的过程。

了解自己：建立个人品牌，迫使你思考“我是谁？我擅长什么？我能提供什么价值？”，帮助你更清晰定位的职业和人生方向。

持续成长：建立个人品牌，要持续需要不断输出高价值内容来”喂养“它，这需要你不断学习和输入新知识。

自我实现：建立个人品牌，将增加你的社会影响力，将你掌握的专业知识和技能分享给更多的人，帮助更多的人有所收获，创造更大的社会价值。

Q2：为什么你要用个人网站来建立个人品牌？

我把个人网站比喻为自己的互联网小屋，把B站、小红书、抖音、X、ins等社交平台比喻成租来的房子。

在自己的房子里，你想发什么、怎么发，都是自己说了算，用户可以通过搜索你分享的内容关键词找到你，获取长期、稳定的被动流量。在租来的房子里，由于房子的大小、装修已经基本确定，获取流量需要遵守平台的规则，就连修改头像和名称，都会被平台限制次数。

无规则、无调性、只属于你、永远存在、长期流量，是个人网站的绝对优势。

你还可以把个人网站作为内容池和流量池，从个人网站中选择符合平台调性的内容发布到对应社交平台，从社交平台吸引流量转换到个人网站中。社交媒体可以用来获客、互动、快速传播和保持热度。个人网站用来沉淀深度内容、建立专业信任、展示完整作品集以及实现最终的商业转换。

Q3：建立个人网站都要做些什么？

毕竟，租房子只需要我们在平台上完成账号注册即可，但是想要拥有自己的房子，流程会复杂些。而这篇建站教程的存在，就是希望帮你抹平一些复杂度。如果你渴望拥有自己专属的内容小屋，并愿意为此付出比租房子更多的劳动，请继续往下看。

互联网小屋的建设，跟在现实生活中买房子很像，为了方便大家理解整个流程，我用买房来类比建立网站的过程：

序号	步骤	买房步骤	建网站步骤
1	看盘/选型	从多个开发商的楼盘中选择一个最中意的	从各种方案中选择一个最高效的
ㅤ	买房	~~付首付或全款，办理相关手续~~	~~（跳过，免费的开源项目）~~
2	交房	房子完工之后，验收以及办理相关手续	通过Notion+NotionNext+vercel框架，发布毛坯小屋
3	计划	确定装修完成时间、装修工作项、排期等	确定装修完成时间、装修工作项、排期等
4	硬装	调整房子的结构、风格等，适配我们的审美	调整网站的结构、主题风格等
5	软装	选购新家具或搬来旧家具，把小家装扮得耳目一新	准备一些发布内容，可以是之前写的或是新创作的，展示我们的职业、个性等
6	门牌	做个好看的门牌，方便别人找到我们的家	选购域名，建立小屋的专属地址
7	进新房🎊	邀请朋友做客	邀请朋友做客

1️⃣ 第一步：方案选型

Q1：AI可以搞定吗？

由于AI技术热度很高，我下意识地认为，借助AI工具搭建网站已成为主流选择，我尝试用Muse生成了网站模型，基于此设计了一套颇具趣味的交互动效，整体呈现效果超出预期。

然而，这款工具生成网站需要消耗积分，积分用光了网站的搭建进度刚完成50%，探索期不想氪金（8000积分$40），尽管能够将代码下载到cursor中，但修改网站内容也比较头疼，较高的学习成本和投入时间，让我暂时搁置了这个AI建站方案。

Q2：AI有门槛，下一个方案是？

我在B站把“AI”搜索关键词去掉之后，发现有博主提到Notion可以直接发布成网页。于是我开始针对性搜索Notion建站教程，巧的是，很快就刷到一个教程，页面跟我之前看到的某UP主的个人网站一模一样（见友链）。我浏览过那个up主的网站，符合我需要实时发布内容的需求，更惊喜的是，这个教程明确标注“技术小白友好，无需写代码”。就它了！

【Notion Next新手入门#01】零基础搭建个人博客，超详细教程。_哔哩哔哩_bilibili

NotionNext官网文档:https://docs.tangly1024.com/about基于NotionNext搭建的博客:https://www.laogou717.com下期预告征集:想看更详细的配置,还是其他主题, 视频播放量 4838、弹幕量 6、点赞数 173、投硬币枚数 86、收藏人数 259、转发人数 17, 视频作者神烦老狗, 作者简介 y z~ 合作VX 备注产品名: LAOGOU717，相关视频：零基础搭建个人博客！手把手教你用Hexo+GitHub+Zeabur打造属于你的网站!，Blender新手朋友，你被针对了！Blender5.0新手入门教程~，[建议收藏]学习剪辑五年总结PR十个高效剪辑的技巧。，最简单视频、博客封面制作教程：小白也能轻松搞定！，【素材+教程】300多条音效分享+标准结局制作你值得拥有！，【老狗のPr】我教你（无中生友）制作微信的聊天动画。，【建议收藏！】自制100多种综艺花字样式！免费分享。，【SD全套涩涩提示词推荐】2025全网最全的Stable Diffusion提示词合集，一秒解决新手入门的题词难题！让你的AI绘画设计降本增效！！，3分钟使用Cloudflare免费搭建一个带后台的博客/个人网站，【快速制作字幕】咕咕教你怎么时间管理。

https://www.bilibili.com/video/BV1bqtvekE8J?spm_id_from=333.788.videopod.sections&vd_source=64d1893d2eabeac2d63d83edb8a08be9

问题：为什么生成的博客主题不是我选择的主题

解法：复制的代码有默认的博客主题next，要改成自己的主题，在Vercel中增加环境变量，key和value如图所示。

2️⃣ 第二步：交房

根据上方视频操作，捣鼓出的毛坯小屋如下图。右边是网站页面，左边是Notion页面，在Notion页面写的文章，会自动同步到网站上。

Q1：你了解Notion、NotionNext和Vercel之间的关系吗？

这套方案没有使用AI，而是使用一套叫”NotionNext“的框架。这是传统建立网站的流程和NotionNext流程的对比：

Notion：承担数据库的功能，我在Notion上写的笔记、整理的内容，都会储存在这个“数据库”里；

NotionNext：大神tangly分享的一套现成的网站代码，在Github中，直接在Github中建立个仓库，把代码拷贝到自己的仓库中就好。

云服务器平台：想要让网站7*24小时运行，就需要云服务器托管代码，代码运行时会从Notion数据库中调取内容，再按照NotionNext框架的样式呈现在网页上。Vercel是常用的云服务器平台之一，托管后，在Github的代码仓库修改代码，会自动部署到Vercel中，效果就是我们在Github上调整了网站的样式后，等待个几秒钟，网站就会自动更新了。

GitHub 是全球最大的基于 Git 的开源代码托管与协作平台，核心功能是帮助开发者存储、管理、版本控制代码，并支持多人协同开发项目。简单来说，它就像一个 “程序员的云端代码仓库+协作办公空间”，同时也是一个技术社区。

云服务器（如 AWS EC2, Google Cloud Compute Engine, Azure VMs）本质上是放在大型数据中心里的专业计算机。它们拥有冗余电源、网络和硬件，可以保证代码每天24小时、每周7天持续运行，而你不需要把自己的电脑一直开着。

建议大家先看看我画的流程图，了解Notion、NotionNext和Vercel之间的关系，我一开始也是跟着教程无脑操作，只觉得“Notion写的笔记能同步到网站上”这件事很神奇。虽然可以成功把网站发布出去，但是要搞网站的装修，还是需要对他们的关系有些了解才行，否则会比较难上手~

3️⃣ 第三步：做个计划

搞定了网站模板的发布，需要开始给小屋做装修，包括规划网站的菜单信息、门户风格、分栏名称、给小屋起名字、准备公告介绍、自我介绍等等事项，还需要把我们以前的内容搬运进去，在搬运过程中可能会有新的idea产生，也要及时记录下来。工作量不小。

Q1：如何阅读NotionNext使用手册

NotionNext使用手册上写了很多内容，一些专业术语对没技术背景的小白来说，有些阅读门槛。

建议阅读顺序：先把首页的文章看了，了解NotionNext是什么；再阅读站点配置、主题参数中的目录结构，对工作内容有个框架性的认知。

NotionNext-快速免费建站 | NotionNext帮助手册

无需服务器、即使是小白也能几分钟搭建自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。

https://docs.tangly1024.com/about

然后，拉个表格出来做项目排期，把每个事项的时间都安排好，否则很容易因为要做的事情太多不知道从何下手，犯拖延症。

这是我拉的表格，根据必要配置工作项做的排期，我把每一项任务对应的网站界面和配置界面都放在了表格中，并且粘贴了对应的文章链接，减少大家的工作难度和翻找资料的时间。在线表格见链接，大家下载下来到本地就可以编辑了。

ai.feishu.cn

https://ai.feishu.cn/wiki/WSZmwAqdhiCBXEk39mycfzounY7?fromTtSwitch=1&fromTtSwitch=1

有些可选配置工作就没做了（像是字体字号、自动获取封面图片这种），研究起来也是有点费劲儿的，大家可以根据自己实际的工作内容进行调整。

4️⃣ 第四步：开始硬装

根据项目排期，我们明确了网站建设的优先级，以及关键任务项。接下来就是按照项目安排，有序地开展计划。不贪多，要知道装修房子是个大工程，一天做不完；不偷懒，否则我们的装修就成了豆腐渣工程，自己不看别人就更不会看了。

Q1：如何高效替换网站模板内容？

我在配置的时候发现，网站的页面有很多细节配置，如果直接对Notion的配置项和Github中的代码进行修改，很难知道配置项对应的是网站的哪个位置。

所以，在项目排期表格中，我整理了界面和配置的对应项，建议你在着手开始修改配置之前，先用Xmind对内容做个大致的计划（我为你准备了内容规划Xmind，可以下载下来在上面微调）。梳理完成之后，再根据项目排期，一个一个内容的修改配置，可以提高效率。

加简simple的内容规划2.0.xmind

4.3 MiB

经过1-2周的时间，网站的整体框架就搭好了，已经有了一些我们喜欢的样子。

5️⃣ 第五步：开始软装

我猜你在做“硬装”的时候，已经按耐不住想要写几篇博客了，现在，是时候把网站内容丰富起来了，可以给每个博客分类下准备1-2篇文章，让网站看起来更丰满。

旧家具：以前写过的文章迁移到网站中

新家具：想写哪些文章选题？

这里可能会涉及另一个主题：知识管理。

你以前可能写过一些零散的没有成文的内容，新的文章可以在这些内容的基础上进行编写，但是历史资料散落在各个角落，你可能会遇到如何整理历史资料、如果利用之前的零星记录、如何调动起我们看过的书籍的记忆、如何有效管理私域知识，如何组织写作等等问题，我将写另一篇文章来介绍。

6️⃣ 第六步：做个门牌

Vercel的域名无法在国内访问，我们需要注册一个自己的域名，这个域名可以彰显我们的个性。让朋友们能够根据名字在地图上搜到我们的小屋，来家里做客~

教程写得不是很清楚，我在这里卡了好久。建议大家按照“选购域名->解析域名->绑定域名”的顺序来操作，域名选购看教程，域名解析看我分享的视频，绑定再看教程，这样速度最快。

选购域名：Namesilo

我们的网站域名一旦定了，尤其是对外宣传之后，再更换的成本就会很高，因此大家在挑选的时候谨慎一些~ “.com”结尾的域名用得最多，价格也高一些。另外，教程里有个1美元的优惠码，记得用~

Cheap Domain Names & Web Hosting Starting at $0.99!

Cheap domain name registration and affordable website hosting. We offer free add-ons & benefits that our competitors like to charge for. 24/7 Top-rated support!

https://www.namesilo.com/?rid=fe5a225yc

解析域名：CloudFlare

注册好的域名只是一个“好记的名字”，DNS是帮这个“名字”绑定到实际服务器的“中间人”，没有DNS解析，输入域名后浏览器不知道该访问哪台服务器。解析域名可以用cloudFlare（免费），参考下方视频。

DNS（Domain Name System，域名系统），可以通俗理解为 “互联网的地址簿” —— 它的核心作用是把人类容易记忆的域名（比如www.baidu.com），翻译成计算机能识别的IP地址（比如180.101.49.11），让浏览器、服务器等设备能精准找到目标网站的主机，最终实现访问。

[白嫖域名保姆级教程]从注册到配置,再到Cloudflare托管、Vercel项目绑定,一个视频解决。_哔哩哔哩_bilibili

说是白嫖你可以说我是标题党吧,因为它还是需要你支付一块钱的。你可以自己上网搜索注册网站,也可以访问下方的博客链接进行使用https://www.laogou717.com/archive/domain, 视频播放量 17374、弹幕量 9、点赞数 422、投硬币枚数 208、收藏人数 561、转发人数 48, 视频作者神烦老狗, 作者简介 y z~ 合作VX 备注产品名: LAOGOU717，相关视频：一键获得永久免费域名，直接免费托管到cloudflare平台！最新版教程，白嫖免费域名，先到先得，亲测 2025~2026 免费大牌域名注册，可托管到 cloudflare，保姆级教程。，超低价独立域名.xyz，一年只需要 4.76 元人民币，续费同价，可托管到 cloudflare！，免费域名注册，公益网站大家一人一个就好别申请多了！！！，如何在国内注册Google（谷歌）账号？2025 保姆级指南：国内注册 Google 账号，100%成功 + 避坑清单（亲测有效），为什么大部分网站都不喜欢用根域名？，用AI做早安电台视频，8个月涨粉48万，全流程保姆级讲解，frii.site — 永久免费的二级域名注册教程，免费域名注册推荐汇总（2025.11 更新），最简单视频、博客封面制作教程：小白也能轻松搞定！

https://www.bilibili.com/video/BV1mu4y1t7Vm?spm_id_from=333.788.videopod.sections&vd_source=64d1893d2eabeac2d63d83edb8a08be9

绑定域名：Vercel

vercel是我们的云服务器，域名解析之后，把域名绑定到Vercel中，这样用户就能根据域名访问我们的网站了。我们注册好的域名是一级域名（joanna.cllck），在绑定域名时还可以在前面加上前缀生成二级域名（simple.joanna.click)，具体看这个教程。

Vercel绑定自定义域名 | NotionNext帮助手册

Vercel 借助cloudFlare可以快速绑定解析自己的域名

https://docs.tangly1024.com/article/vercel-domain

如果出现“重名要验证所有权”的提示，如果多次验证没有成功，有个技巧是修改二级域名前缀，直到系统不再提示需要验证所有权。

绑定完域名，你的朋友们已经可以在国内通过网址访问你的网站了（记得去网站上多点几篇文章测试一下看是否有其他bug）。

📎 遇到的问题和解决的办法

Q：在Notion上修改了菜单顺序不生效怎么办？

A：Table是数据表，Config、Post Gallery等都是视图，要在Table中调整菜单顺序，才会生效！

Q：子菜单要怎么挂在菜单下？

A：子菜单贴着菜单，就挂上了。菜单或者子菜单里面不写内容，在菜单或者子菜单挂的page或者post里面写内容（这个不是贴着挂，用slug挂，作者的教程又说），page只能通过菜单进入，post在文章列表中也会出现。

Q：修改了网站不生效是怎么回事？

A：修改生效时间为1S，稍等5S左右（代码部署需要时间）。刷新2次，就能看到。进入到子页面也要手动刷新2次，才能看到更新后的内容。

Q :最新发布的文章为什么没有显示在文章列表最前面？

A：默认按照notion的Table表格中type为post类型的文章行顺序排列，修改为date排序，才会把最新的文章显示在文章列表最前面。

Q：国内为什么无法访问

A：Vercel自带的域名不支持国内访问，注册个新的域名并在Vecel上面绑定。

Q：搜索不到自己的网站怎么办

A：等待被搜索引擎收录。如果想加速，可以看这个教程。

搜索引擎收录 | NotionNext帮助手册

notionnext的网站百度收录，html验证，的meta放在哪里

https://docs.tangly1024.com/article/notion-next-search-engine-index

👏🏻 写在最后

跟着上面的步骤走到这里，恭喜你建站完成！从此在互联网上有房了！！你已经拥有了一个人们总能找到你的世界总部，一个只受你控制的、可以自由发表想法的互联网小屋。相信你已经有很多感受想要抒发，不如写下来吧~

行动起来，你不光会收获自己的房子，还会收获：网站搭建的全流程经验。除了没有写代码外，你真实的上线了一个网站，你已经了解了网站搭建的全流程，包括把代码和数据库部署到云服务器上、进行网站设计、生产网站内容、申请域名并解析和绑定到服务器上、加速搜索引擎收录等等。下一次，如果在工作中，团队需要一个网站，你可以勇敢地站出来承担起这个职责。

🙋🏻‍♀️

我的感受

域名注册是我建网站的最后一个拦路虎，克服了域名注册的问题，我的网站总算建好了！一共花费了2周业余时间，半个月的大项目了。最大的感受是，每一个步骤都不难，组合起来还挺不容易的。

看到别人做的产品，觉得就是大模型套壳，觉得自己也能做，没什么高级的技术含量。但这背后工程化的构建才是高价值，虽然功能简单，但是能够让这个功能稳定运行并不简单，这包括：采购各种服务、选择合适的云服务器、符合应用市场合规规定、构建应用的包并提交、后续稳定迭代和升级等。一款面向市场销售的产品，不只是单纯的功能，更是一个完整的运行系统。

很多时候我们从门外看，从用户视角看，我们只看到最终的结果。但是实现结果的过程，才是产品经理视角、行内视角，这个过程遇到了多少问题、这些问题要怎么解决，也才是工作中需要思考的，而这些思考都不会摆在台面上，不会被用户所感知到。

我们要服务好用户，就要确保结果的高质量（无论经历多少艰难，用户是不知道的，用户只看结果，但是作为团队管理者，要看到团队为此的付出，及时鼓励和褒奖）。同时，我们也要保持对其他产品的敬畏，不要觉得这很简单，把流程组装起来，一件一件事的去完成、去落地的能力，也很重要。