type
status
date
slug
summary
tags
category
icon
password
最开始萌生建站想法，是刷到一位UP主（王帅真）在评论区分享了个人网站，在自己的“地盘”自由发布内容的诱惑真的很大，毕竟在各类平台发布内容，就像租别人的房子，总会有各种规则限制；而拥有自己的网站，就像买了属于自己的房子，想发什么、怎么发，都能自己说了算。
于是，说干就干，业余时间我开始探索个人官网的搭建方法，想早日拥有专属“内容小屋”。study in public，这是我的建站过程，希望能够帮到你早日“买房”。
🙋🏻♂️定位：没有技术背景的小白宝宝，例如我是文科生、念的会计专业，手搓了个人网站，看到这篇文章的你也可以~
🙋🏻♀️痛点：①不会写代码心里畏难；②不知道建网站的一二三四步都要做什么
📝 第一步：方案选型
Q1：AI可以搞定吗？
由于AI技术热度很高，我下意识地认为，借助AI工具搭建网站已成为主流选择，因此初期搜索的内容几乎全是“AI快速建站”相关的教程。我尝试用Muse生成了网站模型，还基于此设计了一套颇具趣味的交互动效，整体呈现效果超出预期。
然而，这款海外AI模型采用收费模式，我的积分很快消耗殆尽，此时网站的搭建进度刚完成50%，探索期不想氪金（8000积分流量$40），尽管能够将代码下载到cursor中，但我完全不清楚如何将代码中的通用内容替换为自己的专属信息。较高的学习成本和所需投入的时间，让我不得不暂时搁置这个AI建站方案。
我计划把这个网站当做我的第二个小项目，一边学习一边把它补充完整。
Q2：AI有门槛，下一个方案是？
于是我更换了B站的搜索关键词，把“AI”关键词去掉之后，发现有博主提到Notion可以直接发布成网页。我开始针对性搜索Notion建站教程，巧的是，很快就刷到一个教程，页面跟我之前心动的UP主网站个人主页一模一样，更惊喜的是，这个教程明确标注“技术小白友好，无需写代码”。
我立刻跟着视频一步步无脑操作，最终真的成功把网站模板发布了出去。网站成功发布的那一刻，我兴奋不已，但冷静下来后却发现一个问题——我连Notion、NotionNext和Vercel之间的关系都没搞清楚，只觉得“Notion写的笔记能同步到网站上”这件事很神奇。
抱着“既要知其然，也要知其所以然”的想法，我开始认真研读NotionX上的原理教程，还试着把三者的关系画成流程图。
很多内容看着好像懂了，但实际动手画的时候，才会逼着自己深入思考逻辑关联，也只有这样，知识才能真正内化到脑子里。
通过画图，我终于理清了核心逻辑：
- Notion：承担数据库的功能，我在Notion上写的笔记、整理的内容，都会储存在这个“数据库”里；
- GitHub：提供现成的网站代码，直接复用大神分享的成果就行，代码可以存在GitHub中；
- 云服务器平台：想要让网站7*24小时运行，就需要云服务器托管代码，代码运行时会从Notion数据库中调取内容，再按照NotionNext框架的样式呈现在网页上。
云服务器（如 AWS EC2, Google Cloud Compute Engine, Azure VMs）本质上是放在大型数据中心里的专业计算机。它们拥有冗余电源、网络和硬件，可以保证代码每天 24 小时、每周 7 天持续运行，而你不需要把自己的电脑一直开着。
📝 第二步：做个计划
搞定了网站模板的发布，需要把我们的小屋做个装修（硬装），让它符合我们的风格。还要把我们的家具搬进去（软装），让我们生活得更加舒适。这个时候，就不能跳过阅读NotionNext使用手册了。
Q：NotionNext使用手册好复杂，不想看
把任务拆解成小任务，各个击破。
Q：工作量不知道有多少，时间不够用啊
项目排期。前期粗没关系，事情都是越做越能看清楚细节的，后面再补充详细排期。
📝 第三步：开始硬装
根据项目排期，我们明确了网站建设的优先级，以及关键任务项。接下来就是按照项目安排，有序地开展计划。不贪多，要知道装修房子是个大工程，一天做不完；不偷懒，否则我们的装修就成了豆腐渣工程，自己不看别人就更不会看了。
Q：如何把网站模板里的内容换成我的内容？（硬装：网站框架）
仔细看网站的页面就会发现，有很多细节需要配置，如果我们直接对Notion的配置项进行修改，并不知道配置项对应的是网站的哪个位置。但是，我们可以看到网站上都有哪些模块，这是最终的呈现形式，以终为始，从网站模块着手，先用Xmind梳理自己想要呈现的内容。
在梳理过程中，你会迸发出很多灵感，哪个页面要放哪个内容，但是，我们可以看到网站上都有哪些模块，设过程也并非一帆风顺，比如修改网站配置项、阅读NotionX的说明文档时，还是会遇到一些理解门槛，需要反复琢磨才能搞懂。
Q：不想看配置内容呀
那就看看我的视频讲解吧！
📝 第四步：开始软装
知识管理
旧家具：以前写过的文章能不能放，以前做过的思考能不能放
新家具：想写哪些文章选题？
写作开启另一个话题：知识管理方法。
📝 第五步：给小屋起名（可选）
为了庆祝小屋顺利施工🚧完成，我们来给小屋起个好听的、个性的、有记忆点的名字吧！让朋友们能够根据名字在地图上搜到我们的小屋，来家里做客~
博客名字、域名
![[白嫖域名保姆级教程]从注册到配置,再到Cloudflare托管、Vercel项目绑定,一个视频解决。_哔哩哔哩_bilibili](https://www.notion.so/image/https%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2Fb6e446d2bccc33fa961398244da3665377f35743.jpg%40100w_100h_1c.png%4057w_57h_1c.png?table=block&id=2be179ac-ce47-806a-b628-c7877e9eb95f&t=2be179ac-ce47-806a-b628-c7877e9eb95f)
![[白嫖域名保姆级教程]从注册到配置,再到Cloudflare托管、Vercel项目绑定,一个视频解决。_哔哩哔哩_bilibili](https://www.notion.so/image/https%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2Fb6e446d2bccc33fa961398244da3665377f35743.jpg%40100w_100h_1c.png?table=block&id=2be179ac-ce47-806a-b628-c7877e9eb95f&t=2be179ac-ce47-806a-b628-c7877e9eb95f)
📎 遇到的问题和解决的办法
Q：在Notion上修改了菜单不生效怎么办？
A：注意视图
Q：菜单和菜单之间的关系是什么？
A：排列组合的关系
Q：怎么修改配置信息
A：在Notion的配置页面里修改
Q：怎么更换图片和上方的样式
A：在theme里面找到对应的主题去修改
Q：修改了网站不生效是怎么回事？
A：修改生效时间为1S，稍等5S左右（代码部署需要时间）。刷新2次，就能看到。
Q：国内为什么无法访问
A：域名的问题，注册个国内的域名并在vecel上面绑定
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
终于克服了域名注册的问题！我的网站算是建好了！
最后一步就是对内容进行微调、对界面进行调整。
现在最大的感受是，每一个步骤都不难，组合起来还挺不容易的。
想到少楠的一个观点，看到别人做的产品，觉得就是大模型套壳，觉得自己也能做，没什么高级的技术含量。这背后工程化的构建才是高价值，因为虽然功能简单，但是能够让这个APP上架市场被公众看到、选择合适的服务器、稳定的服务用户等等，要做到这些并不简单。
很多时候我们从门外看，从用户视角看，我们只看到最终的结果。但是实现结果的过程，才是从产品经理视角看、从行内看，这个过程遇到了多少问题、这些问题要怎么解决，也才是工作中需要思考的，而这些思考都不会摆在台面上，不会被用户所感知到。
我们要服务好用户，就要确保结果的高质量（无论经历多少艰难，用户是不知道的，用户只看结果，但是作为团队管理者，要看到团队为此的付出，及时鼓励和褒奖），但同时，我们也要保持对其他产品的敬畏，不要觉得这很简单，把
- 作者:小简Joanna
- 链接:https://notion-next-kjnfaj14f-joannas-projects-f2b370ba.vercel.app//article/guide
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
