一 、通過雲開發平臺快速創建初始化應用 1.創建相關應用模版請參考鏈接：5分鐘站點生成神器——Docusaurus 2.完成創建後就可以在github中查看到新增的Docusaurus倉庫 二 、 本地編寫個人博客 1.將應用模版克隆到本地 ● 首先假定你已經安裝了Git、node，沒有安裝請移步n ...
一 、通過雲開發平臺快速創建初始化應用
1.創建相關應用模版請參考鏈接：5分鐘站點生成神器——Docusaurus
2.完成創建後就可以在github中查看到新增的Docusaurus倉庫
二 、 本地編寫個人博客
1.將應用模版克隆到本地
● 首先假定你已經安裝了Git、node，沒有安裝請移步node官網進行安裝。克隆項目：
git clone + 項目地址
● 進入項目文件
cd Docusaurus
● 切換到feature/1.0.0 分支上
git checkout feature/1.0.0
● 安裝依賴包
npm install
● 啟動服務
npm run start
這裡打開瀏覽器3000埠，並出現預設頁面。
2.項目結構
my-website
├── blog
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ └── mdx.md
├── package.json
├── src
│ ├── css
│ │ └── custom.css
│ └── pages
│ ├── styles.module.css
│ └── index.js
├── static
│ └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock
- /blog/ - 裡面就是寫博客文章的，都是 markdown 文件。
- /docs/ - 裡面就是寫文檔的，也都是 markdown 文件。
- /src/ - 源代碼文件夾，裡面有一個 css 文件夾，然後它裡邊有個 custom.css 裡面是寫自定義的 css 代碼的。
- /src/pages - 裡邊放一些自定義的頁面，使用 react 語法來寫。
- /static/ - 放靜態資源文件，這些文件會出現在最後打包出來的靜態網站裡面，在它的根目錄下邊，它下邊的 img 文件夾是放靜態圖片的。
- /docusaurus.config.js - 這個是配置這個站點的。
- /package.json - node.js 的工程配置文件。
- /sidebar.js - 配置文檔頁面側邊欄，只有文檔頁面才有，用它來定義文檔的目錄結構。
另外呢，也可以自己創建一個 theme 文件夾，裡邊可以定義一些組件用來替換預設主題裡面的一些組件。
3.配置為博客模式
docusaurus 預設是文檔風格的主頁，要是把它改成一個博客形式的，需要做一點點的配置。打開它的配置文件，docusaurus.config.js 。把 presets 這個配置改成如下所示：
presets: [
[
"@docusaurus/preset-classic",
{
// docs: {
// sidebarPath: require.resolve('./sidebars.js'),
// editUrl:
// 'https://github.com/facebook/docusaurus/edit/master/website/',
// },
blog: {
path: "./blog",
routeBasePath: "/"
}
// 省略其它代碼
}
]
];
如果不用文檔的話，就把 docs 這個刪除或者註釋了，然後加上 blog ，裡邊添加：
- path 屬性，它的值為”./blog”，也就是指向 blog 的文件夾。
- routeBasePath 屬性，這個是訪問這個博客的路徑，設置成/斜杠就是預設網站的首頁。
然後把 src/pages 下邊 index.js 的改成別的名字或者是給刪除，這樣的話他就不會同時匹配這兩個文件了。
頂部導航的 docs 如果要去掉的話，可以找到 navBar 這個配置項，把 links 中的有關 docs 的這段刪掉：
{ to: "docs/doc1", label: "Docs", position: "left" }
4.發表第一篇博客
寫博客就是在 blog 裡邊創建一個 markdown 文件。標題開始部分是一個日期格式。Docusaurus 會自動把這個日期解析成咱們這個博客的發表日期，後邊跟著這個文件的名字，可以起個有意義的，比如說是博客的標題的英文，例如項目里的 Welcome 博客：
2019-05-30-welcome.md
文件，裡面第一段就是配置這個博客的一些基本信息：
---
id: welcome
title: Welcome
author: Yangshun Tay
author_title: Front End Engineer @ Facebook
author_url: https://github.com/yangshun
author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
tags: [facebook, hello, docusaurus]
---
- id - 訪問這個博客的 URL。
- title - 標題。
- author - 作者。
- author_title - 就是作者簡短的自我介紹，職位之類的。
- author_image_url - 頭像。
- tags - 博客標簽, 是個數組形式。
如果文章太長想只展示一部分的話，可以加上：
<!--truncate-->
這個註釋就可以了，它會把它後邊的內容隱藏，然後顯示一個閱讀更多鏈接。這樣第一個博客就完成了。
三 、 雲端一鍵部署上線應用
1.上傳代碼
git add .
git commit -m '添加你的註釋'
git push
2.在日常環境部署
一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以後可以點擊訪問部署網站查看效果。
3.配置自定義功能變數名稱線上上環境上線
● 配置線上環境自定義功能變數名稱。在功能開發驗證完成後要線上上環境進行部署，線上上環境的「部署配置」-「自定義功能變數名稱」中填寫自己的功能變數名稱。例如我們添加一個二級功能變數名稱 company.workbench.fun 來綁定我們部署的前端應用。然後複製自定義功能變數名稱下方的API網關地址對添加的二級功能變數名稱進行CNAME配置。
● 配置CNAME地址。複製好 API網關功能變數名稱地址後，來到你自己的功能變數名稱管理平臺（此示例中的功能變數名稱管理是阿裡雲的功能變數名稱管理控制台，請去自己的功能變數名稱控制台操作）。添加記錄的「記錄類型」選擇「CNAME」，在「主機記錄」中輸入你要創建的二級功能變數名稱，這裡我們輸入「company」，在「記錄值」中粘貼我們之前複製的 API網關功能變數名稱地址，「TTL」保留預設值或者設置一個你認為合適的值即可。
● 線上上環境部署上線。回到雲開發平臺的應用詳情頁面，按照部署的操作，點擊線上環境的「部署按鈕」，部署完成以後就在你自定義的功能變數名稱進行了上線。CNAME 生效之後，我們輸入 company.workbench.fun（示例網址） 可以打開部署的頁面。至此，如何部署一個應用到線上環境，如何綁定自己的功能變數名稱來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的功能變數名稱玩起來吧 ；）
一鍵創建Docusaurus應用模版鏈接 ：https://workbench.aliyun.com/application/front/create?fromConfig=4&fromRepo=sol_github_4
參考文獻：https://blog.csdn.net/fengqiuzhihua/article/details/104683781
【特別活動】雲開發2周年，0門檻部署上線4款熱門游戲，游戲暢玩還有AirPods耳機、筋膜槍等8種獎品任你挑啦，立即參與：https://workbench.aliyun.com/activities/bday
