准备阶段

软件

• 下载梯子：用于访问外网

• 下载vscode：代码编辑器

『教程』VsCode五分钟上手教程 无一句废话_哔哩哔哩_bilibili

涵盖下载安装、配置开发环境、界面美化三个部分，5分钟教程，浓缩的都是精品，看完即浪~~, 视频播放量 452954、弹幕量 519、点赞数 12704、投硬币枚数 5309、收藏人数 12139、转发人数 1466, 视频作者 偶尔有点小迷糊, 作者简介 用不正经的风格 讲正经编程知识，相关视频：VS Code 零基础教程 | 持续更新中，vscode 关于C/C++的环境配置全站最简单易懂！！大学生及初学初学C/C++进！！！，【2023最详细VScode使用教程】已完结 零基础快速上手VS code（前端开发/.NET6/.NET Core/编程/插件/教程）S0044，Vscode如何设置终端弹出输入？ 三分钟教你解决！，大一学生用5分钟教会没用过vs的人：vs实用基操，VSCode怎么用？一个视频教会你！，【Visual Studio】新手使用VS2022详细基本操作教程！带你快速上手VS编译器，这5个VSCode开发技巧绝对有你不知道的，100%提高开发效率！，Visual Studio和Visual Studio Code区别,vs2022和vscode的区别，【2024最新】全网最细Visual Studio2022下载安装使用教程，一键安装永久使用，手把手教你，包成功的!

https://www.bilibili.com/video/BV1bK411P767

• 注册github

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

https://github.com/

• 下载github destop：用于管理代码

Download GitHub Desktop

Simple collaboration from your desktop

https://desktop.github.com/download/

• 使用github账户登录vercel

Vercel: Build and deploy the best web experiences with the Frontend Cloud

Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

https://vercel.com/

Vercel是一个云平台，它能帮你把网站快速发布到互联网上，让所有人都能访问，而且完全免费 - 就像是帮你把电脑里的网站文件搬到网络上的搬运工。

域名

网站搭建如何购买一个域名，在阿里云注册购买一个域名_哔哩哔哩_bilibili

网站搭建如何购买一个域名，在阿里云注册购买一个域名, 视频播放量 296、弹幕量 0、点赞数 1、投硬币枚数 0、收藏人数 0、转发人数 0, 视频作者 程序员老狼, 作者简介 所有服务都是收费的。我的v: llike620，相关视频：如何搭建一个网站客服的对话框，多域名解析到同一个网站，phpstudy的使用，网站搭建，2分钟搭建属于自己的在线客服系统，搭建一个独立的客服系统需要哪些东西？域名服务器客服程序，wordpress独立电商网站搭建教程第一集：安装wordpress，引流宝活码系统，短链域名，入口域名，落地域名之间的跳转，wordpress独立电商网站搭建教程第二集：安装WooCommerce插件演示效果，如何给自己的网站增加在线客服咨询弹窗功能，如果购买网站服务器，选用Linux系统服务器，Ubuntu或者CentOS，客服聊天系统落地页部署，使用独立域名访问聊天的落地页

https://www.bilibili.com/video/BV1mw4m1m7Kp/?spm_id_from=333.337.search-card.all.click

Notion

注册notion

在互联工作空间中管理 Wikis 百科、文档和项目｜Notion

崭新工具，将你的多个工作应用程序融为一体，成为你和团队的一站式工作空间。

https://www.notion.com/zh-cn

复制该模板到notion

获取页面ID

素材

操作阶段

下载与创建项目

• 拷贝项目到本地

• 在目标父亲文件夹解压下载的文件，然后改名为项目名称（英文）

• 然后通过github destop完成代码同步到github，Name改为项目名称（英文），Local path改为项目的父亲文件夹地址，然后点击create repository

• 发布代码到github

• 用vscode打开代码

• 只需要关注themes文件夹，其他的都不要管也不要改动，themes文件夹中装的是不同的主题，我们以「heo」主题为例来讲，其他主题同理

• 任意主题都只需要关注config.js文件夹

• config.js是一个配置文件，通过修改它，就能完成网页中的一部分归属于主题的字段配置

字段配置可以理解为网站的各种设置项。就像填表格一样，config.js文件里包含了很多可以自定义的选项，比如：网站标题、网站描述、导航菜单、页脚信息、社交媒体链接。通过修改这些配置项的值，你就可以让网站按照你想要的方式显示，而不需要懂得编程。这就像是在填写一张表格，只需要在对应的地方填写你想要的内容即可。

• 改config.js前，我们需要知道每个字段的含义，才直到怎么改，所以我们先把网站弄到线上，再根据网站的表现去找对应的字段修改

上线项目到互联网

• 进入vercel，创建一个项目

Dashboard

To deploy a new Project, import an existing Git Repository or get started with one of our Templates.

https://vercel.com/new

• 在代码仓库列表中选择导入NotionNext

• 点击Environment Variables（环境变量），并添加一个属性名称为NOTION_PAGE_ID，值为步骤一获取的页面ID。

• 点击deploy，等待2分钟，出现下面的界面后点击Continue to Dashboard

• 点击图示位置就能进入网站，只不过现在网站在一个vercel的临时域名下，那么接下来，把网站搞到自己的域名下面以后，我们再修改这个网站

用自己的域名连接这个网站

• 点击域名按钮

• 输入你购买的域名，然后点击添加

• 选择第一个推荐配置，然后add

• 现在到你的域名提供商那里，配置两条解析记录，点击确认

如果不熟悉域名解析配置，建议直接联系域名提供商的客服支持，他们会提供专业的指导帮助。或者搜索教程。

• 等待3分钟，会发现vercel全部打勾

• 这个时候，进入你自己域名，就可以访问啦

将项目改成自己需要的形式

选择主题

• 我们进入notion的模板页面中，进入配置中心

• 把theme字段后面的值改为heo

• 2分粥后，刷新网站，会发现主题变成了heo主题

主题内元素配置

config.js是网站的主要配置文件，通过修改它可以自定义网站的标题、描述、菜单、页脚等主题相关的显示内容，就像填写一张设置表格一样简单。