文章目录
- 前言
- 一、Docusaurus 是什么?
- 二、一键生成网站框架并预览
- 1. 系统需求
- 2. 脚手架项目网站(一键生成网站框架)
- 3. 生成的目录内容
- 4. 网站运行与展示
- 总结
前言
前段时间,学习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等服务器托管,添加域名等方可以使用。具体可以自己百度。