推广

tip
推荐以下翻墙必备工具
推荐 链接 教程
IEPL国际专线VPN 注册链接 IEPL内网级专线机场推荐、无视墙敏感时期、解锁ChatGPT、奈飞流媒体
青柠翻墙VPN 注册链接 自用机场推荐,翻墙必备、解锁ChatGPT、奈飞流媒体
👉长桥证券开户👈 文字教程 【视频教程】-长桥证券新加坡版开户入金教程:港美股永久免佣+0门槛开户
华侨银行OCBC开户 文字教程 【视频教程】-手把手教你开通新加坡华侨银行OCBC账户-保姆级教程
美国虚拟信用卡 注册链接 美国虚拟信用卡,轻松搞定ChatGPT4 Plus会员订阅

背景

今天我们开启一个新的系列教程,使用Notion搭建个人网站系列

这是这个系列的第一篇教程 - 使用Notion创建个人主页

之前我制作了一个系列教程 - 使用hugo搭建个人博客系列

Hugo是一个非常优秀的搭建静态博客的模版,但是Hugo对于零编程基础的电脑用户来说有一定的上手难度,需要执行一些电脑命令和代码改造。

所以我就想做一个让没有编程基础的用户也能轻松免费搭建自己的个人博客网站。Notion就是满足这个要求的工具,可以让你不用一行代码,一条命令 轻轻松松搭建一个自己的个人网站。

效果展示

如图为个人网站的展示效果: display

搭建这个个人网站仅仅需要几个简单的背景知识和账号:

  1. Notion账号,Notion是一款功能强大的效率软件,它极大的提升了我们的学习和工作效率,并且能很好的帮助我们管理我们的日常生活、学习、工作等各种事情。比如笔记,任务,工作,会议记录,规划,代办事项等,可以单独使用也可以团队协作。
  2. Github账号,个人网站的主题是通过Github的NotionNext 项目来实现和配置的,有着丰富的展示效果,比如布局,主题,文章目录,添加音乐,评论系统等等。
  3. Vercel账号,是一个托管平台,负责部署NotionNext项目,来最终显示你的个人网站。
  4. 免费域名-freenom,你可以选择免费域名网站或者购买付费域名绑定到你的个人网站。

我会通过一个系列来教大家如何完整的搭建自己的个人网站

  • 使用Notion创建个人主页
  • Notion个人主页部署到Vercel平台
  • 绑定免费域名到Notion个人网站

使用Notion创建个人主页

首先我们需要有Notion账号,输入notion的官网地址: https://notion.so 登录使用。

如果是手机端可使用Notion App

如果你没有notion账号,可以注册一个notion账号,可以使用email地址或者google地址注册。

侧边栏可以创建非常丰富的笔记类型,能满足基本所有的效率笔记需求。

home

登录账号之后,打开这个Notion模版 Notion模版

duplicate

然后点击右上角的Duplicate,把模版克隆到你的账号下面,这样你就可以开始创作了。

我们把模版克隆到到个人账户之后,点击右上角的Share->Share to Web,那么互联网上的用户就能使用这个链接来访问我们的个人页面了。

而这个页面就是你个人网站的内容编辑页面,你可以先修改图标和名称。

表格

这个模版是一个表格,表格的每一行是一篇博客,我们可以在表格上面进行编辑

解释一下表格各个列的意义:

  • type - Post:博客,Page:菜单(归档,留言,友链等),Notice:公告
  • status - Published: 已发布,Invisible:不可见,Draft:草稿
  • title - 具体的博客内容,点击Open即可打开编辑
  • slug - 链接后缀,不填就是默认的notion的随机字符串,可读性不好,建议填写

其他的列都比较简单就不介绍了。

点击+New可以添加新的一行,也就是新的一篇博客,点击文档图标打开具体的博客内容进行编辑,Notion文档支持markdown语法。

我们输入/就可以编辑特定格式的文本,比如添加页面,待办列表,标题,表格,有序列表,无序列表,甚至还能添加媒体,比如图片,视频,音频,代码,文件等等。

所以说Notion是非常强大的。当你需要写一篇文章的时候,只需要在复制后的模版里面添加一行,然后编辑那个页面就可以了。编辑完之后,链接可以分享给其他用户,他们可以通过链接访问我们的个人主页。这也是Notion的协作工作所支持的,可以支持页面分享。

分享的页面跟你编辑的页面是一样的,并没有主题展示效果,也不支持域名自定义。

share

而我们最终想要的效果是搭建成自己的个人网站,有完整的主题,并能绑定到个人域名,这个就需要github+vercel的支持,这个内容我们下个教程再讲。

display

<全文完>

视频教程

本篇博客的视频教程首发于 Youtube:科技小飞哥,加入 电报粉丝群 获得最新视频更新和问题解答。