基於 React 開發了一個 Markdown 文件站點生成工具
阿新 • • 發佈:2020-07-06
[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)