跳到主要内容

Docusaurus 静态博客系列(1)- 系统搭建

· 阅读需 3 分钟
故事的程序猿���👨🏻‍💻
一个后端打酱油程序猿

静态博客千千万, 比如:JekyllHexo 、VuePressHugo  等等 这里介绍使用 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)- 系统搭建就完毕了,还是很简单且方便的。

版权声明:除特别声明外,均采用CC BY-NC-SA 4.0许可协议。转载请注明来自` 故事的程序猿!`
侵权提示:部分信息可能来源于网络,仅作为学习和参考。如发现有侵权,请随时联系删除!

评论