{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2020-01-13-Wintersmith-with-serverless","result":{"data":{"currentBlog":{"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"]},"html":"

首先我们来介绍下，Wintersmith 是一个简单而灵活的静态站点生成器。采用 markdown 构建，这个是我们的基础条件。

\n\n

确保系统包含以下环境：

\n\n

这边有详细的视频演示大家也可以直接观看：

\n\n

1. 安装 Serverless Framework

\n\n \n 复制代码\n \n \n
$ npm install -g serverless
\n

2. 安装 wintersmith

\n\n \n 复制代码\n \n \n
$ npm i wintersmith -g
\n

3. 新建 wintersmith 项目

\n

可对指定路径进行安装

\n`, `38692038636116660000`)\"\n >\n \n 复制代码\n \n \n
$ wintersmith new <path>
\n

初始化成功后，可以看到路径下创建的项目文件

\n

4. 本地预览

\n

运行以下命令，并通过浏览器访问 http://localhost:8080 即可方便地预览效果，而且提供 LiveReload 功能，可以实时预览。

\n\n \n 复制代码\n \n \n
$ wintersmith preview
\n

使用如下命令构建网站：

\n\n \n 复制代码\n \n \n
$ wintersmith build
\n

5. 配置 yml 文件

\n

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

\n\n \n 复制代码\n \n \n
$ touch serverless.yml
\n

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

\n\n \n 复制代码\n \n \n
# serverless.yml\n\nmyWebsite:\n component: '@serverless/tencent-website'\n inputs:\n code:\n src: ./build\n index: index.html\n error: index.html\n region: ap-guangzhou\n bucketName: my-bucket
\n

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

\n\n \n 复制代码\n \n \n
.\n├── build\n| ├── index.html\n| └── README.md\n└── serverless.yml
\n

6. 部署

\n

通过 sls 命令进行部署，这里还可以添加 –debug 参数来查看部署过程中的信息：

\n\n \n 复制代码\n \n \n
$ sls --debug
\n

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

\n

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

\n

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

\n

7. 小结

\n

本文使用了腾讯云的无服务器框架 Serverless Framework 来搭建  Wintersmith 博客系统。

\n

虽然这只是一个非常简单的示例，但是不难看出，Serverless Framework 在快速部署方面的强大能力。比如集成了微信扫描二维码，就直接让我们避开了繁琐的云服务的账号注册、配置的环节。而你需要做的，只是根据 Wintersmith 自身的能力，进行网站的定制。

\n
\n
\n
\n
\n

传送门：

\n\n
\n

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

","tableOfContents":""},"previousBlog":{"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","部署"]}},"nextBlog":{"id":"4f8cc7f1-71e2-5cac-a5fe-1bfa55e4b012","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20191226/1577353083364-laravel.png","authors":["Tabor"],"categories":["best-practice"],"date":"2020-01-13T00:00:00.000Z","title":"Laravel + Serverless Framework 快速创建 CMS 内容管理系统","description":"通过 Serverless Laravel 组件快速构建一个 Serverless CMS 内容管理系统","authorslink":["https://canmeng.net"],"translators":null,"translatorslink":null,"tags":["Wintersmith","Laravel"],"keywords":"Serverless Laravel,CMS 内容管理系统,构建Serverless CMS内容管理系统","outdated":true},"wordCount":{"words":154,"sentences":38,"paragraphs":38},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-01-13-LARAVEL-with-serverless.md","fields":{"slug":"/best-practice/2020-01-13-LARAVEL-with-serverless/","keywords":["php","serverless","云函数","composer","serverless","php","Laravel","Serverless","phar"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"1e3cc3dc-4176-54ac-99bf-c9f2d7edd372","previousBlogId":"d28c5060-2591-5220-b940-e0f73d022e76","nextBlogId":"4f8cc7f1-71e2-5cac-a5fe-1bfa55e4b012"}}}