1. 程式人生 > >基於 React 開發了一個 Markdown 文件站點生成工具

基於 React 開發了一個 Markdown 文件站點生成工具

[Create React Doc](https://github.com/MuYunyun/create-react-doc) 是一個使用 React 的 markdown 文件站點生成工具。就像 [create-react-app](https://github.com/facebook/create-react-app) 一樣,開發者可以使用 Create React Doc 來開發、部署 markdown 站點或者部落格而不用關心站點環境配置資訊。 ## 特性 * 零配置書寫 markdown 文件站點。 * markdown 文件支援懶載入以及熱載入。 * 基於檔案目錄自動生成多層級選單。 * 支援一鍵釋出到 [GitHub Pages](https://pages.github.com/). ## 使用 create-react-doc 搭建的文件站點 * [blog](http://muyunyun.cn/blog) ![](https://user-gold-cdn.xitu.io/2020/7/6/1732293cfde38b3b?w=1131&h=711&f=jpeg&s=85069) ## 快速上手 執行如下命令: ```bash npx create-react-doc my-doc npm install && cd my-doc npm start ``` 然後開啟 [http://localhost:3000/]() 就可以看到文件站點。當準備釋出到生產環境時,執行 `npm run build` 就能將文件站點打包壓縮。 ## 使用 **create-react-doc** 非常容易上手。開發者不需要額外安裝或配置 webpack 或者 Babel 等工具,它們被內建隱藏在腳手架中,因此開發者可以專心於文件的書寫。 下面提供三種方式來快速建立文件站點: ### npx ```bash npx create-react-doc my-doc ``` ### npm ```bash npm init create-react-doc my-doc ``` ### yarn ```bash yarn create create-react-doc my-doc ``` 一旦安裝執行完畢,執行 npm install 然後進入專案資料夾: ``` npm install && cd my-doc ``` 在新建立的專案中, 可以執行內建的一些命令: ### `npm start` or `yarn start` 在開發者模式下啟動文件專案: 在瀏覽器中開啟 [http://localhost:3000]() 預覽站點。 如果站點文件發生改變, 站點將自動重新載入。 ### `npm run build` or `yarn build` 將要釋出的文件站點進行打包構建, 此時的文件網站已準備好進行部署。 ### `npm run deploy` or `yarn deploy` 根據 [config.yml](https://github.com/MuYunyun/create-react-doc#configyml) 裡的 user 和 repo 引數, 文件站點預設將會發布到 GitHub Pages ## config.yml 可以在站點根目錄中的 [config.yml 資料夾](https://github.com/MuYunyun/blog/blob/master/config.yml) 中進行配置站點的功能。 ```bash # Site title title: Time Flying # Point witch files to show as Menu ## you can also set detailed dir, such as BasicSkill/css menu: React,BasicSkill,Algorithm ## set init open menu keys menuOpenKeys: /BasicSkill # Github ## if you want to show editing pages on github or deploy to GitHub Pages, you should config these arguments. user: MuYunyun repo: blog branch: master # the default value of branch is master deploy_branch: gh-pages # which branch to deploy.(default: gh-pages) # publish: # if you want upload to gitlab or other git platform, you can set full git url in it # Available values: en| zh-cn language: en ``` ## 高階用法 * 與 git 檔案結構類似, 如果在展示的資料夾中有私有檔案不方便展示在文件站點, 可以在 `.gitignore` 檔案中設定過濾檔案, 這樣它們就不會展示在文件站點中了。eg: [.gitignore](https://github.com/MuYunyun/blog/blob/master/.gitignore) * 更多用法: 歡迎在 [issue](https://github.com/MuYunyun/create-react-doc/issues/new)