🗒️博客搭建_我为什么选Notion
2023-2-26
| 2024-2-27
0  |  阅读时长 0 分钟
type
status
date
slug
summary
tags
category
icon
password
Author：William Huang

😎搭建个人博客网站的目的？

目的:
①能够有助于沉淀技术, 学过的知识用自己的话总结输出,费曼学习法
②记录个人的想法与思考, 构建个人知识库
③方便分享博文给别人, 提升沟通效率
④储备足够多的知识, 方便日后输出打造个人IP
 

🧐搭建方法的选择

搭建博客的方法有很多种,常见的有

⭐使用博客平台：

博客平台比如WordPress、Blogger、Medium等都是非常流行的选择。这些平台提供了简单易用的界面和丰富的主题选择，让你可以快速创建自己的博客。不过这些平台的自由度较低，定制化程度也不高。
  • 优点：
    • 界面简单易用，对于没有技术背景的用户来说非常友好。
    • 提供了许多主题和插件，可以让博客网站变得更加美观和功能强大。
    • 不需要购买域名和服务器，可以直接使用平台提供的子域名。
      •  
  • 缺点：
    • 自由度较低，无法进行高度定制和个性化设计。
    • 平台可能会有广告等限制，影响用户体验。
    • 数据和内容的所有权可能受到限制，不能自由控制自己的博客内容。
 

⭐使用静态网站生成器：

静态网站生成器比如Jekyll、Hugo、Gatsby、Hexo等可以让你在本地环境中编写博客，然后生成一个静态网站，你只需要将生成的文件上传到服务器上即可。这些工具提供了丰富的主题和插件，支持Markdown格式，定制化程度很高。
  • 优点：
    • 可以使用本地编辑器编写文章，更加方便和自由。
    • 生成的静态文件加载速度快，安全性高，且适合处理高流量的博客网站。
    • 可以选择丰富的主题和插件，定制化程度高，可以满足不同用户的需求。
  • 缺点：
    • 对于没有技术背景的用户来说，学习曲线可能较陡峭。
    • 需要购买域名和服务器，需要对服务器进行一定的配置和管理。
    • 需要手动部署，不如博客平台方便

⭐使用云服务：

一些云服务比如GitHub Pages、Netlify等提供了免费的静态网站托管服务，你只需要将博客源码上传到GitHub或者GitLab上，就可以在这些平台上部署你的博客了。
GitHub Pages: https://pages.github.com/
Netlify: https://www.netlify.com/
  • 优点：
    • 免费使用，不需要购买域名和服务器。
    • 部署简单，可以快速搭建博客网站，且无需进行服务器的配置和管理。
    • 可以使用 Git 和 GitHub Pages 等服务进行博客的部署和管理，操作简单。
  • 缺点：
    • 对于一些高级功能来说，可能需要额外的费用才能使用。
    • 受限于云服务提供商的限制，不如自己搭建博客灵活。
    • 无法完全掌握数据和内容的所有权，有一定的安全风险。

⭐自己搭建博客：

如果你有一定的技术水平，也可以选择自己搭建博客。你需要购买域名和服务器，然后安装Web服务器、数据库、博客程序等，配置完成后你可以使用任何你喜欢的编辑器或者CMS来编写和发布文章。
  • 优点：
    • 自由度和定制化程度非常高，可以完全控制博客网站的内容和外观。
    • 可以选择任何你喜欢的编辑器或者CMS来编写和发布文章，更加灵活。
    • 不受任何限制，完全掌握数据和内容的所有权。
缺点：
  • 需要具备一定的技术水平，对于没有技术背景的用户来说较为困难。
  • 需要购买域名和服务器，需要对服务器进行一定的配置和管理。
  • 需要自己进行备份和维护，工作量较大。

😋我选择NotionNext的原因:

  • 我自己是一个Notion的重度用户,平时的个人的知识结构与知识库的搭建都是靠Notion实现的,所以根据奥卡姆剃刀原则,如无必要, 勿增实体.
  • 找到了Github上一位大佬开发的NotionNext项目,完美符合了我对于Notion的使用理念和博客效果的要求,使用Noton自带的数据库功能管理文章,方便强大好用
Notion博客后台管理示意图(点击展开)
notion image
这就是采用NotionNext写博客在后台的管理页面,对于已经掌握如何使用Notion数据库的人来说还是十分方便的,当然缺点就是Notion一切都是在线上操作,没有本地文件,并且需要科学上网,Notion本身需要一定的学习成本, 如果可以接受这些的话使用notion还是很便利的
  • 使用 Hexo 等静态网站生成器需要将 Notion 内容通过 Markdown 导出，然后按照生成器的规范操作，调用命令行，更改图片路径等，花费大量时间在于创作内容本身不相关的事情之上，效率低，并且折腾了几天后，发现自己并没有学到前端方面的知识，只是学会了如何操作 Hexo 这种工具而已，何况对于使用 Notion 创作的人来说还算不算上是方便的工具，遂弃用。
  • 使用Vercel托管Notion数据库，并且使用其自动部署功能将生成的静态网站推送到GitHub或其他代码托管平台上
 

📝原理+如何实现

NotionNext是一个基于 Next.js的开源Notion博客生成器.
目的是帮助写作爱好者们通过Notion笔记快速搭建一个独立站，从而专注于写作、而不需要操心网站的维护。
NotionNext是一个使用 NextJS + Notion API 实现的，部署在 Vercel 上的静态博客系统。
NotionAPI(点击展开)
Notion API 允许开发者通过 REST API 与 Notion 数据库进行交互。通过 Notion API，您可以读取和写入 Notion 数据库中的数据，包括页面、数据库、块、列表和用户等资源。Notion API 还提供了一些高级功能，例如筛选、排序和分页数据。
使用 Notion API，您可以创建自己的应用程序，从而实现对 Notion 数据库的自定义操作。例如，您可以使用 Notion API 将 Notion 数据库与其他应用程序集成，例如 Slack 或 Zapier。您还可以使用 Notion API 创建自定义工具或脚本，以自动化或简化 Notion 工作流程。
要使用 Notion API，您需要首先创建一个 Notion 应用程序，并通过 Notion API 访问该应用程序的 Token。然后，您可以使用 Notion API 来执行各种操作，例如读取和写入 Notion 数据库中的数据，以及与其他应用程序集成。Notion API 还提供了一些高级功能，例如筛选、排序和分页数据。
Notion API 是一个强大的工具，可以帮助您更轻松地管理和操作 Notion 数据库。如果您是开发人员或希望自定义 Notion 工作流程的用户，那么 Notion API 绝对值得一试。
Vercel(点击展开)
Vercel是一个云端部署服务，它提供全球性的CDN、自动化的部署、自动化的缩放和无服务器函数等功能。Vercel还提供了一个名为Vercel for GitHub的工具，可以与GitHub集成，可以将GitHub存储库的代码自动部署到Vercel上，从而实现无缝的集成。Vercel可以用于部署各种类型的应用程序，包括静态网站、单页应用程序、服务器端渲染应用程序等。同时，它还支持多种语言和框架，包括React、Next.js、Vue、Angular、Node.js等。在NotionNext中，我们使用Vercel托管Notion数据库，并使用其自动部署功能将生成的静态网站推送到GitHub或其他代码托管平台上。
它将您的Notion笔记渲染成静态的博客页、并托管在Vercel云服务中。
与Hexo静态博客相比较不同的是，您无需每次写好的文章都要推送到Github，编写与发布只在您的Notion笔记中完成。

😉引用技术

  • 框架: Next.js
      • Next.js 是一个基于 React 的 Web 框架，可以帮助你快速构建 React 应用程序。它提供了许多有用的功能，例如服务器端渲染、自动代码分割、静态导出等等，可以帮助你构建快速、可靠的 Web 应用程序。Next.js 还提供了许多插件和工具，可以帮助你更轻松地开发和部署应用程序。例如，它可以与 Vercel、Netlify 等云服务进行集成，可以自动化部署应用程序并提供许多其他有用的工具和服务。
  • 样式: Tailwind CSS 和 @tailwindcss/jit compiler
      • Tailwind CSS 和 @tailwindcss/jit compiler 是用于设计和样式的工具，可以帮助你快速创建自定义样式。
  • 渲染: React-notion-x
      • React-notion-x 是一个用于渲染 Notion 数据库的 React 库，可以帮助你将 Notion 页面和数据库渲染到你的博客中。Giscus、Gitalk、Cusdis 和 Utterances 都是评论系统，可以帮助你添加评论功能。
  • 评论: Giscus, Gitalk, Cusdis, Utterances
      • Giscus、Gitalk、Cusdis 和 Utterances 都是评论系统，可以帮助你添加评论功能。
  • 图标: Fontawesome
      • Fontawesome 是一个用于图标的工具，可以帮助你添加漂亮的图标到你的博客中。
       
综上所述，采用的技术属于静态网站生成器的范畴。Next.js 可以用于生成静态 HTML 文件，Tailwind CSS 和 @tailwindcss/jit compiler 用于样式，React-notion-x 用于渲染 Notion 数据库，而 Giscus、Gitalk、Cusdis 和 Utterances 则用于添加评论功能。虽然这些技术都是基于 JavaScript 的，但由于使用静态网站生成器，因此你不需要自己管理服务器和数据库，也不需要编写后端逻辑。(只需要把Notion玩明白就行了hhh)

相关链接

NotionNext作者的网站: https://tangly1024.com/
NotionNext搭建网站教程: NotionNext-搭建Notion博客

🤠搭建博客展望

想自己搭建博客，需要以下技术：
  1. HTML 和 CSS：用于设计和布局博客网站的页面和样式。
  1. JavaScript：用于编写交互式功能，例如网站导航菜单、滚动效果、图像轮播、社交媒体分享等。
  1. Web 服务器：用于托管博客网站的代码和文件，并将其提供给用户访问。常用的 Web 服务器包括 Apache、Nginx 等。
  1. 域名和 DNS：用于让用户可以通过域名访问你的博客网站。你需要注册一个域名，并将其解析到你的服务器上。
  1. 数据库：用于存储博客网站的数据，例如文章、评论、用户信息等。常用的数据库包括 MySQL、PostgreSQL 等。
  1. 编程语言和框架：用于开发和部署博客网站的后端逻辑。常用的编程语言包括 Python、Ruby、PHP、JavaScript 等，常用的框架包括 Django、Ruby on Rails、Flask 等。
  1. 版本控制工具：用于管理博客网站的代码和文件，记录历史变更和协同开发。常用的版本控制工具包括 Git、Subversion 等。
  1. 安全和性能优化：需要了解如何保护博客网站免受攻击和漏洞利用，并对博客网站进行性能优化，提高用户体验。
以上技术并不是所有的都是必需的，具体取决于你的博客网站的需求和规模。 如果你只是想搭建一个简单的博客网站，只需要了解 HTML、CSS 和静态网站生成器即可。 如果你想开发更复杂的博客网站，则需要掌握更多的技术和知识。

😎总结:

不同的博客搭建方法适应有不同需求的人群

从如何管理自己的博客文章来说:
  • 如果你是新手小白
想要在博客平台上就完成一切的操作，不想太多花心思在博客搭建上，那么博客平台比如WordPress、Blogger、Medium等都是非常不错的选择。虽然自由化定制化程度不高，但是简单易用的界面和丰富的主题选择，可以快速创建自己的博客。
  • 如果你更看重本地化的博客管理又不想从头手撸代码
喜欢采用传统的文件夹方式管理自己的博客,写好md格式的博客文章后再逐个推送,那么采用Jekyll、Hugo、Gatsby、Hexo等将是很好的选择
  • 如果你是Notion的爱好者
并且熟悉Notion的数据库操作，平时的知识管理博客文章撰写都是在Notion上完成，那么选择一款可以用Notion生成博客的文章将会是很不错的选择
  • 如果你想通过搭建博客项目来锻炼前后端开发
可以选择自己搭建博客。购买域名和服务器，然后安装Web服务器、数据库、博客程序等，配置完成后你可以使用任何你喜欢的编辑器或者CMS来编写和发布文章。
 
致谢：
💡
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
 
 
相关文章 :
技术分享
  • 效率工具
  • 建站
    • 2023cn互联网生态演变分析做PPT能有多快？- Chat+Pandoc给你答案
    • Cusdis
    目录