5分钟站点生成神器——Docusaurus

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具,使用 Markdown 即可更新网站。构建一个带有主页、文档、API、帮助以及博客页面的静态网站,只需5分钟。

为什么要使用Docusaurus

Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具,使用 Markdown 即可更新网站。构建一个带有主页、文档、API、帮助以及博客页面的静态网站,只需5分钟。


Docusaurus 是一个静态站点生成器。它构建了一个具有快速客户端导航的单页应用程序,利用React的全部功能使您的站点具有交互性。它提供开箱即用的文档功能,但可用于创建任何类型的网站(个人网站、产品、博客、营销登录页面等)。


通过本教程中,你将从头开始构建自己的应用,分别使用Docusaurus CLI 和 云开发平台

Docusaurus-CLI 快速搭建项目

一、搭建本地开发环境

  • Docusaurus 需要 Node.js版本 >= 14 或以上(可以通过运行检查node -v)。您可以使用nvm在安装的单台机器上管理多个 Node 版本。安装 Node.js 时,建议您选中所有与依赖项相关的复选框。


  • npm 包管理器  因为我们通常都会使用Docusaurus 提供的脚手架搭建项目结构,所以要下载并安装 npm 包。本指南使用 npm 客户端命令行界面,该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端,请在终端窗口中运行 npm -v 。


  • Docusaurus 本质上是一组 npm

二、创建新的初始应用

  • 安装 Docusaurus 最简单的方法是使用命令行工具来帮助您搭建 Docusaurus 骨架网站。您可以在新的空存储库或现有存储库中的任何位置运行此命令,它将创建一个包含脚手架文件的新目录。

npx create-docusaurus@latest my-website classic


  • 新建完成后,指定文件夹的目录如下:

my-website

├── blog

│   ├── 2019-05-28-hola.md

│   ├── 2019-05-29-hello-world.md

│   └── 2020-05-30-welcome.md

├── docs

│   ├── doc1.md

│   ├── doc2.md

│   ├── doc3.md

│   └── mdx.md

├── src

│   ├── css

│   │   └── custom.css

│   └── pages

│       ├── styles.module.css

│       └── index.js

├── static

│   └── img

├── docusaurus.config.js

├── package.json

├── README.md

├── sidebars.js

└── yarn.lock



三、启动应用服务器

进入工作区目录,并启动这个应用。

cd my-website

npm run start

npm run start 命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用,

会打开浏览器,并访问 http://localhost:3000/

你会发现本应用正运行在浏览器中。

参考文献:https://docusaurus.io/

云平台一键部署Docusaurus

一、创建环境

想要一键部署Docusaurus,需要以下账号和服务:

二、创建Docusaurus应用

  • 云资源访问授权。如果您之前没有使用过云开发平台,会出现云资源授权管理的选项,往下拉出现直至同意授权的字样,点击「同意授权」后出现授权成功,点击进入「下一步」。


  • 绑定Github账号。授权完成后选择来源仓库为Github,按照提示点击去绑定,绑定GitHub帐号,登录后并点击Authorize Aliyunworkben允许云开发平台构建、发布你的GitHub代码为可访问的网站。


  • 选择fork好的“Docusaurus”代码仓库。选择第一步中的代码仓库主干分支,并点击下一步。主干分支一般指的是代码的master或main等分支。

填写基本信息,完成创建。填写基本信息并点击「完成」。成功后进入到应用详情和部署界面。

三、在日常环境部署

  • 一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。

  • 访问Docusaurus网站。日常环境的测试域名也是可以访问的,点击访问已部署网站按钮会出现一个弹出,点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后,可以继续本地编码,并将代码push到应用的“基本信息”中对应的代码仓库内。


多端应用一键上云

现如今身处在随时会到来新状况的大环境下,做好自己便是在不安中树立了一颗屹立不倒的松树。作为开发者们每天都要面临新的代码、应用,保持随时学习的状态和能力也可让自己多一份安稳。阿里云云开发平台的初衷是为每一位开发者提供免费、便捷的云上研发工作平台,通过学习与实操演练两种模式,从入门到精通快速上手Serverless和云开发技术。0门槛全云端开发、随时随地在线协同、业界领先Serverless架构、行业应用一件初始化等特性也通过每次的实践伴随着你、我。

云原生应用、主机应用部署、前端应用部署三大板块的提供,供开发者们找到最合适自己神器,令开发工作事半功倍。其中满足IoT语音技能、小程序、H5应用等开发者低门槛应用开发的需求;也支持代码编译部署到ECS主机服务器的场景,帮助用户管理传统主机应用的能力;让前后端应用能够更高效地协同。平台将持续与开发者一起共同成长,帮忙开发者更好、更快以及更低成本的开发,多端的应用更加快速的上云。




【特别活动】云开发2周年,0门槛部署上线4款热门游戏,游戏畅玩还有AirPods耳机、筋膜枪等8种奖品任你挑啦,立即参与:https://workbench.aliyun.com/activities/bday

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
6月前
|
监控 前端开发 网络协议
《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解
【7月更文挑战第20天】Fiddler是一款强大的HTTP协议调试代理工具,它的监控面板是核心功能,记录服务器的请求会话,包括HTTP和HTTPS。监控面板分为多个标签,如统计数据(Statistics)展示性能指标,Inspector用于查看请求和响应的详细内容,AutoResponder允许重定向请求到本地资源,Composer用于构造和调试HTTP请求,还有Orchestra Beta、Fiddler Script、Log和Filters等功能。
221 14
《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解
|
8月前
|
监控 前端开发 网络协议
《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解
【2月更文挑战第7天】《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解 按照从上往下,从左往右的计划,今天就轮到介绍和分享Fiddler的监控面板了。监控面板主要是一些辅助标签工具栏。有了这些就会让你的会话请求和响应时刻处监控中毫无隐私可言。监控面板是fiddler最核心的功能之一。记录了来自于服务器端(webServer)的请求会话。包括页面的请求和静态文件的请求。状态面板主要显示的是会话及会话的状态。位于软件界面右边的这一大块面板,即为辅助标签 + 工具,宏哥称之为监控。
187 0
|
6月前
|
传感器 监控 安全
试试这些局域网监控软件,绝对神器
发现几款局域网监控神器:WorkWin提供权限分配、员工行为监控、时间统计及远程管理;PRTG Network Monitor以直观界面实时监控网络状态;Wireshark深度分析网络数据包,助你轻松管理网络环境,提升效率和安全。
108 0
|
8月前
|
Web App开发 测试技术
从零基础到精通,抓包神器fiddler保姆级使用教程(一)
Fiddler是一款强大的Web代理调试工具,用于记录、检查HTTP/HTTPS请求,支持断点、数据篡改、性能统计、接口测试等。它在客户端与服务器间作为代理,帮助识别和解决问题。安装流程包括访问官网下载Fiddler Classic,按照提示进行安装,并可在安装目录或桌面快捷方式启动程序。Fiddler适用于接口调试、性能分析和线上环境问题排查等场景。
|
资源调度 JavaScript
十分钟教会你如何使用VitePress搭建及部署个人博客站点
十分钟教会你如何使用VitePress搭建及部署个人博客站点
1108 0
|
安全 Windows
IIS搭建本地站点
本文将介绍如何用localhost的端口访问本地站点 Windows + IIS Internet Information Services (IIS)管理器
228 0
IIS搭建本地站点
|
PHP
phpstudy配置多站点教程
phpstudy配置多站点教程
171 0
phpstudy配置多站点教程
|
弹性计算
如何使用FinalShell、FileZilla上传网站代码到服务器?这两个都是神器
这段时间想做一个导航网站来着,然后就简单写了一个网页,买了一个域名、一台ECS服务器,都是比较便宜的那种
419 0
如何使用FinalShell、FileZilla上传网站代码到服务器?这两个都是神器
|
搜索推荐 前端开发 JavaScript
搭建 VuePress 站点必做的 10 个优化
在搭建这样一个博客后,其实还有很多的优化工作需要做,本篇我们来盘点一下那些完成基础搭建后必做的 10 个优化。
326 0
搭建 VuePress 站点必做的 10 个优化
|
Linux Go 网络架构
【工程】-内网调式神器-ngrok
【工程】-内网调式神器-ngrok
【工程】-内网调式神器-ngrok

热门文章

最新文章