avatarSHAXUTANG

我非常喜欢 Docusaurus 的设计风格,它能帮我快速的构建网站,还可以自定义文档主题,改造成属于自己风格的网站

搭建初衷

很简单,谁不想拥有一个属于自己的网站呢 🐻?

为什么写博客?

学过编程的都知道,不管是前端,还是 Java Python 这些,要学的知识真的太多太多了,人的大脑容量是有限的,想全都记住不太现实,不自己实战一下的话,过一段时间还是会遗忘!写博客需要思考和总结,这可以帮助个人或组织在忙碌的工作中保持长期思考。

搭建过程

如果你也想搭建一个个人网站,我的搭建过程可以给你当作参考。

博客选型

市面上有很多写博客的平台 CSDN博客园知乎。 但我个人并不喜欢这类,因为里面的内容鱼龙混杂,什么都有。 因此我选择速搭建一个属于自己风格的网站。

Docusaurus 是一个静态网站生成器,它使用了 React 的全部功能来构建具有快速客户端导航的单页应用,从而赋予你的网站交互性。它提供了开箱即用的文档功能,并且可以用于创建任何类型的网站,例如个人网站、产品介绍、博客、营销页等等。Docusaurus 本质上是一组 npm 包,可以通过命令行工具来搭建 Docusaurus 骨架网站。使用 Docusaurus 创建新的初始应用也非常简单,可以在新的空存储库或现有存储库中的任何位置运行相关命令,它将创建一个包含脚手架文件的新目录。

前提知识

  • Node.js 是一个强大且流行的 JavaScript 运行时环境,适用于构建高性能、可扩展的服务器端应用程序。

  • React 是一个强大且流行的 JavaScript 库,用于构建高效、可维护、组件化的用户界面。

创建 Docusaurus 项目

pnpm create docusaurus

项目创建完成后执行命令

pnpm start

Docusaurus 的使用非常简单,我们只需要在 (blog/docs) 目录下编写 markdown 即可,它会帮我们解析成响应式页面适配桌面端和手机端,并且生成导航栏展示当前文章目录索引。我们也可以在 pages 目录下使用 React 组件编写特定的页面。

我们也可以使用 Swizzle 改造 Docusaurus 中的主题组件让它变成自己想要的样子。

部署

Netlify

Netlify 是一个静态网站托管和构建工具,可以帮助开发者快速搭建网站并实现自动部署。它提供了一系列的工具和功能,例如连续集成、自动构建、版本控制、域名管理等,使得开发者能够轻松地搭建和维护自己的网站。

上传 Github 之后用 Netlify 导入 Github 仓库之后,它会帮我们打包部署,并提供免费的 CDN、HTTPS, 当你有任何修改提交 Github 之后, Netlify 会自动帮我们重新打包部署更新。

Vercel

Vercle 的使用方式和 Netlify 使用方式差不多,都是可以从 Github 中导入,并且可以自动更新部署的。

站点

因为不涉及后端,所以我就直接用 Netlify 托管了