qucc / start-website

前端框架相关的案例

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

website

阿里云 Website 静态网站组件 ⎯⎯⎯ 通过使用 Serverless-Devs,基于云上 Serverless 服务(如对象存储等),实现“0”配置,便捷开发,极速部署你的静态网站,Website 静态网站组件支持丰富的配置扩展,如自定义域名和 CDN 加速等。提供了目前最易用、低成本并且弹性伸缩的静态站点开发和托管能力。

特性介绍:

  • 按需付费 - 按照请求的使用量进行收费,没有请求时无需付费
  • "0"配置 - 只需要关心项目代码,之后部署即可,Serverless-Devs 会搞定所有配置。
  • 极速部署 - 仅需几秒,部署你的静态网站。
  • CDN 加速,SSL 证书配置和自定义域名 - 支持配置 CDN 加速,支持自定义域名及 HTTPS 访问

快速开始:

  1. 安装
  2. 创建
  3. 部署
  4. 配置
  5. 账号配置(可选)

 

1. 安装

通过 npm 安装最新版本的 Serverless Devs

$ npm install @serverless-devs/s -g

2. 创建

通过如下命令,快速创建一个静态网站托管应用

$ s init devsapp/website-base

下载完毕后,目录结构如下所示:

|- src
|   └── index.html
└──  s.yml

src 目录中既可以托管简单的 html 文件,也可以托管完整的 React/Vue 的应用。

3. 部署

s.yml 文件下的目录中运行如下命令进行静态网站的部署。部署完毕后,你可以在命令行的输出中查看到你静态网站的 URL 地址,点击地址即可访问网站托管的链接。

$ s deploy

如果希望查看更多部署过程的信息,可以通过s deploy --debug 命令查看部署过程中的实时日志信息


4. 配置

静态网站组件支持 0 配置部署,也就是可以直接通过配置文件中的默认值进行部署。但你依然可以修改更多可选配置来进一步开发该静态网站项目。

以下是静态网站 Website 组件的 s.yml部分配置说明:

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

edition: 1.0.0
services:
  website:
    component: website # (必填) 引用 component 的名称
    access: default
    props:
      bucket: my-bucket
      src:
        publishDir: './build' # (必填) 项目打包输出的目录
        index: index.html
      region: cn-hangzhou

点此查看全量配置及配置说明

当你根据该配置文件更新配置字段后,再次运行 s deploy

账号配置

通过 serverless Devs 工具添加密钥信息

$ s config add

注意:本组件只支持阿里云,需要选择阿里云密钥信息

使用文档

全量配置

高级配置

模板应用

所有模板应用均托管在github仓库上,目前支持模板应用包括

  • 普通静态资源应用: s init devsapp/website-base
  • react应用 s init devsapp/website-react
  • vue应用 s init devsapp/website-vue
  • hexo应用 s init devsapp/website-hexo
  • docusaurus应用 s init devsapp/website-docusaurus
  • vuepress应用 s init devsapp/website-vuepress

About

前端框架相关的案例


Languages

Language:TypeScript 41.1%Language:JavaScript 25.3%Language:Vue 21.5%Language:SCSS 6.4%Language:CSS 2.4%Language:HTML 2.1%Language:Python 0.8%Language:EJS 0.5%