{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2019-12-13-Build-personal-album-website-with-serverless","result":{"data":{"currentBlog":{"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"]},"html":"

日常生活中我们经常会拍摄一些视频、照片等，这些文件会占用比较多的存储空间。本文将介绍一种方法：利用 ThumbsUp 工具，结合 Serverless Framework 的 component 快速搭建个人相册网站，为存储空间减压。

\n

工具介绍：

\n\n

整个网站的搭建部署只需三步：安装与初始化 → 配置 yml 文件 → 部署。

\n

安装与初始化

\n

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

\n\n

如未安装上述应用程序，可以参考安装说明。

\n

1. 安装 Serverless Framework

\n
$ npm install -g serverless
\n

2. 安装 ThumbsUp

\n
$ npm install -g thumbsup
\n

3. 初始化项目

\n
$ mkdir photos\n$ thumbsup --input .\\photos\\ --output website
\n

初始化成功后，可以看到项目目录结构：

\n
.\n├── photos\n└── website\n    └── index.html
\n

配置 yml 文件

\n

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

\n
touch serverless.yml
\n

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

\n\n \n 复制代码\n \n \n
# serverless.yml\n\ncomponent: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件\nname: mydemo # (必填) 该 website 组件创建的实例名称\n\ninputs:\n  src:\n    src: ./website # Upload static files generated by HEXO\n    index: index.html\n    # dist: ./dist\n    # hook: npm run build\n    # websitePath: ./\n  region: ap-guangzhou\n  bucketName: my-bucket123121\n  protocol: https
\n

部署

\n

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

\n

如您的账号未登陆或注册腾讯云，您可以直接通过微信扫描命令行中的二维码进行授权登陆和注册。

\n
sls deploy\n\n serverless ⚡ framework\nAction: "deploy" - Stage: "dev" - App: "mydemo" - Instance: "mydemo"\n\nregion:  ap-guangzhou\nwebsite: https://my-bucket123121-1256495918.cos-website.ap-guangzhou.myqcloud.com\n\n\n61s » mydemo » Success
\n

访问命令行输出的 website url，即可查看即可查看使用 Serverless Framework 部署的照片墙网站。

\n

\"thumbsup\"

\n
\n

注：如果希望更新网站中的照片或者视频等文件，可以在 photos 文件夹更新照片后，在本地重新运行 thumbsup --input .\\photos\\ --output website 更新本地页面，再运行 sls 即可更新网站。

\n
\n
\n
\n
\n
\n

传送门：

\n\n
\n

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

","tableOfContents":""},"previousBlog":{"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"]}},"nextBlog":{"id":"d2a60cba-0dfd-5c94-9848-dc29a897e81e","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20191230/1577673977066-16ef85f25ee1af09.jpg","authors":["yugasun"],"categories":["best-practice"],"date":"2019-12-12T00:00:00.000Z","title":"如何开发自己的第一个 Serverless Component","description":"我们分享了不少基于 Component 的最佳实践案例，本文教你如何自己开发一个 Component！","authorslink":["https://yugasun.com"],"translators":null,"translatorslink":null,"tags":["Wintersmith","Component"],"keywords":"Serverless Component,最佳实践案例,开发Component,实践案例","outdated":null},"wordCount":{"words":399,"sentences":63,"paragraphs":63},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2019-12-12-how-write-first-serverless-components.md","fields":{"slug":"/best-practice/2019-12-12-how-write-first-serverless-components/","keywords":["serverless","website","serverless","tencent","组件","Serverless","Component","cdn","npm"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"a5889900-617d-5aa4-ac8b-56b0aab7d572","previousBlogId":"c5d83479-32e7-5a99-acbe-5038f43cadc9","nextBlogId":"d2a60cba-0dfd-5c94-9848-dc29a897e81e"}}}