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

  1. $ npm install -g serverless

2. 安装 Hexo

  1. $ 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. 生成本地博客页面

  1. hexo g # generate

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

  1. hexo s # server

配置 yml 文件

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

  1. cd.> serverless.yml

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

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

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

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

部署

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

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

  1. PS serverless --debug
  2. DEBUG Resolving the template's static variables.
  3. DEBUG ─ Collecting components from the template.
  4. DEBUG ─ Downloading any NPM components found in the template.
  5. DEBUG ─ Analyzing the template's components dependencies.
  6. DEBUG Creating the template's components graph.
  7. DEBUG ─ Syncing template state.
  8. DEBUG ─ Executing the template's components graph.
  9. DEBUG Starting Website Component.
  10. Please scan QR code login from wechat
  11. Wait login...
  12. Login successful for TencentCloud
  13. DEBUG Preparing website Tencent COS bucket my-bucket-1250000000.
  14. DEBUG Deploying "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  15. DEBUG "my-bucket-1250000000" bucket was successfully deployed to the "ap-guangzhou" region.
  16. DEBUG Setting ACL for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  17. DEBUG Ensuring no CORS are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  18. DEBUG Ensuring no Tags are set for "my-bucket-1250000000" bucket in the "ap-guangzhou" region.
  19. DEBUG Configuring bucket my-bucket-1250000000 for website hosting.
  20. DEBUG Uploading website files from D:\hexotina\localhexo\public to bucket my-bucket-1250000000.
  21. DEBUG Starting upload to bucket my-bucket-1250000000 in region ap-guangzhou
  22. DEBUG Uploading directory D:\hexotina\localhexo\public to bucket my-bucket-1250000000
  23. DEBUG Website deployed successfully to URL: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com.
  24. myWebsite:
  25. url: https://my-bucket-1250000000.cos-website.ap-guangzhou.myqcloud.com
  26. env:
  27. 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. oracle中=>是什么意思呢?

    => 是 Oracle 中调用 存储过程的时候, 指定 参数名进行调用.一般是, 某些参数有默认值的时候,你需要跳过某些参数来进行调用.下面是具体的例子. 参数的默认值SQL> CREAT ...

  2. Window setTimeout() 方法

    定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注意:如果你只想重复执行可以使用 setInterval() 方法. 可以使用clearTimeout()方法来阻 ...

  3. WPF Converter(转)

    WPF Binding 用于数据有效性校验的关卡是它的 ValidationRules 属性,用于数据类型转换的关卡是它的 Converter 属性.下面是实例: 1. Binding 的数据校验 & ...

  4. title与h1的区别、b与strong的区别、i与em的区别?

    title与h1的区别 定义: title是网站标题, h1是文章主题 作用: title概括网站信息,可以直接告诉搜索引擎和用户这 个网站是关于什么主题和内容的,是显示在网页Tab栏里的: h1突出 ...

  5. HTML--简单的注册网页

    利用表格,渐变色 <body background="未标题-2.jpg"> <table align="center" border=&qu ...

  6. C# 总结复习---知识点

    知识点: 1. 转义字符: Console.WriteLine("C:\\asdfg\\sdfd");   ----    "\\"是转义斜杠后面紧跟着的字符C ...

  7. 从零开始学习Kafka

    简介 kafka是一个分布式消息队列.具有高性能.持久化.多副本备份.横向扩展能力.生产者往队列里写消息,消费者从队列里取消息进行业务逻辑.一般在架构设计中起到解耦.削峰.异步处理的作用. Kafka ...

  8. 【t090】吉祥数

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 为了迎接圣诞,信息学兴趣小组的同学在辅导老师的带领下,举办了一个盛大的晚会,晚会的第一项内容是做游戏: ...

  9. 【js】Vue 2.5.1 源码学习 (八)响应式入口observe

    大体思路(七) 本节内容: deps 依赖收集的数组对象 => Dep 构造函数 /** ==> observe() * var ob * ==> if --isObject * = ...

  10. 2019-5-21-NuGet-符号服务器

    title author date CreateTime categories NuGet 符号服务器 lindexi 2019-05-21 11:34:40 +0800 2019-05-08 21: ...