{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2019-12-14-docsify-with-serverless","result":{"data":{"currentBlog":{"id":"c5d83479-32e7-5a99-acbe-5038f43cadc9","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20191217/1576565954158-docsify.png","authors":["Aceyclee"],"categories":["best-practice"],"date":"2019-12-14T00:00:00.000Z","title":"三分钟入坑指北 🔜 Docsify + Serverless Framework 快速创建个人博客系统","description":"通过 Serverless Website 组件快速构建一个 Serverless docsify 个人博客系统。","authorslink":["https://www.zhihu.com/people/Aceyclee"],"translators":null,"translatorslink":null,"tags":["Wintersmith","Docsify"],"keywords":"Docsify,个人博客系统,Serverless Website,Serverless docsify","outdated":true},"wordCount":{"words":170,"sentences":39,"paragraphs":38},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2019-12-14-docsify-with-serverless.md","fields":{"slug":"/best-practice/2019-12-14-docsify-with-serverless/","keywords":["nodejs","serverless","website","无服务器","docsify","serverless","Serverless","yml","html","Framework"]},"html":"

之前由于学摄影的关系，为了提高自己的审美，顺便锻炼下自己的英文能力，翻译了不少国外艺术类的 文章。最近一直想搭一个个人博客来存放这些内容，又懒得折腾建站，遂一直搁置。

\n

直到偶然发现了 docsify 和 Serverless Framework，建站一下子变得特别容易 —— 用 docsify 创建博客系统，然后用 Serverless Framework 部署服务，三分钟就搞定了！

\n

简单介绍一下：

\n\n

接下来我们分三步进行：安装与初始化 → 配置 yml 文件 → 部署

\n\n

▎安装与初始化

\n

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

\n\n

1. 安装 Serverless Framework

\n
$ npm install -g serverless
\n

2. 安装 docsify

\n
$ npm i docsify-cli -g
\n

3. 初始化项目

\n
$ docsify init docsify
\n

初始化成功后，可以看到 ./docsify 目录下创建的几个文件

\n\n

直接编辑 docsify/README.md 就能更新网站内容，当然也可以写多个页面，这是后话。

\n

4. 本地预览

\n

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

\n
$ docsify serve docsify
\n

▎配置 yml 文件

\n

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

\n
$ touch serverless.yml
\n

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

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

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

\n
.\n├── docsify\n|   ├── index.html\n|   └── README.md\n└── serverless.yml
\n

▎部署

\n

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

\n
$ sls --debug
\n

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

\n

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

\n

\"部署过程\"

\n

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

\n

\"最终效果\"

\n

▎小结

\n

以上示例基于腾讯云的无服务器框架 Serverless Framework 实现，代码详情可参考完整的 模板仓库 👈

\n

虽然这只是一个非常简单的 demo，但是不难看出，Serverless Framework 在快速部署方面的强大能力。比如集成了微信扫描二维码，就直接让我们避开了繁琐的云服务的账号注册、配置的环节。而你需要做的，只是根据 docsify 自身的能力，进行网站的定制而已。通过这两个工具的结合使用，即使编程小白也能快速搭建起自己的个人博客！✌️

\n
\n
\n
\n
\n

传送门：

\n\n
\n

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

","tableOfContents":""},"previousBlog":{"id":"8d3e0a32-3028-5f67-b38e-9088a83b37ab","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020115/1579078112543-1577769064015-joshua-aragon-FGXqbqbGt5o-unsplash.jpg","authors":["Aceyclee"],"categories":["guides-and-tutorials"],"date":"2019-12-17T00:00:00.000Z","title":"使用 Serverless Framework，结合云函数 SCF、API 网关和云数据库 MySQL 构建 REST API","description":"本文介绍如何创建一个进行自动化面试评估的 Serverless 应用！","authorslink":["https://www.zhihu.com/people/Aceyclee"],"translators":null,"translatorslink":null,"tags":["Node.js","API 网关"],"keywords":"Serverless 自动化面试评估,Serverless 云数据库 MySQL,云函数 SCF","outdated":null},"wordCount":{"words":259,"sentences":62,"paragraphs":62},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-12-17-node-rest-api-with-serverless-scf-and-mongodb.md","fields":{"slug":"/blog/2019-12-17-node-rest-api-with-serverless-scf-and-mongodb/","keywords":["java","nodejs","serverless","无服务器","云函数","candidate","Serverless","serverless","dev","candidateSubmission","service"]}},"nextBlog":{"id":"a5889900-617d-5aa4-ac8b-56b0aab7d572","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/202058/1588928638838-v2-b6f54fc4d2939af6f53a5e5592f9d19c_1200x500.jpg","authors":["alanoluo"],"categories":["best-practice"],"date":"2019-12-13T00:00:00.000Z","title":"用 Serverless 搭建个人静态相册网站","description":"通过 Serverless 组件，基于 ThumbsUp 快速搭建个人静态相册网站","authorslink":["https://github.com/alanoluo"],"translators":null,"translatorslink":null,"tags":["Wintersmith","ThumbsUp"],"keywords":"Serverless 组件,ThumbsUp相册,搭建个人静态相册网站,ThumbsUp搭建","outdated":null},"wordCount":{"words":107,"sentences":29,"paragraphs":29},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2019-12-13-Build-personal-album-website-with-serverless.md","fields":{"slug":"/best-practice/2019-12-13-Build-personal-album-website-with-serverless/","keywords":["nodejs","serverless","website","website 组件","无服务器","serverless","website","Serverless","thumbsup","yml","photos","Framework","github"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"c5d83479-32e7-5a99-acbe-5038f43cadc9","previousBlogId":"8d3e0a32-3028-5f67-b38e-9088a83b37ab","nextBlogId":"a5889900-617d-5aa4-ac8b-56b0aab7d572"}}}