Hexo + Serverless Framework，簡單三步搭建你的我的博客

不少人都想擁有本身的我的博客，還得看起來漂亮、酷酷的。尤爲對開發者來講，不只能夠分享技術（裝）心得（逼），面試的時候還能成爲加分。這裏介紹兩款好用的神器，不用忙前（前端）忙後（後端），簡單 3min 便可搞定，本文免費分享給你們。

PS：不會寫代碼？沒有備案的域名？沒有服務器？在這裏，這些都不是事兒！

工具介紹

Serverless Framework：Serverless Framework 是業界很是受歡迎的無服務器應用框架，開發者無需關心底層資源便可部署完整可用的 Serverless 應用架構。

Hexo：Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。

快速開始

Serverless Framework 提供了豐富的 Component 供用戶搭建各類形態的 Serverless 應用。本文將演示經過 Serverless Website Component 快速構建一個 Serverless Hexo 站點。

English Version Docs >>: Build a serverless hexo website with serverless website component

1. 安裝
2. 配置
3. 部署

安裝

安裝前提：

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

如未安裝上述應用程序，能夠參考安裝說明。

開始安裝 Serverless Framework 和 Hexo。

• 安裝 Serverless Framework CLI

$ npm install -g serverless

• 安裝 Hexo

$ npm install -g hexo-cli

安裝 Hexo 完成後，執行下列命令，Hexo 將會在指定文件夾中新建所須要的文件。

$ hexo init hexo   # 生成hexo目錄
$ cd hexo
$ npm install

新建完成後，hexo 文件夾的目錄以下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

能夠經過 hexo g 命令生成靜態頁面

$ hexo g   # generate

注：若是但願在本地查看效果，也能夠運行下列命令，經過瀏覽器訪問 localhost:4000 查看頁面效果。

$ hexo s   # server

配置

在項目目錄下，建立 serverless.yml 文件，在其中進行以下配置

$ touch serverless.yml
# serverless.ymlmyWebsite:
  component: "@serverless/tencent-website"inputs:
    code:
      src: ./hexo/public # Upload static files generated by HEXOindex: index.htmlerror: index.htmlregion: ap-guangzhoubucketName: my-bucket

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

.
├── .serverless
├── hexo
|   ├── public
|   ├── ...
|   ├── _config.yml
|   ├── ...
|   └── source
└── serverless.yml

部署

經過 sls 命令進行部署，並能夠添加 --debug 參數查看部署過程當中的信息。

如您的帳號未登錄或註冊騰訊雲，您能夠直接經過微信掃描命令行中的二維碼進行受權登錄和註冊。

PS serverless --debug

  DEBUG ─ Resolving the template's static variables.
  DEBUG ─ Collecting components from the template.
  DEBUG ─ Downloading any NPM components found in the template.
  DEBUG ─ Analyzing the template's components dependencies.
  DEBUG ─ Creating the template's components graph.
  DEBUG ─ Syncing template state.
  DEBUG ─ Executing the template's components graph.
  DEBUG ─ Starting Website Component.

Please scan QR code login from wechat
Wait login...
Login successful for TencentCloud
  DEBUG ─ Preparing website Tencent COS bucket my-bucket-1250000000.
  DEBUG ─ Deploying "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  DEBUG ─ "my-bucket-1250000000" bucket was successfully deployed to the "ap-guangzhou" region.
  DEBUG ─ Setting ACL for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  DEBUG ─ Ensuring no CORS are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  DEBUG ─ Ensuring no Tags are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  DEBUG ─ Configuring bucket my-bucket-1250000000 for website hosting.
  DEBUG ─ Uploading website files from D:\hexotina\localhexo\public to bucket my-bucket-1250000000.
  DEBUG ─ Starting upload to bucket my-bucket-1250000000 in region ap-guangzhou
  DEBUG ─ Uploading directory D:\hexotina\localhexo\public to bucket my-bucket-1250000000
  DEBUG ─ Website deployed successfully to URL: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com.

  myWebsite:
    url: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com
    env:

  13s » myWebsite » done

訪問命令行輸出的 website url，便可查看屬於本身的 Serverless Hexo 站點。

注：若是但願更新 hexo 站點中的文章，須要在本地從新運行 hexo g 進行生成靜態頁面，再運行 serverless 就能夠直接更新到頁面啦~

具體可參考完整模板倉庫

寫在最後

本文只是簡單展現瞭如何利用 Serverless Framework 建立一個我的博客，Hexo 擁有豐富的插件系統，你們能夠基於 Serverless Framework 和 Hexo 開發更多個性化功能如自定義 Themes、博文置頂、添加小圖標等。這兩個工具結合使用，開發方便部署快捷，很是適合初入門或者想要快速搭建靜態網站的同窗。

最後，分享一下經過 tencent-website 組件搭建的博客網站：Serverless 中文技術社區