Docusaurus 静态博客系列（1）- 系统搭建

静态博客千千万， 比如：Jekyll

、Hexo 、VuePress、Hugo  等等 这里介绍使用 Docusaurus ，它是一个用于构建开源项目网站的静态网站生成器。它由 Facebook 开发，旨在简化创建、维护和发布技术文档和项目文档的过程。 Docusaurus 使用 React 作为其前端框架，这意味着你可以利用 React 生态系统中的组件和库来增强你的网站。

接下来介绍 Docusaurus 来搭建静态博客站点的具体过程。它有中文的官网，内容很详细。

一键安装

首先一行命令安装系统

我们使用官网建议的使用带预设模版的默认主题。 my-website 修改为你定义的名称 出现的选项全部默认即可

npx create-docusaurus@latest my-website classic

安装完毕后，会出现如下提示：

[SUCCESS] Created my-website.
[INFO] Inside that directory, you can run several commands:

  `npm start`
    Starts the development server.

  `npm run build`
    Bundles your website into static files for production.

  `npm run serve`
    Serves the built website locally.

  `npm run deploy`
    Publishes the website to GitHub pages.

We recommend that you begin by typing:

  `cd my-website`
  `npm start`

Happy building awesome websites!

接下来进入安装目录运行本地开发模式：

npm run start

默认情况下访问地址： http://localhost:3000/

修改基本信息

需改修改安装目录下这个配置文件docusaurus.config.js 能配置的信息见官网：https://docusaurus.io/zh-CN/docs/api/docusaurus-config

在这里你可以修改站点的标题、顶部的导航、页脚的链接等等。

创建第一篇博客

情况下，博客地址为：http://localhost:3000/blog

我们在安装目录下的 blog 文件夹中创建一个 markdown 文件 ，以创建日期格式命名，例如：2024-05-27-Hello 少数派.md 编写博客内容如下：

---
slug: /test
title: 你好，少数派
tags: [docusaurus、少数派]
---

你好，少数派，https://sspai.com/

其中 Markdown front matter

参考需要填写的字段。 开发模式下，系统支持热部署，所以修改完毕直接生效。

发布博客到Vercel

我们将博客托管在 Vercel 上，其提供免费的服务，并且配合 Github 主要我们提交代码，Vercel 就会自动部署。

首先我们将代码推送到 Github 上。在 Github 上新建项目：ssp-test 然后在我们的安装目录依次执行：

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:lichlaughing/ssp-test.git
git push -u origin main

然后我们使用 Github 账号登录Vercel

点击新建项目，因为我们使用的 Github 登录，所以可以直接搜索上面创建的项目。如果搜索不到如下所示

点击下面的配置 app 进入 Github 选择我们创建的仓库即可(如果你创建的是私有的仓库就会出现这个提示。)

选择完毕后，点击导入，右侧直接 Deploy 即可，系统会自定识别为Docusaurus

然后就开始自动构建

构建完毕会提示

然后点击右上角的Continue to Dashboard 进入配置页面，它有默认的访问域名，但是国内访问不了，所以需要你有个自定义域名。 在 setting->Domains 选项中添加自定义域名，并在域名提供商上添加 cname 解析即可。

添加解析完毕后，系统会自动添加 SSL 证书，就可以 https 访问了！ 至此，Docusaurs 静态博客系列（1）- 系统搭建就完毕了，还是很简单且方便的。