[建站相关] 使用Notion搭建个人网站 - 完全免费的建站教程,看这一篇就够了
作者:CC下载站 日期:2023-06-17 01:00:55 浏览:5 分类:站长帮
我之前的教程教了大家如何使用Notion
以及Notion如何汉化
,今天我来教大家如何Notion搭建自己的个人网站,完全免费,而且无需任何技术背景,你只需要写一个文档一样写一篇Notion文章,就能一键给你自动部署属于你的Notion个人网站,而且支持自定义域名,非常适合零基础又想要搭建一个个人网站的小伙伴。
个人网站
我之前搭建过两个个人网站:
一个是使用Hugo静态博客框架搭建的个人网站:小编的个人网站
另一个就是使用Notion搭建的个人网站:小编的个人网站
Hugo搭建博客需要一定的编程基础并且执行开发命令,对零基础的小伙伴来说有一定的难度,但是可定制化更强,有更多的主题可以选择。
而Notion来说对小白就非常友好了,你不需要任何编程基础,只需要写一个文档,就可以帮你自动部署。
Hugo个人网站
这是我的Hugo个人网站 https://www.techxiaofei.com
Notion个人网站
这是我的Notion个人网站 https://techxiaofei.eu.org
这两个网站都是完全免费的,不知道你更喜欢哪一个,如果你更喜欢Hugo的话请在评论区留言,我后续再做一个Hugo的系列教程。
一、Notion账号
注册Notion账号
首先我们需要有Notion账号,输入notion的官网地址: https://notion.so 登录使用。
如果你没有notion账号,可以注册一个notion账号,可以使用email地址或者google地址注册。
侧边栏可以创建非常丰富的笔记类型,能满足基本所有的效率笔记需求。
我之前也做了Notion的使用和汉化教程,有兴趣的可以查看视频下方的描述栏。
复制Notion模版
登录账号之后,打开这个Notion模版 Notion模版
然后点击右上角的Duplicate
也就是复制
,把模版克隆到你的账号下面,这样你就可以开始创作了。
我们把模版克隆到到个人账户之后,点击右上角的Share
->Publish
->Publish to Web
,那么互联网上的用户就能使用这个链接来访问我们的个人页面了。
而这个页面就是你个人网站的内容编辑页面,我们先不修改,等部署之后再慢慢修改。
二、Github账号
1. 创建账号
如果你还没有Github账号,先使用email地址注册一个,非常简单。
2. 克隆项目
Fork NotionNext
到你的Github账号
可以在Github的搜索框直接搜索NotionNext
,也可以直接点击链接:https://github.com/tangly1024/NotionNext
我们可以看到它有多种主题,如果你喜欢哪个,可以在部署后切换主题。
我们点击右上角的Fork
按钮来克隆项目到你的Github账户下:
Fork后就会弹出如下界面,点击Create Fork
,就会在你的Github账号里面拷贝一份代码。
这份代码就是我们搭建个人网站的关键,这个NotionNext
调用了Notion的API来展示Notion的页面,同时提供了一些主题和特效,可以定制化我们的网站效果。
对于这个仓库,我们唯一需要关注的就是blog.config.js
文件,我们的所有主题特效修改都只需要改这个配置文件即可,后面我会详细介绍。
三、Vercel账号
创建账号
如果你还没有 Vercel 账号,先创建一个Vercel账号。
直接点击右上角的SignUp
使用刚才的github账号注册,因为部署的大部分项目都是从Github仓库导入的。
注册之后可能需要你验证手机号码,中国大陆的 +86
手机号码是可以验证的,直接输入就可以验证。验证之后进入到Vercel账号里面。
新建项目
第一步是新建项目
导入Git仓库
导入Git仓库,可以选择导入所有仓库,也可以选择导入指定仓库NotionNext
在仓库列表里面 NotionNext
然后点击Import
部署
配置你的notionnext
点击Environment Variables
,我们需要配置环境变量
Name: NOTION_PAGE_ID
Value: e4bc192eb3ac47b18c0a547fc127f542
注:Value是你的Notion个人主页的值,我们从我们之前的那个Notion模版里面点击Share
->Share to web
->Copy web link
可以看到我们的link
https://mulberry-table-1ab.notion.site/6280b79464184604bc6872e627e9b6a3?v=2cd07ed47d834c89bc60fbfee0973b6b
点击 Deploy,然后等两分钟,就可以部署成功了。
然后点击图片,就会自动跳转到Vercel自动分配给你的域名来访你的个人网站了。
warning 由于总所周知的中国大陆专属的域名污染,vercel自动分配域名可能访问不成功,没关系,我们下一步申请域名来绑定到个人网站来访问。申请域名
申请非常简单,如果你想免费白嫖,可以看描述区我的申请免费域名的教程。
我这个网站的域名就是免费白嫖的,https://techxiaofei.eu.org
如果你觉得麻烦,可以去域名供应商购买一个付费域名也是可以的。
有了域名之后就是域名配置,我们直接在setting里面找到domain然后配置域名,填写你白嫖或者购买的域名,配置后会要求你在域名解析商里面填两条记录。
一条是A记录,一条是CNAME记录。我是用Cloudflare解析的,我直接去Cloudflare填上这两个记录,如果你使用的其它的平台,比如阿里云,腾讯云之类的,也可以直接在上面填写记录。
就可以直接使用你的域名跳转到个人网站了。
网站配置
网站部署成功之后我们就可以配置主题以及内容来定制化我们的个人网站了,我们先修改主题和展示效果,这个我们在github的NotionNext仓库的blog.config.js
里面可以看到。
我们有两种方式可以修改:
- 一种是直接修改这个
blog.config.js
文件,修改之后会自动触发vercel部署。 - 一种是使用vercel项目的环境变量
Environment Variables
修改,这里的修改会覆盖掉blog.config.js
的内容。
文件里面每一行的作用都有详细的注释,你可以根据需求修改。我们在Github上的修改,无需重新部署,Vercel会监听Github的修改,自动部署。
1
2
3
AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || '小编', // 您的昵称 例如 techxiaofei
BIO: process.env.NEXT_PUBLIC_BIO || '小编的个人网站', // 作者简介
LINK: process.env.NEXT_PUBLIC_LINK || 'https://techxiaofei.com', // 网站地址
所有带有process.env
前缀的变量,都可以在Notion
里面添加环境变量配置来覆盖,同NOTION_PAGE_ID
一样,意味着如果你不想修改NotionNext
代码仓库,是完全可行的。
同时NotionNext代码仓库还有着其它非常丰富的配置可以修改,甚至可以显示主题选项,随时一键切换主题,显示鼠标点击特效,动态特效,宠物挂件,音乐播放插件,等等。
这些都等着你探索。
表格
我们回到Notion网站,可以看到我们的Notion模版,这个模版是一个表格,表格的每一行是一篇博客,我们可以在表格上面进行编辑,最终会反馈到我们的个人网站上面去。
解释一下表格各个列的意义:
type
- Post:博客,Page:菜单(归档,留言,友链等),Notice:公告status
- Published: 已发布,Invisible:不可见,Draft:草稿title
- 具体的博客内容,点击Open即可打开编辑slug
- 链接后缀,不填就是默认的notion的随机字符串,可读性不好,建议填写
其他的列都比较简单就不介绍了。
点击+New
可以添加新的一行,也就是新的一篇博客,点击文档图标打开具体的博客内容进行编辑,Notion文档支持markdown语法。
我们输入/
就可以编辑特定格式的文本,比如添加页面,待办列表,标题,表格,有序列表,无序列表,甚至还能添加媒体,比如图片,视频,音频,代码,文件等等。
所以说Notion是非常强大的。当你需要写一篇文章的时候,只需要在复制后的模版里面添加一行,然后编辑那个页面就可以了。编辑完之后,链接可以分享给其他用户,他们可以通过链接访问我们的个人主页。这也是Notion的协作工作所支持的,可以支持页面分享。
分享的页面跟你编辑的页面是一样的,并没有主题展示效果,也不支持域名自定义。
修改之后等一段时间就会自动部署到个人网站,如果你想要尽快生效,也可以在vercel手动部署。
点击项目,Build Logs
-> Redeploy
就可以了。
后记
现在我们就完整搭建了一个个人网站,是不是觉得成就感满满。
如果有什么问题请在评论区留言,我会认真解答。赶紧尝试下吧。
猜你还喜欢
- 03-29 [环境测试] Hexo部署GitHub Pages
- 03-22 [源码设置] 如何设置Xiuno BBS URL-Rewrite(伪静态设定)
- 03-06 [建站交流] PicGo + smms 构建图床
- 11-18 [emlog技巧] Emlog非插件显示评论者IP属地
- 11-09 [网站维护] WordPress 后台速度慢?加快仪表板速度的 15 种方法
- 11-09 [WordPress插件] 10 个最好用的 WordPress 聊天机器人插件(免费和付费)
- 11-09 [WordPress开发] 探索 WordPress 6.3 中的增强样板(Patterns)
- 11-09 [网站维护] 无需插件即可优化 WordPress 速度的 12 种策略
- 11-09 [网站安全] WordPress 安全统计:WordPress 到底有多安全?
- 09-20 [jsp技术] JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
- 09-15 [Lightsail容器] AWS Lightsail VPS:一种在云中运行容器的简单方法
- 07-28 [运维笔记] 解决网站出现"SSL_ERROR_RX_RECORD_TOO_LONG"问题
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[源码主题] zibll-V7.6最新版完美破解授权可用(含主题+教程)
[趣味源码] Ypay源支付最新免授权牛角魔改版
[课程] 面授系统课-王氏中药外治疗法6节
[课程] 职场必备生存法则体制内经验课
[课程] 外贸话术实战营系统课,让你不再不知所措,减少试错时间,脱变成外贸拿单达人
[课程] 餐饮人必修课
[课程] 千峰教育-小沐老师Python教程基础语法到项目实战(flask博客网站的实现) - 带源码课件
[课程] 极客时间-从 0 开发一款 iOS App
[网赚相关] 最新网易云梯计划网页版,单机月收入5000+!!
[游戏娱乐] 《永恒空间2》v1.1.39656中文版
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[即时通讯] 腾讯QQ PC版9.7.22.29315去广告绿色纯净版
[开发环境] PhpStorm2023中文激活版v2023.3.3 正式版
[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[动画] 北斗神拳(1984) [两季合集] [MKV]
[资料] 抗战阵亡将士资料+续编
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[电影] 2024年喜剧片·热辣滚烫 [mp4]
[影视] 铁爪 WEB-DL版下载 2023 The Iron Claw 23.48G
- 最新评论
-
我想看看mw2ddyy 评论于:04-26 好东西阿zfy123123 评论于:04-18 谢谢楼主xiaoqi 评论于:04-12 勿在线解压,勿手机解压,请在电脑上用最新款压缩软件解压!推荐360压缩或者好压CC下载站 评论于:04-10 无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26 谢谢支持!CC下载站 评论于:03-14 央视精品,感谢付出提供。qwer9009 评论于:03-14
- 热门tag