阅读 598

腾讯云serverless部署静态博客~

基础准备工作

  1. Serverless Framework,在 GitHub 上有三万颗星,业界非常受欢迎的无服务器应用框架,开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构
  2. 开通腾讯云serverless服务
  3. 分配腾讯云账号密钥
  4. vuePress入门配置
  5. 自定义主题配置文档

初始化项目

1. 全局安装 Serverless Framework

$ npm install -g serverless
复制代码

2. 创建项目

$ mkdir blog-demo && cd blog-demo
复制代码

3. 初始化npm

$ npm init
复制代码

4. VuePress 安装为本地依赖

$ npm install -D vuepress
复制代码

5. 创建文档

$ mkdir docs && echo '# Hello VuePress' > docs/README.md
复制代码

6. 在package.json中添加scripts命令

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
复制代码

7. 启动服务

$ npm run docs:dev
复制代码

主题插件安装

$ npm install vuepress-theme-reco --save-dev
复制代码

1. 主题引用

// .vuepress/config.js

module.exports = {
  theme: 'reco'
}  
复制代码

2. 白嫖样式

进入到作者大大的开源仓库的事例中直接把文件丢到docs目录下即可,仓库地址!

::: warning 颜值即正义! :::

配置 yml 文件

切换到.vuepress目录下,创建.env 和 serverless.yml 文件

1. 创建.env文件保存密钥

将腾讯云创建的密钥配置好,后续则不需要再进行扫码登录

TENCENT_SECRET_ID=xxx
TENCENT_SECRET_KEY=xxx
复制代码

2. 创建yml文件,配置serverless相关配置

myblog:
  component: "@serverless/tencent-website"
  inputs:
    code:
      src: ./dist # Upload static files
      index: index.html
      error: 404.html
    region: ap-guangzhou
    bucketName: my-bucket # 对应腾讯云中创建的serverless应用名
复制代码

部署项目

1. 将本地的项目进行打包

$ npm run docs:build
复制代码

2. 执行sls命令上传到云端

$ sls --debug
复制代码

到这,整个博客项目也就部署完成了,完整代码见仓库

备注

vuepress 1.x 以上,遇到了一个本地编写markdown文件没有热更新,顺道记录下解决方法

$ npm install -D watchpack
复制代码

修改script命令即可

{
  "script":{
    "docs:dev": "vuepress dev docs --temp .temp",
  }
}
复制代码
文章分类
前端
文章标签