基于 Serverless 的 VuePress 极简静态网站

立即点击-> 选择您最常用的编程语言，免费体验 Serverless Demo

之前用过 Docsify Serverless Framework 快速创建个人博客系统，虽然 docsify 也是基于 Vue，然而它是完全的运行时驱动，因此对 SEO 不够友好。所以这次尝试使用 VuePress 来搭建一个静态网站，依然部署在 Serverless 架构上。

简单介绍一下：

VuePress：由两部分组成，第一部分是一个极简静态网站生成器；另一个部分是为书写技术文档而优化的默认主题。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他页面则会只在用户浏览到的时候才按需加载。
Serverless Framework：在 GitHub 上有三万颗星，业界非常受欢迎的无服务器应用框架，开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。

接下来我们分三步进行：创建项目 → 配置 yml 文件 → 部署

工具准备

首先确保系统包含以下环境：

Node.js (Node.js 版本需不低于 8.6，建议使用 10.0 及以上版本)
Git

1. 安装 Serverless Framework

代码语言：javascript复制

$ npm install -g serverless

2. 安装 docsify

代码语言：javascript复制

$ npm install -g vuepress

创建项目

代码语言：javascript复制

# 创建项目目录
mkdir vuepress-starter && cd vuepress-starter

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

这时候可以看到 ./vuepress-starter 目录下创建的 README.md 文档，它会做为主页内容渲染，直接编辑 docsify/README.md 就能更新网站内容。此时通过浏览器访问 http://localhost:8080/ 即可本地预览。

配置 yml 文件

在项目目录下，创建 serverless.yml 文件：

代码语言：javascript复制

$ touch serverless.yml

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

代码语言：javascript复制

# serverless.yml

myvuepress:
  component: "@serverless/tencent-website"
  inputs:
    code:
      src: ./dist # Upload static files
      index: index.html
      error: 404.html
    region: ap-guangzhou
    bucketName: my-bucket

配置完成后，文件目录如下：

代码语言：javascript复制

/vuepress-starter
  ├── .vuepress
  |    ├── dist
  |    |   ├── 404.html
  |    |   └── index.html
  |    └── serverless.yml
  └── README.md

部署

通过 serverless 命令（可使用命令缩写 sls ）进行部署，添加 --debug 参数查看部署详情：

代码语言：javascript复制

$ sls --debug

如果你的账号未登陆或注册腾讯云，可以直接通过微信扫描命令行中的二维码，从而进行授权登陆和注册。这也是我觉得特别方便的一个地方！

部署过程中，terminal 显示信息示意：

代码语言：javascript复制

$ sls
 （此处有张二维码）
  Please scan QR code login from wechat.
  Wait login...
  Login successful for TencentCloud.

    myvuepress:
      url: http://my-bucket-1256526400.cos-website.ap-guangzhou.myzijiebao.com
      env:

  59s › myvuepress › done

访问命令行输出的 url，即可查看使用 Serverless Framework 部署的 VuePress 网站啦~

最终效果

小结

部署过程中要注意，由于 VuePress 生成的 index.html 所在目录默认隐藏，因此要在正确的目录层级中创建 serverless.yml 文件，不然会导致部署失败。

这次依然使用了腾讯云 Serverless Framework 作为网站部署的工具，实在是因为太方便了。部署过程不到一分钟，完全不用考虑云上资源如何配置的问题！✌️

传送门：

GitHub: github.com/serverless
官网：serverless.com

欢迎访问：Serverless 中文网，您可以在最佳实践里体验更多关于 Serverless 应用的开发！

Serverless Framework 免费试用计划

Serverless Framework 免费试用名额已开放，我们诚邀您来试用和体验最便捷的 Serverless 开发和部署方式。包括服务中使用到云函数 SCF、API 网关、对象存储 COS 等产品，均在试用期内提供免费资源，并伴有专业的技术支持，帮助您的业务快速、便捷实现 Serverless ！

Serverless Framework 落地 Serverless 架构的全云端开发闭环体验，覆盖编码、运维、调试、部署等开发全生命周期。使用 Serverless Framework 即可在几秒钟内将业务部署至云端。

详情可查阅：https://cloud.tencent.com/document/product/1154/38792

vue.js 网站 serverless seo node.js

0 人点赞