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

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

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

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

4. 生成本地博客页面

hexo g   # generate

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

hexo s   # server

配置 yml 文件

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

cd.> serverless.yml

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

# serverless.yml

myWebsite:
component: "@serverless/tencent-website"inputs:
code:
src: ./public # Upload static files generated by HEXO
index: index.html
error: index.html
region: ap-guangzhou
bucketName: my-bucket-hexo

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

.
├── .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 更新本地页面,再运行 sls 就可以直接更新到 Hexo 网站啦~

小结

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

参考:

大家也可以访问:Serverless 中文技术社区,可以在 最佳实践 里查看更多关于 Serverless 应用的开发!

Hexo + Serverless Framework,简单三步搭建你的个人博客的更多相关文章

  1. 简单三步同步你的 VSCode 用户配置

    https://www.cnblogs.com/knight-errant/p/10444777.html 设备重装,换设备,VSCode 又要重新配置了?不不不,简单三步,让你的 VSCode 配置 ...

  2. vscode加MinGw三步搭建c/c++调试环境

    vscode加MinGw三步搭建c/c++调试环境 step1:安装vscode.MinGw 1.1 vscod常规安装:https://code.visualstudio.com/ 1.2 MinG ...

  3. Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

    喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...

  4. 使用Hexo+Github搭建属于自己的博客(基础)

    前言 hexo是一个台湾人做的基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown, 我最终选定它的原因是它速度快而且不容易出错,并且可以一键部署到github或者其 ...

  5. 使用hexo搭建属于自己的博客

    如果你喜欢拥有自己的博客域名,如果你喜欢折腾,可以先点击luckykun.com,看看效果,再选择要不要进来看看--- 之前一直都在博客园写博客,不过最近在逛园子的时候不小心看到了hexo,简直有种相 ...

  6. 使用Hexo+Github搭建属于自己的博客(进阶)

    主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...

  7. 利用Github和Hexo搭建独立的个人博客--基础篇

    利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...

  8. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  9. 象写程序一样写博客:搭建基于github的博客

    象写程序一样写博客:搭建基于github的博客   前言 github 真是无所不能.其 Pages 功能 支持上传 html,并且在页面中显示.于是有好事者做了一个基于 github 的博客管理工具 ...

随机推荐

  1. 【原生JS】层叠轮播图

    又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. artTemplate模版引擎的使用

    artTemplate: template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不 ...

  3. <STL源码剖析> 6.3.6 power

    计算power的算法说明 http://www.sxt.cn/u/324/blog/2112 翻译自  http://videlalvaro.github.io/2014/03/the-power-a ...

  4. Math.abs( x )

    Math.abs( x ) 下面是参数的详细信息: x : 一个数字 返回值: 返回一个数字的绝对值 <html> <head> <title>JavaScript ...

  5. Python--day23--类的命名空间

    当创建一个对象时,就会在内存中分出一块新的空间存放这个对象的属性,这块空间也叫类的命名空间.里面存放着类对象指针可以找到类.

  6. java方法里的属性

    访问控制符:访问控制符限定方法的可见范围,或者说是方法被调用的范围.方法的访问控制符有四种,按可见范围从大到小依次是:public.protected,无访问控制符,private.其中无访问控制符不 ...

  7. HDU 2871"Memory Control"(线段树区间和并+set.lower_bound)

    传送门 •题意 有 n 个内存单元(编号从1开始): 给出 4 种操作: (1)Reset :表示把所有的内存清空,然后输出 "Reset Now". (2)New x :表示申请 ...

  8. PHP mysql扩展整理,操作数据库的实现过程分析

    相关文章:PHP mysqli扩展整理,包括面向过程和面向对象的比较\事务控制\批量执行\预处理   PHPmysqli扩展整理,包括面向过程和面向对象的比较\事务控制\批量执行\预处理 从某种程度上 ...

  9. linux 阻塞 open 作为对 EBUSY 的替代

    当设备不可存取, 返回一个错误常常是最合理的方法, 但是有些情况用户可能更愿意等待 设备. 例如, 如果一个数据通讯通道既用于规律地预期地传送报告(使用 crontab), 也用于根据 用户的需要偶尔 ...

  10. CentOS服务器安装mysql

    1.配置YUM源 下载mysql源安装包 [root@localhost~]#wget http://dev.mysql.com/get/mysql57-community-release-el7-8 ...