时间：2023-10-12 07:54:01 | 来源：网站运营
时间：2023-10-12 07:54:01 来源：网站运营
基于 Serverless 的 VuePress 极简静态网站：之前用过 Docsify + Serverless Framework 快速创建个人博客，虽然 docsify 也是基于 Vue，然而它是完全的运行时驱动，因此对 SEO 不够友好。所以这次尝试使用 VuePress 来搭建一个静态网站，依然部署在 Serverless 架构上。
在线咨询
$ npm install -g serverless2. 安装 VuePress$ npm install -g vuepress# 创建项目目录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/ 即可本地预览。serverless.yml 文件：$ touch serverless.yml将以下内容写入上述的 yml 文件里：# serverless.ymlmyvuepress: component: "@serverless/tencent-website" inputs: code: src: ./dist # Upload static files index: index.html error: 404.html region: ap-guangzhou bucketName: my-bucket配置完成后，文件目录如下：/vuepress-starter ├── .vuepress | ├── dist | | ├── 404.html | | └── index.html | └── serverless.yml └── README.mdserverless 命令（可使用命令缩写 sls ）进行部署，添加 --debug 参数查看部署详情：$ sls --debug如果你的账号未 登陆 或 注册 腾讯云，可以直接通过微信扫描命令行中的二维码，从而进行授权登陆和注册。这也是我觉得特别方便的一个地方！$ sls （此处有张二维码） Please scan QR code login from wechat. Wait login... Login successful for TencentCloud. myvuepress: url: http://my-bucket-1256526400.cos-website.ap-guangzhou.myqcloud.com env: 59s › myvuepress › done访问命令行输出的 url，即可查看使用 Serverless Framework 部署的 VuePress 网站啦~index.html 所在目录默认隐藏，因此要在正确的目录层级中创建 serverless.yml 文件，不然会导致部署失败。参考：
- GitHub: github.com/serverless
- 官网：serverless.com
- 社区：Serverless 中文网
分类收藏：产品 | 设计 | 技术 | HackLife | Photography
推荐阅读：
关键词：静态
