一鍵部署！這樣搭建一個文檔網(wǎng)站真的很簡單！

本文由貝殼找房的前端工程師劉成帥（Jacob）帶來，文中介紹了如何快速搭建個人站點(diǎn)的方式。一起學(xué)習(xí)吧~

前言

最近筆者在復(fù)習(xí) JavaScript 基礎(chǔ)知識，剛看完 《JavaScript 高級程序設(shè)計（第四版）》，想再找一些優(yōu)秀代碼庫鞏固一下學(xué)到的內(nèi)容，自然而然的就想到了 Lodash。

此庫在筆者公司使用率極高，因此想深入研究下源碼并輸出系列分析文章。而線上大多源碼分析大多都是自己搭建的文檔網(wǎng)站，于是就到了這篇文章的主題，快速搭建一個文檔網(wǎng)站。

其實(shí)筆者是有一個服務(wù)器的，域名是 https://lcs.show，但是服務(wù)器確實(shí)帶寬有限，再加上還得自己配置 NGINX、GitHub Action 以及 https 證書等內(nèi)容。

很巧看到了騰訊云 cloudbase 服務(wù)，可以快速搭建靜態(tài)網(wǎng)站，如果你沒有域名的話會自動分配一個域名（但是會比較難記），可以的話還是自己注冊一個域名，也可以很方便地申請并配置 https 證書，如果搭配 GitHub Action 使用的話可以說是完全不用考慮服務(wù)器維護(hù)的內(nèi)容了。

接下來就來講一下如何搭建以及部署。

搭建及部署

本文是以 VuePress 為例進(jìn)行搭建部署，VitePress、Next、Docsify 等部署大同小異。

項目初始化

1. 安裝 CLI

npm install -g @cloudbase/cli@latest

2. 初始化一個應(yīng)用

tcb new cloudbase-test vuepress

使用該 CLI 是需要進(jìn)行登錄的，如果 CLI 檢測到你當(dāng)前沒有登錄的話會自動打開瀏覽器跳轉(zhuǎn)到騰訊云登錄頁面，登錄成功后返回命令行，繼續(xù)下一步操作：

接下來選擇你認(rèn)為合適的一個服務(wù)器地點(diǎn)，在這里我選擇上海。

接下來會選擇關(guān)聯(lián)環(huán)境，如果你當(dāng)前沒有環(huán)境的話可直接選擇「創(chuàng)建新環(huán)境」，CLI 會自動打開瀏覽器跳轉(zhuǎn)到「創(chuàng)建新環(huán)境」頁面，創(chuàng)建新環(huán)境如下圖，在這里我選擇使用 VuePress 模板進(jìn)行創(chuàng)建：

選擇完成后點(diǎn)擊下一步即可：

創(chuàng)建成功后返回命令行，會顯示正在初始化環(huán)境，稍等幾分鐘就可以直接創(chuàng)建項目。創(chuàng)建成功后會生成以下目錄結(jié)構(gòu)的項目：

├── README.md
├── cloudbaserc.json
├── guides
│   └── README.md
└── package.json

項目部署

1. 安裝依賴

npm i

2. 構(gòu)建部署

npm run deploy

3. 部署成功

執(zhí)行 npm run deploy 稍等片刻之后即可部署成功，命令行會返回一個訪問域名，筆者的為 https://cloudbase-test-9gccjnk3e393c02a-1256377994.tcloudbaseapp.com/vuepress/ ，點(diǎn)擊即可訪問示例網(wǎng)站，如下：

到這里為止，其實(shí)部署工作就算是結(jié)束了，無需自己配置 NGINX 等復(fù)雜繁瑣的操作，這就是云服務(wù)的魅力，同時該服務(wù)按量計費(fèi)，對于筆者來說費(fèi)用可以說是非常低了。

但是，僅此還不夠，我們要配置 GitHub Action 之后，才能算完全放手部署這件事，做到完全自動化，將日常工作精力專注于文檔編寫就可以了。

GitHub Action 配置

如果初始化了一個項目的話，會看到項目中有一個 cloudbaserc.json 文件，該文件為 cloudbase 配置文件，文件中有一個 envId 配置項，這屬于敏感信息，請注意千萬不要上傳到 GitHub 中，將該配置信息從 cloudbaserc.json 中刪除！

既然不能上傳的話，我們應(yīng)該如何配置呢，答案很簡單，使用 GitHub secret 即可。需要在 騰訊云控制臺 新建秘鑰，新建完成后，打開你的 GitHub 倉庫進(jìn)行如下設(shè)置：

創(chuàng)建 ENVID、SECRETID、SECRETKEY 三條 secret，其中 ENVID 在 應(yīng)用列表中可見，配置完成后如下所示：

接下來在項目的 .github/workflows 目錄下創(chuàng)建 deploy.yml 文件，內(nèi)容如下：

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 就可以完成自動化部署了，之后就可以專心進(jìn)行文檔編寫，無需關(guān)心服務(wù)器維護(hù)這樣的事情了。

快樂搬磚~

總結(jié)

像騰訊云 cloudbase 這樣的云服務(wù)可以說真的方便了很多，可以直接部署自己的靜態(tài)博客或者文檔等站點(diǎn)，一鍵部署，無需運(yùn)維，豈不美哉。

前面說到筆者最近正在寫 lodash 源碼解析，地址是 lodash.lcs.show，GitHub 地址為 https://github.com/jacob-lcs/lodash-source-code-analysis當(dāng)然還處于剛開始的階段，大家有興趣的話歡迎關(guān)注~

關(guān)注我們

我們將為你帶來最前沿的前端資訊。