Docusaurus 一鍵快速部署個人博客-有解無憂

一、通過云開發平臺快速創建初始化應用

1.創建相關應用模版請參考鏈接：5分鐘站點生成神器——Docusaurus

2.完成創建后就可以在github中查看到新增的Docusaurus倉庫

截屏2022-04-22 下午3.36.35.png

二、本地撰寫個人博客

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.在日常環境部署

一鍵進行應用部署，在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以后可以點擊訪問部署網站查看效果，
截屏2022-04-22 下午3.59.39.png

3.配置自定義域名在線上環境上線

● 配置線上環境自定義域名，在功能開發驗證完成后要在線上環境進行部署，在線上環境的「部署配置」-「自定義域名」中填寫自己的域名，例如我們添加一個二級域名 company.workbench.fun 來系結我們部署的前端應用，然后復制自定義域名下方的API網關地址對添加的二級域名進行CNAME配置，
undefined
● 配置CNAME地址，復制好 API網關域名地址后，來到你自己的域名管理平臺（此示例中的域名管理是阿里云的域名管理控制臺，請去自己的域名控制臺操作），添加記錄的「記錄型別」選擇「CNAME」，在「主機記錄」中輸入你要創建的二級域名，這里我們輸入「company」，在「記錄值」中粘貼我們之前復制的 API網關域名地址，「TTL」保留默認值或者設定一個你認為合適的值即可，
undefined
● 在線上環境部署上線，回到云開發平臺的應用詳情頁面，按照部署的操作，點擊線上環境的「部署按鈕」，部署完成以后就在你自定義的域名進行了上線，CNAME 生效之后，我們輸入 company.workbench.fun（示例網址）可以打開部署的頁面，至此，如何部署一個應用到線上環境，如何系結自己的域名來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的域名玩起來吧；）