当前位置:网站首页 > 更多 > 站长帮 > 正文

[建站相关] 使用Notion搭建个人网站系列一、使用Notion创建个人主页

作者:CC下载站 日期:2023-02-15 01:00:55 浏览:5 分类:站长帮

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

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

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

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

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

效果展示

如图为个人网站的展示效果: [建站相关] 使用Notion搭建个人网站系列一、使用Notion创建个人主页

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

  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地址注册。

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

[建站相关] 使用Notion搭建个人网站系列一、使用Notion创建个人主页

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

[建站相关] 使用Notion搭建个人网站系列一、使用Notion创建个人主页

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

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

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

表格

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

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

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

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

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

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

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

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

[建站相关] 使用Notion搭建个人网站系列一、使用Notion创建个人主页

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

[建站相关] 使用Notion搭建个人网站系列一、使用Notion创建个人主页

<全文完>

您需要 登录账户 后才能发表评论

取消回复欢迎 发表评论:

关灯