从一个励志故事发现了特别牛掰的搭建静态网站的开源工具Docusaurus，很上头

已于 2024-04-02 13:51:36 修改
阅读量1.3k 收藏 17
点赞数 20
分类专栏： 工作环境 web 文章标签： 开源工具 Docusaurus 静态网站 node.js
于 2024-03-10 13:54:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weinsheimer/article/details/102763507
版权

起初只是看到这篇CSDN推送的励志故事，意外发现Docusaurus很合我意，但在简中范围内查询了一下发现东西不少，但都只聊得比较肤浅，不能让小白很快理解，不过建议还是应该看一下Docusaurus术语相关的分享；
下面是创作助手给出的信息：

Docusaurus是一个用于构建静态网站的开源工具，可以用于创建个人网站。以下是使用Docusaurus构建私人网站的步骤：

  1. 安装Node.js：Docusaurus是一个基于Node.js的工具，所以首先需要安装Node.js。可以访问Node.js官方网站下载安装程序，然后按照安装向导进行安装。
  2. 创建一个新的Docusaurus项目：打开命令行界面，进入你想要创建项目的目录，在命令行中运行以下命令：
npx @docusaurus/init@latest init my-website classic

这将使用Docusaurus模板创建一个新的Docusaurus项目。

  1. 进入项目目录：运行以下命令，进入项目目录：
cd my-website
  1. 编辑配置文件：使用你喜欢的文本编辑器打开docusaurus.config.js文件，这是Docusaurus的配置文件。在文件中，你可以修改网站的标题、描述和其他设置。
  2. 编辑页面内容：在docs文件夹中创建Markdown文件来编写网站的内容。每个Markdown文件对应网站中的一个页面。可以使用Markdown语法编写内容，并可以在文件头部添加一些元数据，如标题和描述。
  3. 启动本地开发服务器：在命令行中运行以下命令，启动Docusaurus的本地开发服务器：
npm run start

这将在本地启动一个服务器，并在浏览器中打开网站。

  1. 构建网站：当你对网站内容进行了修改并准备好发布时，可以运行以下命令构建静态网站：
npm run build

这将生成一个可发布的静态网站，存储在build文件夹中。

  1. 部署网站：将生成的静态网站文件上传到一个Web服务器上，以将网站部署到互联网上。你可以使用各种各样的Web服务器来托管Docusaurus网站，如Apache、Nginx等。

这些是使用Docusaurus构建私人网站的基本步骤。你可以根据自己的需求和喜好进一步定制和扩展你的网站。Docusaurus文档提供了更详细的指南和教程，你可以访问Docusaurus官方网站获得更多信息。

需要提醒的是，这里涉及到两部分，第一是Docusaurus本身，它可以把md文件生成为静态网站文件，当然包括网站需要的所有构架的相关文件；第二个是网站，可以是Apache、Nginx或其他的Web Server。
虽然Docusaurus有一定的网站功能，对环境还是有一定要求的，用单片机没有安装成功，尽管在单片机上跑静态和动态网站都没有问题，而且Docusaurus对Markdown格式还是有要求的，比如不接受控制符
，只接受
，但同时有很多漂亮的扩展，这些扩展又是一般Markdown 编辑器不认识的，在也是需要探索和平衡的地方。比如下面的控制符例子：

:::note

Some content with Markdown syntax. Check this api.

:::

:::tip

Some content with Markdown syntax. Check this api.

:::

:::info

Some content with Markdown syntax. Check this api.

:::

:::warning

Some content with Markdown syntax. Check this api.

:::

:::danger

Some content with Markdown syntax. Check this api.

:::

通过符号和颜色来强调重要性的加强
在这里插入图片描述

👆在IT书中经常会看到的符号，现在可以很方便地用在Docusaurus文件中。

安装Node.js所需的空间取决于所下载的安装包的版本和平台。一般来说，Windows平台的安装包大小约为30-50MB，Mac平台的安装包大小约为10-20MB，Linux平台的安装包大小约为10-20MB。但是，请注意，这只是安装包的大小，实际安装后会占用更多的空间，因为安装过程中会解压和复制一些必要的文件和库。因此，建议在安装Node.js之前保留足够的磁盘空间，以便能够容纳安装和运行Node.js所需的文件和依赖项。

安装和运行Node.js较易出问题，需要关注。

再贴一段npm的说明

npm（全称 Node Package Manager，即“node包管理器”）是Node.js默认的、用JavaScript编写的软件包管理系统。
历史：npm完全用JavaScript写成，最初由艾萨克·施吕特（Isaac Z. Schlueter）开发。艾萨克表示自己意识到“模块管理很糟糕”的问题，并看到了PHP的PEAR与Perl的CPAN等软件的缺点，于是编写了npm。
2020年3月16日，GitHub CEO Nat Friedman 宣布 GitHub 已签署收购 NPM（npm 背后的公司）的协议，并表示 npm 加入 GitHub 后会继续免费提供公共软件注册中心服务。
npm会随着Node.js自动安装；npm可以管理本地项目的所需模块并自动维护依赖情况，也可以管理全局安装的JavaScript工具。更多信息…

一个新安装的my-website需要140BM空间，多装一个就需要再加这么多；因为操作太容易了，所以有可能很快就成倍增长了，故新手要注意检查文件夹体积。

docusaurus的官方中文说明

在此分享一个台湾人做的非常好理解的视频，
链接: https://pan.baidu.com/s/1AV7816WQR-wlIte-dBaCNg 提取码: 0l3g 110MB
视频内容：
0:00 說明
1:00 安裝 Docusaurus
2:01 資料夾結構說明
2:53 blog 與 docs 資料夾說明
4:00 在 docs 新增檔案
4:30 在檔案新增 metadata (SEO)
6:38 程式碼區塊 (Code Blocks)
9:17 在 md 檔案中使用 JSX 標籤 (md, mdx)
12:14 在 docs 新增資料夾並制定目錄
16:06 新增頁面
20:05 在 md 檔案中引入 components
23:04 config 檔介紹 (title)
24:18 config 檔介紹 (favicon)
24:55 config 檔介紹 (onBrokenLinks)
27:18 config 檔介紹 (i18n)
27:52 config 檔介紹 (colorMode)
28:48 config 檔介紹 (announcementBar)
29:35 config 檔介紹 (algolia)
30:43 config 檔介紹 (prism)
33:32 使用 Vercel 部署 Docusaurus
35:31 部署失敗 onBrokenLinks 發生
37:15 移除 編輯此頁 功能
38:40 url 與 sitemap.xml (有使用 algolia 需注意的事項)

目前还没有搞得太清楚的是从docusaurus发布到自己指定网站的流程，最好是用docusaurus的工具，自己手动还是容易出错。1

有兴趣的网友请留言，希望可以一起探讨挖掘docusaurus。

一个比较努力的Docusaurus实例

关于Docusaurus的主题：
在这里插入图片描述

官方还没有可以供生产环境用的其他主题。
网上已经有小伙伴提供定制的Docusaurus主题，有兴趣的可以自己搜。

一点小遗憾：当需要将Docusaurus中的某一页单独导出成HTML分享给别人时不是很方便，而且发现在文件夹build/assets/js中也不是很干净，当然这只是美中不足。

  1. 在my-website目录里执行“npm run build” 就会在build文件夹里得到静态网站所需要的全部代码，这个build文件夹可以部署到你喜欢的任何web server，需要注意⚠️的是如果不是直接部署在根目录上得有虚拟主机virtual host，不然页面不能正常显示；当然上传的自动化根据环境有很多方法。 ↩︎

weinsheimer
关注
专栏目录
Spring Boot入门(02)：【教程】轻松搭建Spring Boot开发环境，启动你的第一个Web项目！
**My Coding Family**
08-11 3万+
快速搭建开发环境和启动项目是每个开发人员必备的技能。本文将为您提供一些简单易懂的方法和技巧，以帮助您快速搭建开发环境和启动项目。我们将介绍如何选择适合您的开发工具、配置您的操作系统、安装必要的软件包和依赖项，并开始编写您的第一个应用程序。无论您是一位新手还是一位经验丰富的开发人员，本文都会给您提供有用的信息和实用的建议，让您在最短时间内快速搭建和启动开发项目。
新手如何使用SpringBoot方便快速地搭建一个精美博客网站(源码分享且不用自己建表)
方兴未艾
04-24 3050
作者：曾中杰 有多少人只顾着眼前的六便士，却不曾抬头看看皎洁的月亮 项目地址：www.zengzhongjie.com GitHub源码下载地址：https://github.com/Mretron （能够帮上忙，不妨star一下） 背景：     博主是一名大二软件工程的学生。坚持学习课堂上未曾教授的java以及javaweb相关的知识，乃至...
docusaurus-remark-plugin-codetabs:docusaurus v2插件，可轻松制作多语言代码标签
04-02
docusaurus-remark-plugin-codetabs Docusaurus v2插件可通过将代码块转换为选项卡来快速创建多语言代码选项卡。 注意：因此，这仅在与包含Tabs和TabItem组件的Docusaurus主题一起使用时才有效。 其他说明：性能可能不太理想。 欢迎公关。 安装 # npm npm install docusaurus-remark-plugin-codetabs # yarn yarn add docusaurus-remark-plugin-codetabs 用法 在docusaurus.config.js使用该插件将其添加到每个实例的Remark插件数组中 module . exports = { presets : [ [ '@docusaurus/preset-classic' , {
Docusaurus：一款由Facebook开源的文档生成神器，让你告别繁琐的文档编写工作
Coco_Code的博客
02-01 555
Docusaurus是一个，它旨在帮助开发者快速生成、部署和维护高性能的文档网站。该项目由Facebook团队开发并维护，保证了其稳定性和可靠性。目前在github已经有和Docusaurus的这意味着你可以轻松地在项目中使用JavaScript及其生态系统中的各种工具和库。
Docusaurus 中文文档教程
gitblog_00341的博客
09-12 393
Docusaurus 中文文档教程 docusaurus-docs-Zh_CN facebook Docusaurus 文档的中文版本 , 目标版本 1.0.5 项目地址: https://gitcode.com/gh_mirro...
Hexo、VitePress、Docusaurus，哪个最适合你的静态网站生成器？
崔颢的博客
03-05 2556
综上所述，根据不同的使用场景和需求，可以选择适合的工具。如果你是一个非前端开发者，那么我建议hexo，你完全可以使用hexo提供丰富的社区模板构建你想要的页面。如果你是前端程序员，并且技术栈以vue为主，可以尝试vitepress，但是vitepress不支持博客，当然你完全可以定制化主题，但是不妨可以先看看hexo是否有满足你需求的博客主题模板。如果你是前端程序员，并且技术栈以react为主，可以使用docusaurus，它同时支持博客和文档，同样支持定制化主题。
HTML.CSS静态 原神 官方网页（开源）
zhaoyang_m的博客
08-09 5282
网页是由HTML和CSS写的，背景音乐和新闻列表有一点JS，对静态网页几乎没有影响，可删除。没有用到BootStrap之类的框架，对着官方网页F12，一点一点手写出来的，中间改动很多，类名都是照着官方网页源码起的，所以又臭又长。本人对前端了解不是很深入，对源码有问题的地方，尽量帮忙解决。
实例说明如何使用Docusaurus搭建一个静态网站
WPHunter的编程技术资料库！
01-11 1293
Docusaurus就是这样一个静态网站生成器–它在开发社区中迅速得到了普及。在这篇文章中，我们将深入探讨使用Docusaurs作为静态网站生成器的好处，以及为什么它在开发人员中越来越受欢迎。
NIT-Andhra-OpenSource-Website:NIT安得拉邦开源部门的静态网站-html source website
03-24
【NIT安得拉邦开源部门的静态网站】是一个基于HTML源码构建的网站项目，主要目的是为了展示和推广开源技术在NIT安得拉邦（National Institute of Technology, Andhra Pradesh）的应用和发展。这个项目可能由学院的...
psstools:便携式刺激规范工具-开源
06-29
该项目提供了用于处理便携式激励规范的实用工具
FPGA的设计艺术（17）如何搭建一个简易的逻辑测试平台？
Reborn Lee
08-29 2703
提到FPGA逻辑的仿真，一般指的是行为仿真或者功能仿真，还有人会称为前仿，不包含时间延迟信息，只验证逻辑功能。对于小模块的仿真，需要写一个测试文件，英文是testbench，即测试平台。在testbench里面，我们给输入信号的激励，给时钟信号等等，然后观察输出，或者处理输出，观察符合不符合预期，达到测试功能的目的。
搭建博客、自己的小窝？快来看看这些开源静态网站生成器
墨鱼菜鸡
09-09 535
点击关注上方“五分钟学算法”， 设为“置顶或星标”，第一时间送达干货。 作者：HelloGitHub-ChungZH 相信很多人都想要搭建一个自己的博客或是给项目做文档网站。本文将要推荐的静态网站生成器(Static Site Generator, SSG)，它做的事情就是把你的文档、内容(通常为 Markdown 文件)生成可发布成网站...
如何通过开源框架Gatsby搭建一个静态网站
WPHunter的编程技术资料库！
02-05 1225
​ 无论你是一名网站开发人员，是想创建个人博客、作品集网站，还是商业网站，Gatsby 都能帮助你实现目标。本综合指南将带你了解使用 Gatsby 创建静态网站的整个过程。它涵盖了从基础知识到高级主题的所有内容。
Docusaurus DocSearch 搭建
Alan的博客
10-12 554
通过 Github Actions 运行 Algolia DocSearch 实现 Docusaurus 搜索功能
【实践出真知】使用Docusaurus将md文档组织起来就是一个网站（写API文档，写教程、写日记、写博客的有福了）
IT里的交易员-博客
07-31 975
前段时间，学习Flet，访问到Flet中文网，被其简洁的风格吸引，就想着以后将自己的内容也整理一下。最终发现该网站是用Docusaurus这个工具实现的。以后写API文档，写教程、写日记、写博客有福了，只要写出markdown文档即可。现在包括csdn等很多平台都是md文档。这样移植也非常方便。下面就让我们来认识一下吧。初步探索，后面就可以根据自己的需要补充完善了。不得不说，Docusaurus是真方便，还免费，而且功能强大，是一个不可多得的利器。
搭建个人网站之Docusaurus（最新3.4版本）超详细安装和使用说明————附带详细步骤
韩江雪de 小屋
07-19 1849
因为需要快速搭建一个文档网站，要求是简单、方便修改。之前使用过wordpress、typecho、Hexo来搭建个人博客网站，但是感觉都有些臃肿，不是那么简约和容易上手。nodejs安装:https://nodejs.org/en/download/package-manager。中文网：https://www.docusaurus.cn/docs/installation。英文网：https://docusaurus.io/docs/playground。，拥有活跃的社区支持和持续的迭代更新。
【工具推荐】常用前端开源静态网站推荐
Code Metaverse
06-02 3620
作为技术人，谁不想拥有一个自己的网站的呢？一般市面上成熟的个人博客产品，比如wordpress，缺点是太重了。太重的代价就是服务器配置不高就会比较卡，但是静态网站就没有这个问题，经过build出来的网页文件，可以放在任何地方，包括Github Pages、web服务器、CDN，服务器的成本一下子就省下来了。https://www.gatsbyjs.com/Gatsby 使开发人员能够使用基于 React 的框架和创新的数据层构建快速、安全且功能强大的网站，这使得将不同的内容、API 和服务集成到一个 Web
docusaurus简介及使用心得
u013994400的博客
12-22 427
Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具，使用 Markdown 即可更新网站。构建一个带有主页、文档、API、帮助以及博客页面的静态网站，只需5分钟。同类竞品还有vuepress，docusaurus是基于react，而vuepress是基于vue的。
【Docusaurus】引入PlantUML
whhring的博客
04-20 1171
【Docusaurus】引入PlantUMLDocusaurus与PlantUML在VSCode上使用PlantUML在Docusaurus项目中引入PlantUML引入PlantUML在MarkDown中使用实现效果 Docusaurus与PlantUML Docusaurus是一种基于React的文档框架，支持markdown、Jsx等文档格式。而PlantUML作为一种简单直观的图形语言，在Docusaurus V2上暂时不支持。 在VSCode上使用PlantUML 目前在VSCode中，有现成的扩
如何基于哈工大电子技术课程设计搭建一个测量电池阻抗的交流激励源电路？
最新发布
10-28
参考资源链接：[哈工大电子课设：锂电池阻抗测量电路设计与分析](https://wenku.csdn.net/doc/42cwp474d8?utm_source=wenku_answer2doc_content) 在哈工大的电子技术课程设计中，搭建一个用于测量电池阻抗的交流激励源电路是一项重要的实践任务。为了实现这一目标，你可以按照以下步骤进行： 1. 理解电池阻抗测量的原理：首先，需要对电池阻抗的测量原理有清晰的理解，包括欧姆内阻和极化内阻的概念，以及它们在不同频率下的表现。 2. 设计交流激励源电路：该电路应该能够在0.1Hz到1000Hz的宽频率范围内产生交流信号。你可以使用信号发生器来产生所需的交流激励信号，并通过功率放大器来提供足够大的电流。 3. 电路板布局与焊接：规划电路板布局时，考虑信号的完整性与电路的稳定性。使用合适的焊接技术和工具来搭建电路板，确保所有组件都正确无误地安装。 4. 甲乙类功率互补电路的搭建：为提高电路性能，采用甲乙类功率互补电路来减少交越失真。这要求正确选择晶体管和偏置电压，以保证电路能够在不同频率下正常工作。 5. 测量与数据分析：通过搭建好的电路，你可以测量电池两端的电压和电流，进而计算出电池的阻抗。使用示波器和数字万用表等仪器可以提高测量的准确性。 6. 绘制幅频特性和相频特性曲线：使用测量数据，借助计算机辅助软件绘制出电池阻抗随频率变化的幅频特性和相频特性曲线，分析不同频率下电池的阻抗特性。 7. 故障排查与调试：在电路调试阶段，如果遇到问题，如信号源设置问题或接地问题等，要使用万用表等工具进行故障诊断和排除。 在整个项目过程中，参考《哈工大电子课设：锂电池阻抗测量电路设计与分析》将会十分有用。这份报告详细描述了课程设计的各个环节，包括电路设计、数据收集和分析，以及故障排查的过程，为你的设计提供实际案例和解决方案。 完成本课程设计后，你不仅能掌握电池阻抗测量的理论和实践技能，还能提高电路设计和问题解决的能力，为未来在电子技术领域的进一步学习和工作打下坚实基础。 参考资源链接：[哈工大电子课设：锂电池阻抗测量电路设计与分析](https://wenku.csdn.net/doc/42cwp474d8?utm_source=wenku_answer2doc_content)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值