一鍵部署！這樣搭建一個文檔網站真的很簡單-
這是「進擊的 Coder」的第 397 篇技術分享
作者：劉成帥
來源：深圳灣碼農
本文由貝殼找房的前端工程師**劉成帥（Jacob）**帶來，文中介紹瞭如何快速搭建個人站點的方式。一起學習吧~
前言
最近筆者在複習 JavaScript 基礎知識，剛看完 《JavaScript 高級程序設計（第四版）》，想再找一些優秀代碼庫鞏固一下學到的內容，自然而然的就想到了Lodash。
此庫在筆者公司使用率極高，因此想深入研究下源碼並輸出系列分析文章。而線上大多源碼分析大多都是自己搭建的文檔網站，於是就到了這篇文章的主題，快速搭建一個文檔網站。
其實筆者是有一個服務器的，域名是https://lcs.show，但是服務器確實帶寬有限，再加上還得自己配置 NGINX、GitHub Action 以及 https 證書等內容。
很巧看到了騰訊雲 cloudbase 服務，可以快速搭建靜態網站，如果你沒有域名的話會自動分配一個域名（但是會比較難記），可以的話還是自己註冊一個域名，也可以很方便地申請並配置 https 證書，如果搭配 GitHub Action 使用的話可以說是完全不用考慮服務器維護的內容了。
接下來就來講一下如何搭建以及部署。
搭建及部署
本文是以 VuePress 爲例進行搭建部署，VitePress、Next、Docsify 等部署大同小異。
項目初始化
- 安裝 CLI
npm install -g @cloudbase/cli@latest- 初始化一個應用
tcb new cloudbase-test vuepress使用該 CLI 是需要進行登錄的，如果 CLI 檢測到你當前沒有登錄的話會自動打開瀏覽器跳轉到騰訊雲登錄頁面，登錄成功後返回命令行，繼續下一步操作：
接下來選擇你認爲合適的一個服務器地點，在這裏我選擇上海。
接下來會選擇關聯環境，如果你當前沒有環境的話可直接選擇「創建新環境」，CLI 會自動打開瀏覽器跳轉到「創建新環境」頁面，創建新環境如下圖，在這裏我選擇使用 VuePress 模板進行創建：
選擇完成後點擊下一步即可：
創建成功後返回命令行，會顯示正在初始化環境，稍等幾分鐘就可以直接創建項目。創建成功後會生成以下目錄結構的項目：
├── README.md
├── cloudbaserc.json
├── guides
│ └── README.md
└── package.json項目部署
- 安裝依賴
npm i- 構建部署
npm run deploy- 部署成功
執行npm run deploy稍等片刻之後即可部署成功，命令行會返回一個訪問域名，筆者的爲 https://cloudbase-test-9gccjnk3e393c02a-1256377994.tcloudbaseapp.com/vuepress/ ，點擊即可訪問示例網站，如下：
到這裏爲止，其實部署工作就算是結束了，無需自己配置 NGINX 等複雜繁瑣的操作，這就是雲服務的魅力，同時該服務按量計費，對於筆者來說費用可以說是非常低了。
但是，僅此還不夠，我們要配置 GitHub Action 之後，才能算完全放手部署這件事，做到完全自動化，將日常工作精力專注於文檔編寫就可以了。
GitHub Action 配置
如果初始化了一個項目的話，會看到項目中有一個cloudbaserc.json文件，該文件爲 cloudbase 配置文件，文件中有一個envId配置項，這屬於敏感信息，請注意千萬不要上傳到 GitHub 中，將該配置信息從cloudbaserc.json中刪除！
既然不能上傳的話，我們應該如何配置呢，答案很簡單，使用 GitHub secret 即可。需要在 騰訊雲控制檯 新建祕鑰，新建完成後，打開你的 GitHub 倉庫進行如下設置：
創建 ENVID、SECRETID、SECRETKEY 三條 secret，其中 ENVID 在 應用列表中可見，配置完成後如下所示：
接下來在項目的.github/workflows目錄下創建deploy.yml文件，內容如下：
name: 自動化部署
on:
push:
branches: \[ master \]
pull\_request:
branches: \[ master \]
jobs:
deploy:
runs-on: ubuntu-latest
name: deploy
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Deploy to Tencent CloudBase
uses: TencentCloudBase/cloudbase-action@v2
with:
secretId: ${{ secrets.SECRETID }}
secretKey: ${{ secrets.SECRETKEY }}
envId: ${{ secrets.ENVID }}然後將你的項目代碼 push 到 GitHub 就可以完成自動化部署了，之後就可以專心進行文檔編寫，無需關心服務器維護這樣的事情了。
快樂搬磚~
總結
像騰訊雲 cloudbase 這樣的雲服務可以說真的方便了很多，可以直接部署自己的靜態博客或者文檔等站點，一鍵部署，無需運維，豈不美哉。
前面說到筆者最近正在寫 lodash 源碼解析，地址是 lodash.lcs.show，GitHub 地址爲 https://github.com/jacob-lcs/lodash-source-code-analysis 當然還處於剛開始的階段，大家有興趣的話歡迎關注~
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。