温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Hexo + Serverless Framework怎样搭建你的个人博客

发布时间:2021-12-10 17:00:52 来源:亿速云 阅读:137 作者:柒染 栏目:云计算

Hexo + Serverless Framework怎样搭建你的个人博客,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

很多人都想拥有自己的个人博客,还得看起来漂亮、酷酷的。下面里介绍两款好用的神器搭建个人博客。

工具介绍

  • 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: ./localhexo/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 网站啦

看完上述内容,你们掌握Hexo + Serverless Framework怎样搭建你的个人博客的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI