【实践出真知】使用Docusaurus将md文档组织起来就是一个网站(写API文档,写教程、写日记、写博客的有福了)


前言

前段时间,学习Flet,访问到Flet中文网,被其简洁的风格吸引,就想着以后将自己的内容也整理一下。最终发现该网站是用Docusaurus这个工具实现的。以后写API文档,写教程、写日记、写博客有福了,只要写出markdown文档即可。现在包括csdn等很多平台都是md文档。这样移植也非常方便。下面就让我们来认识一下吧。


一、Docusaurus 是什么?

Docusaurus 官网:https://docusaurus.io/
Docusaurus 中文网简介:
⚡️ Docusaurus 能够帮助您快速创建一个 精美的文档网站。

💸 定制一套技术栈是非常昂贵的。相反,Docusaurus 让您只需专注于内容,编写 Markdown 文件即可。

💥 准备好迎接更多功能了吗?还有版本控制、i18n、搜索和主题定制等高级功能。

💅 借鉴 最好的 Docusaurus 网站 以获取灵感;还有更多推荐您阅读的内容。

🧐 Docusaurus 是一款静态网站生成器。它利用 React 的全部功能来构建具有快速客户端导航功能的 单页应用程序(single-page application),从而使您的网站具有交互性。它提供了开箱即用的 文档功能,也可用于创建 任何类型的网站(例如 个人网站、产品展示、博客、营销落地页面等)。

二、一键生成网站框架并预览

1. 系统需求

安装Docusaurus需要Node.js,所以提前下载安装好。官方提示:
Node.js 18.0 或更高版本(可以通过执行 node -v 命令来查看当前所用的 Node.js 版本)。你可以使用 nvm 管理同一台计算机上安装的多个 Node 版本。
当安装 Node.js 时,建议选中与依赖项相关的所有复选框。

2. 脚手架项目网站(一键生成网站框架)

安装 Docusaurus 的最简单方法是使用命令行工具,该工具可帮助您搭建 Docusaurus 网站的雏形。您可以在新的空仓库中或已有的仓库中的运行此命令,它将创建一个包含脚手架文件的新目录。

npx create-docusaurus@latest my-website classic

my-website是你的网站目录名称,建议先转到自己的目录,然后再运行以上目录。

(base) C:\Users\Administrator>d:

(base) D:\>cd pythonrun

(base) D:\pythonrun>npx create-docusaurus@latest ktquant-doc classic
Need to install the following packages:
create-docusaurus@3.4.0
Ok to proceed? (y) y
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
√ Which language do you want to use? » JavaScript
[INFO] Creating new Docusaurus project...
[INFO] Installing dependencies with npm...
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported

added 1192 packages, and audited 1193 packages in 7m

296 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[SUCCESS] Created ktquant-doc.
[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 ktquant-doc`
  `npm start`

Happy building awesome websites!

npm notice
npm notice New major version of npm available! 9.8.1 -> 10.8.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.2
npm notice Run npm install -g npm@10.8.2 to update!
npm notice

3. 生成的目录内容

打开刚才指定的目录,即可看到对应的内容。
在这里插入图片描述
打开docs目录,可以看到有如下三个目录和文件,这就是以后网站将展示的内容:
在这里插入图片描述

4. 网站运行与展示

(base) D:\pythonrun>cd ktquant-doc

(base) D:\pythonrun\ktquant-doc>npm run start

> ktquant-doc@0.0.0 start
> docusaurus start

[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at: http://localhost:3000/

√ Client
  Compiled successfully in 18.61s

client (webpack 5.93.0) compiled successfully

等看到Docusaurus website is running at: http://localhost:3000/即表示已经生成好并运行成功。
访问网页后可以看到如下内容。

在这里插入图片描述
如上图,是不是和docs目录内容一样啊!到这里就已经完成了网站的生成和展示。下面就是根据自己的需要修改md文档喽!


总结

初步探索,后面就可以根据自己的需要补充完善了。不得不说,Docusaurus是真方便,还免费,而且功能强大,是一个不可多得的利器。

以上只是部署到内网给自己用的,最终要部署到公网还需要build为静态网页,并通过Nginx等服务器托管,添加域名等方可以使用。具体可以自己百度。

  • 27
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT里的交易员

分享是一种快乐,打赏是一种肯定

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值