用 Serverless 搭建个人静态相册网站

作者:
发布于: 2019-12-13
归档于:

标签:WintersmithThumbsUp

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

工具介绍:

  • Serverless Framework:Serverless Framework 是业界非常受欢迎的无服务器应用框架,开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。
  • ThumbsUp 是一款让使用者方便检索及管理图片的看图软件,不但具有可以快速的操作图片切换预览的使用介面,而且对于图片的简单影像处理也有相当直接、便捷的操作方式。

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

安装与初始化

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

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

1. 安装 Serverless Framework

$ npm install -g serverless

2. 安装 ThumbsUp

$ npm install -g thumbsup

3. 初始化项目

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

初始化成功后,可以看到项目目录结构:

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

配置 yml 文件

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

touch serverless.yml

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

复制代码
# serverless.yml

component: website # (必填) 引用 component 的名称,当前用到的是 tencent-website 组件
name: mydemo # (必填) 该 website 组件创建的实例名称

inputs:
  src:
    src: ./website # Upload static files generated by HEXO
    index: index.html
    # dist: ./dist
    # hook: npm run build
    # websitePath: ./
  region: ap-guangzhou
  bucketName: my-bucket123121
  protocol: https

部署

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

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

sls deploy

 serverless ⚡ framework
Action: "deploy" - Stage: "dev" - App: "mydemo" - Instance: "mydemo"

region:  ap-guangzhou
website: https://my-bucket123121-1256495918.cos-website.ap-guangzhou.myqcloud.com


61s » mydemo » Success

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

thumbsup

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



传送门:

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