当前位置: 首页 > news >正文

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

文章目录

  • 前言
  • 一、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 supportedadded 1192 packages, and audited 1193 packages in 7m296 packages are looking for fundingrun `npm fund` for detailsfound 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/√ ClientCompiled successfully in 18.61sclient (webpack 5.93.0) compiled successfully

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

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


总结

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

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

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • python使用selenium切换到了iframe
  • 理解 HTTP 请求中 Query 和 Body 的异同
  • Android经典面试题之Kotlin中 if 和 let的区别
  • C语言100基础拔高题(3)
  • 计算机系统操作系统简介
  • mac电脑安装 docker镜像 btpanel/baota
  • 企业安全生产管理是否将成为新的朝阳产业?
  • 科目一考试题库(超全)!7分钟一把过科目一(总结经验)
  • 智能座舱背后主流车机平台(SA8155/SA8295)的高通Hexagon DSP是什么?
  • ubuntu apt 命令报错 Key is stored in legacy trusted.gpg keyring
  • 面向对象编程:一切皆对象
  • nohup将代码放到后端运行查看nohup命令
  • “循环购:消费即赚的创新模式“
  • VMware安装Win10系统(保姆级教程)
  • WordPress建站:如何使用Hostinger搭建WordPress外贸独立站
  • 【108天】Java——《Head First Java》笔记(第1-4章)
  • Angular4 模板式表单用法以及验证
  • CentOS 7 防火墙操作
  • CSS中外联样式表代表的含义
  • emacs初体验
  • gf框架之分页模块(五) - 自定义分页
  • Java 最常见的 200+ 面试题:面试必备
  • java正则表式的使用
  • js正则,这点儿就够用了
  • Quartz初级教程
  • Shell编程
  • TypeScript迭代器
  • vue+element后台管理系统,从后端获取路由表,并正常渲染
  • 排序算法学习笔记
  • 前端技术周刊 2019-02-11 Serverless
  • 事件委托的小应用
  • 算法-插入排序
  • 听说你叫Java(二)–Servlet请求
  • 通过git安装npm私有模块
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • ​14:00面试,14:06就出来了,问的问题有点变态。。。
  • ​LeetCode解法汇总1276. 不浪费原料的汉堡制作方案
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • # AI产品经理的自我修养:既懂用户,更懂技术!
  • # Kafka_深入探秘者(2):kafka 生产者
  • # linux 中使用 visudo 命令,怎么保存退出?
  • #pragma 指令
  • (173)FPGA约束:单周期时序分析或默认时序分析
  • (八十八)VFL语言初步 - 实现布局
  • (附源码)springboot 智能停车场系统 毕业设计065415
  • (附源码)springboot助农电商系统 毕业设计 081919
  • (四)软件性能测试
  • (转)fock函数详解
  • .cn根服务器被攻击之后
  • .net php 通信,flash与asp/php/asp.net通信的方法
  • .NET 中 GetHashCode 的哈希值有多大概率会相同(哈希碰撞)
  • .NET/C# 项目如何优雅地设置条件编译符号?
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索(基木鱼,电话,百度商桥等)同步到企业微信或者企业CRM等企业营销系统中...