三分鐘入坑指北，Docsify + Serverless Framework 快速創建個人博客系統

  • 2020 年 3 月 18 日
  • 筆記

之前由於學攝影的關係，為了提高自己的審美，順便鍛煉下自己的英文能力，翻譯了不少國外藝術類的 文章。最近一直想搭一個個人博客來存放這些內容，又懶得折騰建站，遂一直擱置。

直到偶然發現了 docsify 和 Serverless Framework，建站一下子變得特別容易 —— 用 docsify 創建博客系統，然後用 Serverless Framework 部署服務，三分鐘就搞定了！

簡單介紹一下：

  • docsify：一個神奇的文檔網站生成工具，不同於 GitBook、Hexo 的地方是它不會生成將 .md 轉成 .html 文件，所有轉換工作都是在運行時進行。而且如果只是需要快速搭建一個小型的文檔網站，或者不想因為生成的一堆 .html 文件「污染」 commit 記錄，只需要創建一個 index.html 就可以開始寫文檔；
  • Serverless Framework：在 GitHub 上有三萬顆星，業界非常受歡迎的無服務器應用框架，開發者無需關心底層資源即可部署完整可用的 Serverless 應用架構。

接下來我們分三步進行：安裝與初始化 → 配置 yml 文件 → 部署

安裝與初始化

首先確保系統包含以下環境：

  • Node.js (Node.js 版本需不低於 8.6，建議使用 10.0 及以上版本)
  • Git

1. 安裝 Serverless Framework

$ npm install -g serverless

2. 安裝 docsify

$ npm i docsify-cli -g

3. 初始化項目

$ docsify init docsify

初始化成功後，可以看到 ./docsify 目錄下創建的幾個文件

  • index.html 入口文件
  • README.md 會做為主頁內容渲染

直接編輯 docsify/README.md 就能更新網站內容，當然也可以寫多個頁面，這是後話。

4. 本地預覽

運行以下命令，並通過瀏覽器訪問 http://localhost:3000 即可方便地預覽效果，而且提供 LiveReload 功能，可以實時預覽。

$ docsify serve docsify

配置 yml 文件

在項目目錄下，創建 serverless.yml 文件：

$ touch serverless.yml

將以下內容寫入上述的 yml 文件里：

# serverless.yml    mydocsify:    component: "@serverless/tencent-website"    inputs:      code:        src: ./docsify # Upload static files generated by docsify        index: index.html        error: index.html      region: ap-guangzhou      bucketName: my-bucket

配置完成後，文件目錄如下：

.  ├── docsify  |   ├── index.html  |   └── README.md  └── serverless.yml

部署

通過 sls 命令進行部署，這裡還可以添加 --debug 參數來查看部署過程中的信息，

$ sls --debug

如果你的賬號未 登陸 或 註冊 騰訊雲，可以直接通過微信掃描命令行中的二維碼，從而進行授權登陸和註冊。這也是我覺得特別方便的一個地方！

部署過程中，terminal 顯示信息示意：

部署過程

訪問命令行輸出的 url，即可查看使用 Serverless Framework 部署的 docsify 文檔網站啦~

最終效果

小結

以上示例基於騰訊雲的無服務器框架 Serverless Framework 實現，代碼詳情可參考完整的模板倉庫。

雖然這只是一個非常簡單的 demo，但是不難看出，Serverless Framework 在快速部署方面的強大能力。比如集成了微信掃描二維碼，就直接讓我們避開了繁瑣的雲服務的賬號註冊、配置的環節。而你需要做的，只是根據 docsify 自身的能力，進行網站的定製而已。通過這兩個工具的結合使用，即使編程小白也能快速搭建起自己的個人博客！✌️

傳送門：

  • GitHub: github.com/serverless
  • 官網：serverless.com

歡迎訪問：Serverless 中文網，您可以在 最佳實踐 里體驗更多關於 Serverless 應用的開發！?

Serverless Framework 免費試用計劃

Serverless Framework 免費試用名額已開放，我們誠邀您來試用和體驗最便捷的 Serverless 開發和部署方式。包括服務中使用到雲函數 SCF、API 網關、對象存儲 COS 等產品，均在試用期內提供免費資源，並伴有專業的技術支持，幫助您的業務快速、便捷實現 Serverless ！

Serverless Framework 落地 Serverless 架構的全雲端開發閉環體驗，覆蓋編碼、運維、調試、部署等開發全生命周期。使用 Serverless Framework 即可在幾秒鐘內將業務部署至雲端。

詳情可查閱：https://cloud.tencent.com/document/product/1154/38792

VirMach 便宜 VPS

QNews

QNews