之前由於學攝影的關係,為了提高自己的審美,順便鍛鍊下自己的英文能力,翻譯了不少國外藝術類的 文章。最近一直想搭一個個人博客來存放這些內容,又懶得折騰建站,遂一直擱置。
直到偶然發現了 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
<code>$ npm install -g serverless/<code>
2. 安裝 docsify
<code>$ npm i docsify-cli -g/<code>
3. 初始化項目
<code>$ docsify init docsify/<code>
初始化成功後,可以看到 ./docsify 目錄下創建的幾個文件
- index.html 入口文件
- README.md 會做為主頁內容渲染
直接編輯 docsify/README.md 就能更新網站內容,當然也可以寫多個頁面,這是後話。
4. 本地預覽
運行以下命令,並通過瀏覽器訪問 http://localhost:3000 即可方便地預覽效果,而且提供 LiveReload 功能,可以實時預覽。
<code>$ docsify serve docsify/<code>
▎配置 yml 文件
在項目目錄下,創建 serverless.yml 文件:
<code>$ touch serverless.yml/<code>
將以下內容寫入上述的 yml 文件裡:
<code># serverless.ymlmydocsify: 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/<code>
配置完成後,文件目錄如下:
<code>.├── docsify| ├── index.html| └── README.md└── serverless.yml/<code>
▎部署
通過 sls 命令進行部署,這裡還可以添加 --debug 參數來查看部署過程中的信息,
<code>$ sls --debug/<code>
如果你的賬號未 登陸 或 註冊 騰訊雲,可以直接通過微信掃描命令行中的二維碼,從而進行授權登陸和註冊。這也是我覺得特別方便的一個地方!
部署過程中,terminal 顯示信息示意:
訪問命令行輸出的 url,即可查看使用 Serverless Framework 部署的 docsify 文檔網站啦~
▎小結
本文使用了非常流行的無服務器框架 Serverless Framework 來搭建 docsify 博客系統,更多產品信息可以移步 官網 學習,官方文檔能解決 90% 以上的問題。
雖然這只是一個非常簡單的示例,但是不難看出,Serverless Framework 在快速部署方面的強大能力。比如集成了微信掃描二維碼,就直接讓我們避開了繁瑣的雲服務的賬號註冊、配置的環節。
而你需要做的,只是根據 docsify 自身的能力,進行網站的定製而已。通過這兩個工具的結合使用,即使編程小白也能快速搭建起自己的個人博客!✌️
閱讀更多 Aceyclee 的文章