Skip to main content

介绍和安装

简介​

静态网站是相对于动态网站而言的，动态网站具有实时性强、数据交互强等特点，但是需要部署后端和服务器的成本，但是对于不需要这些需求的网站，静态网站就可以完成。一个Web前端开发的大作业就是一个静态网站。但是，某些网站有着相同的需求，比如文档站、博客站、官网等。那么能不能把这些需求抽离出来，创造一个工具，能够让开发者通过这个工具就快速生成网站呢？因此静态网站生成器诞生了。以搭建博客为例，我们都需要它能够解析文本，能够生成目录，因此，前端界根据此需求推出了静态网站生成器。又根据现有的最流行技术，创造了不同的生成器。
常见的静态网站生成器有：

  • vuepress，基于vue.js构建，支持文档站、博客站等功能。同时有丰富的插件生态和主题，在国内很大众。
  • Hugo,基于Go语言的生成器，非常流行，烂大街了，且不好看。
  • WordPress，更大型的类容管理网站生成工具，十分流行，但不好看。
  • Docusaurus，基于React.js构建，自有功能比vuepress更加丰富，而且好看，在国内小众。

我之前使用过Vuepress搭建网站，其实我的旧站已经被我改的自认为很好看了哈哈哈。但是我为什么选择了Docusaurus呢？其实，主要是因为它好看并且比较小众不烂大街，另外，它的热更新更加强大。

低代码平台

可能你看到基于React.js构建的字眼就慌了，但是其实你并不需要去掌握React，Docusaurus的高度达到了在你没有掌握这个技术的基础上能够让你从它的文档出发，调用API搭建让你满意的网站，这就是低代码工具的意义。

安装 Docusaurus​

安装或检查Node.js​

Docusaurus要求您的电脑配置有Node.js v16.14 或以上版本，如果你没有安装Nodejs，请参考安装Node.js和npm。
然后打开cmd检查安装情况： 

node -v
npm -v

如果呈现了v16.14以上版本，就说明Node.js部署好了。

安装Docusaurus​

使用命令行工具可以帮助你快速简单地安装 Docusaurus 并搭建网站框架。新建一个空文件夹并cd这个文件夹，执行下面的指令，它会创建一个包含模板文件的新目录。（操作提示，在文件夹空白处按住上档键Shift和鼠标右键，打开PowerShell窗口，并且请准备好Ladder）。

1 

npm init docusaurus

接着，根据命令窗口提示，输入信息，创建项目。

2

选择classic。
如果你不想使用TypeScript作为脚本语言，请输入N。
3
选择npm为包管理器。

  • 初始化项目需要一段时间。

安装完成。
4

查看目录结构​

在上述过程中，我们将项目命名为了myblog，那么文件夹工程如下： 

myblog
├── 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
├── node_modules    // 依赖文件夹
├── src // 代码控制文件
│   ├── css 
│   │   └── custom.css  // 全局样式文件，可覆盖默认的样式
│   └── pages
│       ├── styles.module.css   // 主页样式文件
│       └── index.js    // 主页文件
├── static  // 资源存放
│   └── img
├── docusaurus.config.js    // 博客设置文件
├── package.json    // 包管理文件
├── README.md   // Readme文件
└── sidebars.js // 侧边管理文件（自动生成）

5

运行项目​

使用Visual Studio工程打开myblog文件夹。

  • 拉起终端，输入下面的指令，运行代码。 
npm start

6

运行成功：

7

运行结果：
8

这样，就部署完成啦，下一章我们将进行初始设置。