React免费静态站搭建（基于Docusaurus）

目标

做一个静态站，用于发布和储存自己的一些资料是极好的。相比于类似CSDN这种平台博客，静态站更加自由，发布内容不用受到平台限制，可以自由发挥。

选一个静态站框架

当然也可以自己重头写，但是成本太高了，我们的目标还是专注于内容，而不是站点的构建本身，所以选一个好的框架会事半功倍。由于我这几年已经完全投入了React的怀抱，所以这里只介绍跟React相关的几个框架。

Next.js

官网地址：https://nextjs.org/

鼎鼎大名，不会有人不知道吧，这是一个基于React封装的多页面前端框架，可以服务端渲染，也可以直接生成静态站。

优点是灵活，缺点也是灵活，需要你重头写一个站点，懒人劝退。

Gatsby

官网地址：https://www.gatsbyjs.com/

Gatsby也是一个基于React的前端框架，主要用于对接一些headless的服务端系统，比如CMS、Strapi等，用法比较复杂，生态庞大，适合较大型网站使用。不过学习成本较高，需要先学会GraphQL，对新手不太友好，如果只想做个静态站，属于是大材小用了。

Docusaurus

官网地址：https://docusaurus.io/

Docusaurus是一个React社区常用的文档站框架，你也许看到过很多React的库基于它做文档站。支持MD和MDX语法，可以轻松撰写文档，MDX语法的主要功能是在MD文档里使用JSX语法，也就是在写文档的同时，可以使用React组件，这就很顺滑了。如果你愿意，你也可以自定义一个页面，用React自己想怎么写就怎么写，基本可以满足日常100%的需求。

所以，最终，我还是选择了Docusaurus搭建自己的站点。

安装Docusaurus

命令如下，详细的参考官网文档，讲的比较清晰。my-website是根目录名，可以换成任意。

npx create-docusaurus@latest my-website classic

修改站点内容

继续参考文档，修改一下站点内容，先看一下目录结构

/blog  // 博客目录
/docs // 文档目录
/src // 自定义页面和组件目录
/staic // 静态文件目录
/ docusaurus.config.js // 配置文件

大概主要就这些文件，项目模板会预制一些内容，不需要就可以删了。blog和docs里都可以写Markdown文章，blog是文章列表的格式，docs是文章目录的格式。docusaurus.config.js是整个项目的配置文件，想改什么就在这里改。

我大概修改了一下，初步效果如下，默认样式比较美观和方便。

发布你的站点

把大部分内容修改差不多之后，就可以部署了，最好的部署方法，当然是GitHub Pages，无需服务器，无需费用。

Docusaurus部署文档：https://docusaurus.io/zh-CN/docs/deployment#deploying-to-github-pages
GitHub Pages官方文档：https://docs.github.com/cn/pages

首先，修改docusaurus.config.js中的一些配置

organizationName: 'zsrl', // Github用户名
projectName: 'zsrl.github.io', // Github仓库
deploymentBranch: 'main', //分支
trailingSlash: false,  // 页面路径结尾不带/

设置好以后，就可以执行推送了，由于我使用现在使用的是Windows系统，官方给的命令也能执行，但是写到package.json当做脚本，就需要一些改变了，这里推荐一个包cross-env，先安装一下他。

npm i cross-env -S

然后修改package.json里的deploy脚本

{
	"scripts": {
	 	"deploy": "cross-env USE_SSH=true docusaurus deploy",
	}
}

USE_SSH=true的意思是使用SSH协议拉去和推送仓库，我比较习惯用这个，不用每次输密码。

最后，执行命令发布

npm run deploy

看到类似下边的结果就是成功了。

预览站点

成功以后，可以直接通过访问Github Page的域名打开站点：https://zsrl.github.io/

绑定域名

最后，想自定义个域名，去腾讯云上买一个最便宜的，8块钱，进行一个域名解析，并申请一个免费的证书，就可以通过自定义域名访问网站了：https://beima.xyz

注意：根据Github Pages的规则，自定义域名需要添加CNANE文件，放在项目根目录，内容是你自定义域名，在我们这个场景下，就是放到项目的static文件夹下即可，会被自动编译到网站根目录。

总结

其实我尝试过很多种搭建静态站的方式，最后还是返璞归真吧，用最简单使用的方式搭建个站点。开发用时三小时，花费8元钱（域名费用），Github的流量费不需要，由微软爸爸出，虽然有一定限制，但是个人站一般达不到，如果真怕限制，还可以尝试发布到腾讯云的对象存储，也是个不错的选择。

欢迎常来我的小站：北马量化工作室