V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
muyunyun
V2EX  ›  分享创造

create-react-doc — 基于 React 的文档站点生成工具

  •  1
     
  •   muyunyun ·
    MuYunyun · 2020-11-13 21:21:59 +08:00 · 1502 次点击
    这是一个创建于 1231 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Create React Doc

    Create React Doc 是一个使用 React 的 markdown 文档站点生成工具。开发者可以使用 Create React Doc 来开发、部署 markdown 站点或者博客而无需关心站点环境配置信息。

    特性

    • 建站理念: 文件即站点 (Files as a site)。
    • 开箱即用: 一键生成可运行文档站点, 无需关心站点环境配置信息。
    • 性能: 文档支持懒加载提升站点加载速度。
    • 工作流: 集成 Github Action, 自动化打包、发布站点。

    快速上手

    主题

    当前默认使用的主题是 crd-seed

    使用该主题搭建的站点

    快速上手

    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
    

    如果想把模板内容内容拉取到当前文件夹, 则可以将如上命令的 doc 替换为 ., 比如执行 npx create-react-doc .

    接着执行 cd doc && yarn && yarn start, 可以在 localhost: 3000 预览站点, 如果站点文档发生改变, 站点将自动重新加载。

    站点发布

    快速上手 一节中介绍了如何快速搭建站点, 本节将介绍如何将搭建好的站点打包、发布到 gh-pages 。

    自动打包发布到 gh-pages (推荐)

    初始化的模板项目集成了 Github actionci 配置, 使用方只需在 main 分支执行 git push 即可以完成站点的自动部署。

    如果是第一次部署, 在执行以下操作后, 需要在项目的 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
    

    更多内容可以访问 站点发布高阶用法其它工具

    2 条回复    2020-11-14 10:27:23 +08:00
    linyuxin
        1
    linyuxin  
       2020-11-13 22:09:50 +08:00 via Android
    赞一个,昨天刚好关注到你的项目
    muyunyun
        2
    muyunyun  
    OP
       2020-11-14 10:27:23 +08:00
    @linyuxin 巧了, 感谢😀。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2770 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:48 · PVG 20:48 · LAX 05:48 · JFK 08:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.