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 中文技术社区