Hexo + Serverless Framework,简单三步搭建你的个人博客

更新于 2019-12-11  约 10 分钟

很多人都想拥有自己的个人博客,还得看起来漂亮、酷酷的。尤其对开发者来说,不仅可以分享技术(装)心得(逼),面试的时候还能成为加分。这里介绍两款好用的神器,不用忙前(前端)忙后(后端),简单 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 中文技术社区

阅读 223更新于 2019-12-11

推荐阅读
玩转Serverless
用户专栏

我们专注于 Serverless 架构最佳实践,欢迎关注:[链接]

4 人关注
21 篇文章
专栏主页
目录