![d59c226c52ff3615add8624baa2889cb.png](https://i-blog.csdnimg.cn/blog_migrate/f997d88eaf9aaa8519ebac8bc99e97f9.png)
Create React Doc 是一个使用 React 的 markdown 文档站点生成工具。就像 create-react-app 一样,开发者可以使用 Create React Doc 来开发、部署 markdown 站点或者博客而无需关心站点环境配置信息。
特性
- 建站理念: 文件即站点 (Files as a site)。
- 开箱即用: 一键生成可运行文档站点, 无需关心站点环境配置信息。
- 性能: 文档支持懒加载提升站点加载速度。
- 工作流: 集成 Github action, 自动化打包、发布站点。
快速上手
主题
当前默认使用的主题是 crd-seed。
使用该主题搭建的站点
- blog
![1eae4181ad3bce1a5e2d35fde7d321ea.png](https://i-blog.csdnimg.cn/blog_migrate/917430694dcb481cb3538adf1eb80ee2.jpeg)
![c6495166883c88a9ec069826d5b26316.png](https://i-blog.csdnimg.cn/blog_migrate/ed6064692e0eaa784f3d8cbadd07c8a9.png)
- diana
如果你的产品从中受益,欢迎留言补充
快速上手
create-react-doc 非常容易上手。开发者不需要额外安装或配置 webpack 或者 Babel 等工具,它们被内置隐藏在脚手架中,因此开发者可以专心于文档的书写。
如果你想在当前文件下建立站点文件 doc
, 这里提供如下三种方式快速建站:
npx
npx create-react-doc doc
npm
npm init create-react-doc doc
yarn
yarn create create-react-doc doc
![af78171f7569a08ccdda4dd85a51bb1f.png](https://i-blog.csdnimg.cn/blog_migrate/5a1332753cd6843e2ac5eaad6ca890ce.jpeg)
如果想把模板内容内容拉取到当前文件夹, 则可以将如上命令的doc
替换为.
, 比如执行npx create-react-doc .
。
接着执行 cd doc && yarn && yarn start
, 可以在 localhost: 3000
预览站点, 如果站点文档发生改变, 站点将自动重新加载。
![59ba53ef3e8171d42fbec4579ffa6f39.png](https://i-blog.csdnimg.cn/blog_migrate/297f7ee0a4797cb90d483fad7cf774e6.jpeg)
站点发布
在 快速上手 一节中介绍了如何快速搭建站点, 本节将介绍如何将搭建好的站点打包、发布到 gh-pages。
自动打包发布到 gh-pages (推荐)
初始化的模板项目集成了 Github action
的 ci 配置, 使用方只需在 main 分支执行 git push
即可以完成站点的自动部署。
![9fb28834fa08986787785df1e885b260.png](https://i-blog.csdnimg.cn/blog_migrate/9bcb9882ec24abaa13c7248ac9b88d8c.png)
如果是第一次部署, 在执行以下操作后, 需要在项目的 setting 选项卡中将 Github Pages 选择为 gh-pages。(详情见 First Deployment with GITHUB_TOKEN)
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/用户或组织名/项目名.git
git push -u origin main
更多内容可以访问 站点发布、高阶用法、其它工具。