{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2020-02-04-vuepress-serverless","result":{"data":{"currentBlog":{"id":"d28c5060-2591-5220-b940-e0f73d022e76","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020219/1582115734254-VuePress_2_%E9%95%BF%E5%89%AF%E6%9C%AC.png","authors":["Aceyclee"],"categories":["best-practice"],"date":"2020-02-04T00:00:00.000Z","title":"基于 Serverless 的 VuePress 极简静态网站","description":"通过 Serverless Website 组件快速构建一个 VuePress 极简静态网站","authorslink":["https://www.zhihu.com/people/Aceyclee"],"translators":null,"translatorslink":null,"tags":["Serverless","VuePress"],"keywords":"VuePress,静态网站管理系统,VuePress 极简静态网站","outdated":true},"wordCount":{"words":150,"sentences":32,"paragraphs":31},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-02-04-vuepress-serverless.md","fields":{"slug":"/best-practice/2020-02-04-vuepress-serverless/","keywords":["nodejs","serverless","vue","vuejs","website","单页应用","无服务器","serverless","vuepress","Serverless","yml","VuePress","部署"]},"html":"

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

\n

简单介绍一下：

\n\n

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

\n

▎工具准备

\n

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

\n\n

1. 安装 Serverless Framework

\n
$ npm install -g serverless
\n

2. 安装 VuePress

\n
$ npm install -g vuepress
\n

▎创建项目

\n README.md\n\n# 开始写作\nvuepress dev .\n\n# 构建静态文件\nvuepress build .`, `37473861663049890000`)\"\n >\n \n 复制代码\n \n \n
# 创建项目目录\nmkdir vuepress-starter && cd vuepress-starter\n\n# 新建一个 markdown 文件\necho '# Hello VuePress!' > README.md\n\n# 开始写作\nvuepress dev .\n\n# 构建静态文件\nvuepress build .
\n

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

\n

▎配置 yml 文件

\n

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

\n
$ touch serverless.yml
\n

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

\n\n \n 复制代码\n \n \n
# serverless.yml\n\nmyvuepress:\n  component: "@serverless/tencent-website"\n  inputs:\n    code:\n      src: ./dist # Upload static files\n      index: index.html\n      error: 404.html\n    region: ap-guangzhou\n    bucketName: my-bucket
\n

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

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

▎部署

\n

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

\n
$ sls --debug
\n

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

\n

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

\n
$ sls\n （此处有张二维码）\n  Please scan QR code login from wechat.\n  Wait login...\n  Login successful for TencentCloud.\n\n    myvuepress:\n      url: http://my-bucket-1256526400.cos-website.ap-guangzhou.myqcloud.com\n      env:\n\n  59s › myvuepress › done
\n

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

\n

\"最终效果\"

\n

▎小结

\n

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

\n

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

\n
\n
\n
\n
\n

传送门：

\n\n
\n

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

","tableOfContents":""},"previousBlog":{"id":"3f27165c-9176-5e1d-a427-9ffc801d5f2b","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/202026/1580962859953-probider.png","authors":["Tabor"],"categories":["best-practice"],"date":"2020-02-06T00:00:00.000Z","title":"基于 Serverless + 企业微信打造疫情监控小助手","description":"使用 Serverless 基本功能，配合企业微信打造 nCoV 疫情监控小助手","authorslink":["https://canmeng.net"],"translators":null,"translatorslink":null,"tags":["Serverless","企业微信"],"keywords":"Serverless 企业微信,Serverless 基本功能,nCoV 疫情监控小助手","outdated":true},"wordCount":{"words":100,"sentences":26,"paragraphs":26},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-02-06-serverless-work-weixin.md","fields":{"slug":"/best-practice/2020-02-06-serverless-work-weixin/","keywords":["php","python","serverless","云函数","font","echo","results","curl","info","color","responsesz"]}},"nextBlog":{"id":"1e3cc3dc-4176-54ac-99bf-c9f2d7edd372","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020113/1578918119146-WINTERS.png","authors":["Tabor"],"categories":["best-practice"],"date":"2020-01-13T00:00:00.000Z","title":"使用 Wintersmith + Serverless Framework 快速创建个人站点","description":"通过 Serverless Website 组件快速构建一个 Serverless Wintersmith 个人站点。","authorslink":["https://canmeng.net"],"translators":null,"translatorslink":null,"tags":["Serverless","Wintersmith"],"keywords":"Wintersmith,Wintersmith 站点,Serverless Framework 快速创建个人站点","outdated":true},"wordCount":{"words":118,"sentences":30,"paragraphs":30},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-01-13-Wintersmith-with-serverless.md","fields":{"slug":"/best-practice/2020-01-13-Wintersmith-with-serverless/","keywords":["serverless","website","无服务器","serverless","Serverless","yml","wintersmith","Framework","部署","tencent"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"d28c5060-2591-5220-b940-e0f73d022e76","previousBlogId":"3f27165c-9176-5e1d-a427-9ffc801d5f2b","nextBlogId":"1e3cc3dc-4176-54ac-99bf-c9f2d7edd372"}}}