很多人都想拥有自己的个人博客,还得看起来漂亮、酷酷的。尤其对开发者来说,不仅可以分享技术(装)心得(逼),面试的时候还能成为加分。这里介绍两款好用的神器,不用忙前(前端)忙后(后端),简单3min即可搞定,本文免费分享给大家。
PS:不会写代码?没有备案的域名?没有服务器?在这里,这些都不是事儿!
工具介绍
使用 Serverless Framework 部署一个 Hexo 网站只需三步::安装与初始化 → 配置 yml 文件 → 部署
简单三步,即可通过 Serverless Website 组件快速构建一个 Serverless Hexo 站点。
首先确保系统包含以下环境:
如未安装上述应用程序,可以参考安装说明。
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
项目目录下,创建 serverless.yml
文件
cd.> serverless.yml
将以下内容写入上述的 yml 文件里:
# serverless.yml
component: website # (必填) 引用 component 的名称,当前用到的是 tencent-website 组件
name: hexodemo # (必填) 该 website 组件创建的实例名称
org: test # (可选) 用于记录组织信息,默认值为您的腾讯云账号 APPID
app: websiteApp # (可选) 该 website 应用名称
stage: dev # (可选) 用于区分环境信息,默认值是 dev
inputs:
src:
src: ./public # Upload static files generated by HEXO
index: index.html
# dist: ./dist
# hook: npm run build
# websitePath: ./
region: ap-guangzhou
bucketName: my-bucket
protocol: https
配置完成后,文件目录如下:
.
├── .serverless
└── hexo
├── public
├── ...
├── serverless.yml
├── ...
└── source
通过sls deploy
命令进行部署,并可以添加--debug
参数查看部署过程中的信息。
如您的账号未登陆或注册腾讯云,您可以直接通过微信扫描命令行中的二维码进行授权登陆和注册。
$ sls deploy
serverless ⚡ framework
Action: "deploy" - Stage: "dev" - App: "websiteApp" - Instance: "hexodemo"
region: ap-guangzhou
website: https://my-bucket-1258834142.cos-website.ap-guangzhou.myqcloud.com
25s › hexodemo › Success
访问命令行输出的 website url,即可查看属于自己的 Serverless Hexo 站点。
如果需要更新 hexo 站点中的文章,只需要在本地重新运行 hexo g
更新本地页面,再运行 sls
就可以直接更新到 Hexo 网站啦~
传送门:
- GitHub: github.com/serverless
- 官网:serverless.com
欢迎访问:Serverless 中文网,您可以在 最佳实践 里体验更多关于 Serverless 应用的开发!