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

很多人都想拥有自己的个人博客,还得看起来漂亮、酷酷的。尤其对开发者来说,不仅可以分享技术(装)心得(逼),面试的时候还能成为加分。这里介绍两款好用的神器,不用忙前(前端)忙后(后端),简单3min即可搞定,本文免费分享给大家。

PS:不会写代码?没有备案的域名?没有服务器?在这里,这些都不是事儿!

工具介绍

  • Serverless Framework:Serverless Framework 是业界非常受欢迎的无服务器应用框架,开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。
  • Hexo:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

使用 Serverless Framework 部署一个 Hexo 网站只需三步::安装与初始化 → 配置 yml 文件 → 部署

安装与初始化

简单三步,即可通过 Serverless Website 组件快速构建一个 Serverless Hexo 站点。

首先确保系统包含以下环境:

  • Node.js (Node.js 版本需不低于 8.6,建议使用 Node.js 10.0 及以上版本)
  • Git

如未安装上述应用程序,可以参考安装说明

1. 安装 Serverless Framework

$ npm install -g serverless

2. 安装 Hexo

$ npm install -g hexo-cli

3. 初始化项目

1$ hexo init hexo # 生成hexo目录 2$ cd hexo 3$ npm install

初始化完成后,hexo 文件夹的目录如下:

1. 2├── _config.yml 3├── package.json 4├── scaffolds 5├── source 6| ├── _drafts 7| └── _posts 8└── themes

4. 生成本地博客页面

hexo g   # generate

可以通过 hexo g 命令生成静态页面,如果希望在本地查看效果,也可以运行下列命令,通过浏览器访问 http://localhost:4000 查看页面效果。

hexo s   # server

配置 yml 文件

项目目录下,创建 serverless.yml 文件

cd.> serverless.yml

将以下内容写入上述的 yml 文件里:

1# serverless.yml 2 3myWebsite: 4 component: '@serverless/tencent-website' 5 inputs: 6 code: 7 src: ./localhexo/public # Upload static files generated by HEXO 8 index: index.html 9 error: index.html 10 region: ap-guangzhou 11 bucketName: my-bucket-hexo

配置完成后,文件目录如下:

1. 2├── .serverless 3├── hexo 4| ├── public 5| ├── ... 6| ├── _config.yml 7| ├── ... 8| └── source 9└── serverless.yml

部署

通过 sls 命令进行部署,并可以添加 --debug 参数查看部署过程中的信息

如您的账号未登陆注册腾讯云,您可以直接通过微信扫描命令行中的二维码进行授权登陆和注册。

1PS serverless --debug 2 3 DEBUGResolving the template's static variables. 4 DEBUGCollecting components from the template. 5 DEBUGDownloading any NPM components found in the template. 6 DEBUGAnalyzing the template's components dependencies. 7 DEBUGCreating the template's components graph. 8 DEBUGSyncing template state. 9 DEBUGExecuting the template's components graph. 10 DEBUGStarting Website Component. 11 12Please scan QR code login from wechat 13Wait login... 14Login successful for TencentCloud 15 DEBUGPreparing website Tencent COS bucket my-bucket-1250000000. 16 DEBUGDeploying "my-bucket-1250000000" bucket in the "ap-guangzhou" region. 17 DEBUG"my-bucket-1250000000" bucket was successfully deployed to the "ap-guangzhou" region. 18 DEBUGSetting ACL for "my-bucket-1250000000" bucket in the "ap-guangzhou" region. 19 DEBUGEnsuring no CORS are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region. 20 DEBUGEnsuring no Tags are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region. 21 DEBUGConfiguring bucket my-bucket-1250000000 for website hosting. 22 DEBUGUploading website files from D:\hexotina\localhexo\public to bucket my-bucket-1250000000. 23 DEBUGStarting upload to bucket my-bucket-1250000000 in region ap-guangzhou 24 DEBUGUploading directory D:\hexotina\localhexo\public to bucket my-bucket-1250000000 25 DEBUGWebsite deployed successfully to URL: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com. 26 27 myWebsite: 28 url: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com 29 env: 30 31 13s » myWebsite » done

访问命令行输出的 website url,即可查看属于自己的 Serverless Hexo 站点。

如果需要更新 hexo 站点中的文章,只需要在本地重新运行 hexo g 更新本地页面,再运行 sls 就可以直接更新到 Hexo 网站啦~

小结

本文简单展示了如何利用腾讯云的无服务器框架 Serverless Framework创建一个个人博客,Hexo 拥有丰富的插件系统,大家可以基于 Serverless Framework 和 hexo 开发更多个性化功能,如自定义 Themes、博文置顶、添加小图标等。这两个工具结合使用,开发方便部署快捷,非常适合想要快速搭建静态网站的开发者。

传送门:

欢迎访问:Serverless 中文网,您可以在 最佳实践 里体验更多关于 Serverless 应用的开发!

推荐阅读:《Serverless 架构:从原理、设计到项目实战》

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

java将前端的json数组字符串转换为列表

记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang