为了更好的帮助云开发的用户使用网站托管能力，云开发团队面向开发者推出了《云开发网站托管指南》，帮助更多的开发者使用云开发的网站托管能力，享受云计算带来的价值。.....

为了更好的帮助云开发的用户使用网站托管能力，云开发团队面向开发者推出了《云开发网站托管指南》，帮助更多的开发者使用云开发的网站托管能力，享受云计算带来的价值。


云开发网站托管指南

![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611144342.png)

随着云开发用户的数量不断增多，开发者们对于云开发的使用程度越来越深，不少开发者提出了疑问，**云开发除了支持小程序以外，还能支持其他平台么？**


答案是肯定的！


云开发刚刚正式发布了网站托管能力，帮助开发者们解决 Web 网站托管遇见的种种问题。


## 为什么要使用网站托管能力？


云开发网站托管能力为开发者提供便捷、稳定、高拓展性的网站托管能力，帮助企业和个人一键部署网站应用，轻松为自己的业务加上稳定、高并发、快速访问等 Buff。


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611144401.png)


相比于传统的网站托管服务，云开发网站托管服务无需开发者自建服务器，无需完成服务器的运维工作，只需一键，就可将网站发布到全网节点，享受来自云计算的高性能访问服务。


## 网站托管都有哪些能力？


相比于自建的网站托管，云开发网站托管可以实现**一键上传**，让网站托管变得更加简单；还提供了**自动化的 SSL 证书接入**，让开发者免于手动申请 SSL 证书，简单几步， 保障业务安全；不仅如此，**云开发网站托管还提供了全网的 CDN 加速服务**，让开发者的网站在任何时候，都能访问飞快。


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611144421.png)


不仅如此，开发者还可以将云开发的工具整合进入开发者的产品的自动发布流程中，通过诸如 Github Actions、Jenkins CI、Gitlab CI 等工具，实现产品的自动构建和自动发布。


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611144430.png)


开发者还可以基于云开发网站托管能力，配合云开发提供的 Web SDK 实现全栈网站托管，在云开发中完成开发者的业务闭环。


## 网站托管贵么？


云开发网站托管采用按量计费模式，开发者用多少付多少，无需为不使用的时间支付费用，对于开发者更友好，每 GB 托管容量 0.0043 元/天；每 GB 托管流量 0.21 元；


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611144443.png)


以腾讯云官网首页为例，开发者猜猜假设腾讯云首页放在云开发网站托管上，每天有1000万人访问腾讯云官网首页的话，腾讯云官网首页每天需要支付多少成本呢？只需 103 元。


腾讯云官网首页大小仅为 51.8K，假设使用云开发网站托管能力，每天有1000万次访问，所需要的成本为 0.0043元(GB/天) \*0.00004940032959(GB) \* 1（天） + 0.21(元/GB)\* 10000000 \* 0.00004940032959（GB) = 103.7406923514 元。


## 云开发网站托管应该如何使用？


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611144453.png)


目前云开发网站托管已经上线至腾讯云官网，开发者可以直接查看官网文档来了解如何使用。


> [云开发（CloudBase）](https://cloudbase.net/)是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。

> 技术文档：https://www.cloudbase.net/

> [点击此处](https://console.cloud.tencent.com/tcb?from=12304)快速使用云开发

> 微信搜索：腾讯云云开发，获取项目最新进展


关于网站托管



如果我们访问站点是通过云开发提供的默认域名，首先默认域名访问的时候是会有限行访问速度的限制，其次，默认域名并不是非常好记，所以，这篇文章我们将介绍下，如何在云开发静态托管绑定静态域名。


### 一、申请域名


首先，我们需要申请一个可供访问的站点域名。可以选择在[腾讯云域名注册](https://buy.cloud.tencent.com/domain)上注册一个自己喜欢并且可供使用的域名。


### 二、申请SSL证书


>  什么是SSL证书？

>  安全套接字层 (SSL) 证书（有时称为数字证书）用于在浏览器或用户计算机与服务器或网站之间建立加密连接。SSL连接可保护在每次访问（称为会话）期间交换的敏感数据（例如信用卡信息），以防被非授权方拦截。


简单来说，就是部署了SSL证书的站点，可以让用户的访问的时候更加安全。一般来说，SSL证书是收费的，腾讯云提供可供免费使用的SSL证书。


在[腾讯云的SSL证书控制台](https://console.cloud.tencent.com/ssl)中，点击申请免费的SSL证书：


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611145217.png)


然后，在通用名称中填写刚刚申请好的域名，并按照提示填写剩余的填写项：


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611145308.png)


进入审核阶段，等待会，就会看到审核成功之后的界面：


![](https://postimg.aliavv.com/picgo/20200426173618.png)


### 三、绑定域名和SSL证书


回到[云开发静态网站托管](https://console.cloud.tencent.com/tcb/hosting)界面，在_设置_一栏中，点击添加：


![](https://postimg.aliavv.com/picgo/20200426173641.png)


填写刚刚申请好的域名，选择我们在这个域名上绑定的SSL证书，点击确定添加即可。


![](https://postimg.aliavv.com/picgo/20200426173654.png)


等待域名和证书部署完成后，就可以看到域名对应的CNAME值。


![](https://postimg.aliavv.com/picgo/20200426173704.png)


### 四、添加系统域名解析


想要在浏览器输入域名能直接访问到我们的网站，我们需要给访问的域名绑定DNS解析，让浏览器知道，这个域名其实是对应我部署好的站点。


进入[腾讯云的DNS域名解析](https://console.cloud.tencent.com/cns)控制台，选择我们注册好的域名，点击解析：


![](https://postimg.aliavv.com/picgo/20200426173716.png)


在域名解析界面，添加在第三部我们拿到的绑定域名的CNAME值：


![](https://postimg.aliavv.com/picgo/20200426173724.png)


填好好后，访问域名就可以直接看到我们部署的静态网站了。


网站托管域名绑定


**云开发静态托管**是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持


在云开发静态托管中，你同样可以托管一个 Vue.js 项目，接下来，我就介绍一下应该如何将一个 Vue.js 项目部署到云开发静态网站托管服务中。


## 初始化一个 Vue 项目


首先，我们使用 Vue cli 创建一个项目，来作为演示。同时，为了符合我们的日常使用场景，引入 Vue Router 组件，并配置 Router 为 Histroy 模式。


```

vue create cloudbase

cd cloudbase

vue add router

```


![](https://postimg.aliavv.com/picgo/20200426174647.png)


执行完成后，可以执行 `npm run serve` 启动预览，查看一下效果


![](https://postimg.aliavv.com/picgo/20200426174701.png)


看完效果以后，可以执行 `npm run build` 来构建出最终的产出物


![](https://postimg.aliavv.com/picgo/20200426174709.png)


可以看到，我们的最终产出物被构建在了 _dist_ 目录中，后续我们只要上传这个目录就好了。


## 创建云开发环境


完成了Vue 项目的创建后，接下来创建云开发的环境,访问[云开发控制台](https://console.cloud.tencent.com/tcb/env/index),点击上方的新建环境，创建一个新的环境。在弹出的界面中输入你的环境名称，并选择**按量计费**，点击下方的**立即开通**，就可以开通一个云开发环境了。


![](https://postimg.aliavv.com/picgo/20200426174717.png)


等待环境初始化完成后，点击刚刚创建好的环境，进入到详情页，点击左侧的环境设置，可以看到环境的 ID， 记住这里的环境 ID，后续上传文件的时候会用到。


![](https://postimg.aliavv.com/picgo/20200426174729.png)


再次选择左侧列表的「静态网站托管」


![](https://postimg.aliavv.com/picgo/20200426174737.png)


在静态网站托管页面选择立即开通。


![](https://postimg.aliavv.com/picgo/20200426174745.png)


等待静态网站托管服务开通后，你就可以看到这样的界面。点击上方的「设置」，可以看到你的测试域名，后续上传后，你就可以在这个测试域名中查看你的站点。


![](https://postimg.aliavv.com/picgo/20200426174753.png)


## 初始化云开发 Cli


完成了环境的创建后，接下来配置云开发 Cli。


### 安装云开发 Cli 并登陆


首先，我们执行命令安装云开发 Cli


```

npm i -g @cloudbase/cli

```


![](https://postimg.aliavv.com/picgo/20200426174804.png)


安装完成后， 执行命令登陆 Cli


```

tcb login

```


系统会自动打开浏览器，你只需要在弹出的页面中登陆你的腾讯云账号，并授予 Cli 权限就可以操作了。


## 上传文件


完成了 Cli 的登陆后，接下来就可以上传文件了。首先，进入到 vue 项目的 dist 目录: `cd dist`，然后，执行命令来上传文件


```

tcb hosting:deploy -e envId

```


这里你需要将 envId 替换为你自己的环境 ID，比如我的替换为 **website-126ca8**，结果如下


![](https://postimg.aliavv.com/picgo/20200426174815.png)


可以看到，我成功的上传了文件，这个时候，我可以直接访问我的测试域名来查看我刚刚上传的 Vue.js 项目。


当你看到这样的界面时，就说明你配置成功了。


![](https://postimg.aliavv.com/picgo/20200426174824.png)


## 一些配置


在 Vue 中，我们常常会用到 Vue Router 的 History Mode 来做更好的 URL，但如果你不做任何配置，在云开发的 Hosting 上就会导致访问时出现 404 错误


![](https://postimg.aliavv.com/picgo/20200426174832.png)


这个问题可以通过在云开发静态网站托管的设置页面将索引文档和错误文档均设置为 index.html 即可。


![](https://postimg.aliavv.com/picgo/20200426174841.png)


## 总结


云开发的静态托管中想要上传 Vue 项目也十分简单，你只需要初始化一个 Vue 项目，并使用云开发的 CLi 工具就可以完成文件的上传。此外，还可以通过修改索引文档和错误文档来实现 Vue Router 的 History Mode 的支持。


部署 Vue.js 项目



## 导语


React是目前比较火的前端框架之一，除了可以在自有服务器、Github Pages 部署以外，现在你有了一个新的选择，那就是使用云开发静态网站功能来进行部署。


云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站


云开发（**CloudBase**）是腾讯云为开发者提供的一站式后端云服务，它帮助开发者统一构建和管理资源，免去了移动应用开发过程中繁琐的服务器搭建及运维、域名注册及备案、数据接口实现等繁琐流程，让开发者可以专注于业务逻辑的实现，而无需理解后端逻辑及服务器运维知识，开发门槛更低，效率更高。


**无论是腾讯云·云开发用户，还是小程序·云开发用户，只要开通按量付费，即可享有云开发静态网站托管服务。**


​


## 系统依赖


在进行后续的内容前，请先确保你的电脑中安装了 Node.js 运行环境。如果没有安装，可以访问 nodejs.org  下载安装。


## 安装云开发 **cli** 工具 和 **React**脚手架


在配置好 NodeJs环境后，执行如下命令，安装云开发 cli 工具以及 React脚手架：


​


```

npm install -g @cloudbase/cli

npx create-react-app reactdemo

```



## 本地初始化一个**React**项目


过程中脚手架会自动安装项目中需要的相关依赖，安装完成后可以看到下面这样的输出


​


![](https://postimg.aliavv.com/picgo/20200426175141.png)


安装完成之后进入到项目目录，启动本地预览，成功后项目将会运行在本地的3000端口


​


```

cd reactdemo

yarn start

```



​


![](https://postimg.aliavv.com/picgo/20200426175235.png)



在浏览器中打开localhost:3000，可以看到React的界面，这样说明成功完成了本地开发的项目搭建


​


![](https://postimg.aliavv.com/picgo/20200426175242.png)


## 创建云开发环境


创建一个云开发环境用来部署React项目，可以从微信开发工具创建，也可以通过腾讯云控制台，在产品中找到云开发，这边举例如何从腾讯云中找到云开发


​


![](https://postimg.aliavv.com/picgo/20200426175249.png)



进入到云开发的管理控制台，点击新建环境，或者使用现有的环境来进行部署


​


![](https://postimg.aliavv.com/picgo/20200426175255.png)

​


新建一个环境，或者使用已创建的环境，注意这里计费方式需要选择按量计费，因为只有按量计费才可以进行开通静态网站


​


![](https://postimg.aliavv.com/picgo/20200426175345.png)


​


开通环境后，有一个环境ID，这个ID后续会使用到，点击对应的环境进入环境的管理页面，点击菜单栏中的静态网站，开通静态网站服务


​

![](https://postimg.aliavv.com/picgo/20200426175353.png)

​


出现下面图示的界面，说明已经开通成功了。


​


![](https://postimg.aliavv.com/picgo/20200426175359.png)

​


现在我们通过云开发的CLI来完成React项目的部署。


##  初始化云开发**CLI**


​


完成了云开发环境的配置后，需要登陆云开发 cli ，从而实现借助 cli 来进行部署（当然， 也可以通过网页端直接上传）


在命令行中输入


![](https://postimg.aliavv.com/picgo/20200426175406.png)


将会跳转到云开发控制台页面进行授权，


​


![](https://postimg.aliavv.com/picgo/20200426175415.png)


​


确认授权后出现下图的界面，证明登陆成功了，同时有个小 tips，就是 cloudbase 可以使用简写命令 tcb 


​


![](https://postimg.aliavv.com/picgo/20200426175422.png)



## 打包**React**项目并部署


回到React项目目录中执行yarn build对项目进行打包，React脚手架将会默认将文件打包到build的目录下


​

![](https://postimg.aliavv.com/picgo/20200426175429.png)


打包完成后，进入到build后的目录执行如下命令来进行部署，envID需要替换成自己的envID


```

cloudbase hosting:deploy -e envId

```


部署完成后，就可以进行预览了


​

![](https://postimg.aliavv.com/picgo/20200426175456.png)


## 线上访问


进入对应环境设置页面，可以找到默认的的域名，点击域名，就可以看到你刚刚部署React项目，由于默认域名仅供测试使用，限制下行速度10KB/S。


​

![](https://postimg.aliavv.com/picgo/20200426175501.png)


​


如果需要对外正式提供网站服务，最好绑定已备案的自定义域名。


​

![](https://postimg.aliavv.com/picgo/20200426175507.png)


## 总结


只需简单的几步，你就可以轻松实现将React生成的SPA应用部署到云开发上，不需要去购买服务器来进行部署，也不用去部署在Github上无法忍受的龟速！省去服务器购买的费用，还不赶快行动起来？


部署 React.js 项目



**云开发静态托管**是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持


在云开发静态托管中，你同样可以托管一个 Angular 项目，接下来，我就介绍一下应该如何将一个 Angular 项目部署到云开发静态网站托管服务中。


## 初始化一个 Angular 项目


首先，我们使用 Angular cli 创建一个项目，来作为演示。


```

ng new cloudbase

cd cloudbase

```


![](https://postimg.aliavv.com/picgo/20200426180202.png)


执行完成后，可以执行 `npm run start` 启动预览，查看一下效果


![](https://postimg.aliavv.com/picgo/20200426180228.png)


看完效果以后，可以执行 `npm run build` 来构建出最终的产出物


![](https://postimg.aliavv.com/picgo/20200426180235.png)


在构建完成后,我们可以在 `dist/cloudbase` 中看到我们的项目构建产物。


![](https://postimg.aliavv.com/picgo/20200426180242.png)


## 创建云开发环境


完成了 Angular 项目的创建后，接下来创建云开发的环境,访问[云开发控制台](https://console.cloud.tencent.com/tcb/env/index),点击上方的新建环境，创建一个新的环境。在弹出的界面中输入你的环境名称，并选择**按量计费**，点击下方的**立即开通**，就可以开通一个云开发环境了。


![](https://postimg.aliavv.com/picgo/20200426180248.png)


等待环境初始化完成后，点击刚刚创建好的环境，进入到详情页，点击左侧的环境设置，可以看到环境的 ID， 记住这里的环境 ID，后续上传文件的时候会用到。


![](https://postimg.aliavv.com/picgo/20200426180253.png)


再次选择左侧列表的「静态网站托管」


![](https://postimg.aliavv.com/picgo/20200426180304.png)


在静态网站托管页面选择立即开通。


![](https://postimg.aliavv.com/picgo/20200426180313.png)


等待静态网站托管服务开通后，你就可以看到这样的界面。点击上方的「设置」，可以看到你的测试域名，后续上传后，你就可以在这个测试域名中查看你的站点。


![](https://postimg.aliavv.com/picgo/20200426180321.png)


## 初始化云开发 Cli


完成了环境的创建后，接下来配置云开发 Cli。


### 安装云开发 Cli 并登陆


首先，我们执行命令安装云开发 Cli


```

npm i -g @cloudbase/cli

```


![](https://postimg.aliavv.com/picgo/20200426180328.png)


安装完成后， 执行命令登陆 Cli


```

tcb login

```


系统会自动打开浏览器，你只需要在弹出的页面中登陆你的腾讯云账号，并授予 Cli 权限就可以操作了。


## 上传文件


完成了 Cli 的登陆后，接下来就可以上传文件了。首先，进入到 Angular 项目的 dist 目录: `cd dist/cloudbase`，然后，执行命令来上传文件


```

tcb hosting:deploy -e envId

```


这里你需要将 envId 替换为你自己的环境 ID，比如我的替换为 **website-126ca8**，结果如下


![](https://postimg.aliavv.com/picgo/20200426180335.png)


可以看到，我成功的上传了文件，这个时候，我可以直接访问我的测试域名来查看我刚刚上传的 Angular 项目。


![](https://postimg.aliavv.com/picgo/20200426180342.png)


当你看到这样的界面时，就说明你配置成功了。


## 总结


云开发的静态托管中想要上传 Angular 项目也十分简单，你只需要初始化一个 Angular 项目，并使用云开发的 CLi 工具就可以完成文件的上传。


部署 Angular 项目



我们知道部署web应用程序的最佳方式是作为静态HTML应用程序，因为他对搜索引擎很友好，速度快等等，这对我们写个人博客这样的小型网站无异于非常nice。如果你的应用可以作为静态HTML，那么可以试试Next.js。


它可以把一个应用程序作为静态页面导出，那么导出的静态页面怎么部署到静态托管呢？我们以云开发静态托管服务为例。


## 什么是云开发？


可以理解为它为我们提前做好了很多的事(例如负载均衡，冷备热备，网络安全等等)，使我们只需关注业务逻辑即可。就像包饺子一样，提前有人给你准备好饺子馅和发好的面，我们只需要包饺子就可以了。详细了解可以到云开发查看


首先我们需要准备的环境以及工具如下：


必要环境:


> node.js

> 开通云环境


开发工具：


> create-next-app

> @cloudbase/cli



下面我们来详细操作~


首先我们进行安装create-next-app


`npm i create-next-app`


以及云开发工具@cloudbase/cli


`npm i @cloudbase/cli`


npm命令是在安装node.js时自动安装



## 构建Next项目

利用脚手架创建一个项目


```

npx create-next-app 项目名称

```


此处项目名称为你的项目根目录名称


创建完成后我们进入到项目中


```

cd 项目名称

```


我们需要在跟目录中新建一个next.config.js文件


```javascript

module.exports = {

    exportTrailingSlash: true,

    exportPathMap: function () {

         return {

            '/': {page: '/'}

         };

     },

};

```


如果你希望生成的静态文件不只包含首页和404页面(Next自动生成),那么可以在next.config.js中加入`'/about': {page: '/about/about'}`,并在pages下新建一个about文件夹并创建about.js文件写入，如果只是测试生成首页和404就够了，那么直接跳到第4步即可


```javascript

const about = () => (

  <div>about</div>

)

export default about

```


附上next.config.js添加后的完整代码：



```javascript

module.exports = {

     exportTrailingSlash: true,

     exportPathMap: function () {

        return { 

            '/': {page: '/'},

            '/about': {page: '/about/about'}

        };

     },

};

```

在package中加入一个script命令

```

"export": "next export"

```

我们运行下列代码来生成静态文件


```bash

npm run build

npm run export

```


我们发现根目录中生成了一个out文件夹，该文件夹下的所有文件就是我们生成的静态文件，所以接下来要做的事就是开通云环境并将其部署到静态网站托管。


![](https://postimg.aliavv.com/picgo/20200426180817.png)


## 开通云环境

我们打开云开发并创建一个新的环境


![](https://postimg.aliavv.com/picgo/20200426180833.png)


这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。


![](https://postimg.aliavv.com/picgo/20200426180843.png)


创建成功后会自动对环境进行初始化(此过程大概2~3分钟)。


![](https://postimg.aliavv.com/picgo/20200426180852.png)


初始化成功后我们进到对应的环境中找到静态网站托管并开始使用


![](https://postimg.aliavv.com/picgo/20200426180859.png)


等待静态网站服务初始化后就可以使用啦~



## 部署上传

首先在项目根目录下执行云开发登录命令


```

tcb login

```


![](https://postimg.aliavv.com/picgo/20200426180923.png)



在弹出的页面进行授权操作


![](https://postimg.aliavv.com/picgo/20200426180933.png)


进行上传操作，这里我们希望out文件夹下所有的文件一并上传，所以，我们执行命令

```

tcb hosting:deploy ./out -e 你的云开发环境ID

```

![](https://postimg.aliavv.com/picgo/20200426180948.png)


云环境ID可在环境ID下查看


![](https://postimg.aliavv.com/picgo/20200426180957.png)


上传完成后我们在静态网站托管中可以看到我们out目录下的所有文件


![](https://postimg.aliavv.com/picgo/20200426181009.png)


云开发默认提供了一个与环境对应的默认域名，可以通过这个默认域名进行访问。


![](https://postimg.aliavv.com/picgo/20200426181022.png)


![](https://postimg.aliavv.com/picgo/20200426181026.png)


## 总结

我们总结一下步骤，大体上只有三步


1. 创建Next项目并生成静态文件

2. 开通云环境与静态网站托管服务

3. 使用云开发工具cloudbase/cli命令进行部署上传


部署 Next.js 项目





最开始了解到Nuxt是在vue SSR下了解到，用过之后感觉真香。 可以省去路由划分的时间，Nuxt.js 会读取该目录下所有的 .vue 文件并自动生成对应的路由配置、进一步封装Vuex等等。下面来介绍如何将Nuxt部署到静态托管上？ 


云开发（Tencent CloudBase，TCB）}是云端一体化的后端云服务 ，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力极大的降低了应用开发的门槛。


环境要求

- node.js


工具准备

- Nuxt脚手架： create-nuxt-app

- 云开发命令工具： @cloudbase/cli


## 安装

安装Nuxt脚手架


    npm i create-nuxt-app


安装云开发命令工具 CLI

    

    npm i -g @cloudbase/cli


> 测试 cloudbase/cli 是否安装成功 可以使用cloudbase或tcb命令




    cloudbase -v


或


    tcb -v


## 创建Nuxt项目

    npx create-nuxt-app demo


## 紧接着进入到项目目录下（这里是demo）


1. 在命令行下执行`npm run generate`生成静态html文件

2. 在项目目录中会生成一个dist文件夹。该文件夹下的文件就是生成的静态文件


![](https://postimg.aliavv.com/picgo/20200426181429.png)



## 将 Nuxt 静态网站托管到云开发


首先我们打开 云开发


![](https://postimg.aliavv.com/picgo/20200426181522.png)



选择或创建自己的云开发环境


![](https://postimg.aliavv.com/picgo/20200426181531.png)


这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。



![](https://postimg.aliavv.com/picgo/20200426181655.png)


创建成功后会自动对环境进行初始化(此过程大概2~3分钟)。


![](https://postimg.aliavv.com/picgo/20200426181702.png)


初始化成功后我们进到对应的环境中找到静态网站托管并开始使用


![](https://postimg.aliavv.com/picgo/20200426181712.png)


等待静态网站服务初始化后就可以使用啦~


接下来我们就可以将nuxt的静态网站上传到云开发静态网站托管了。


首先执行登录命令


    tcb login


![](https://postimg.aliavv.com/picgo/20200426181849.png)


在弹出的页面进行授权


![](https://postimg.aliavv.com/picgo/20200426181901.png)


接着，将静态网站进行部署到云开发静态网站托管


这里我们将dist文件夹下的所有文件都部署到静态网站托管中，执行命令


    tcb hosting:deploy 文件夹  -e 云环境ID


这里的文件夹是将此文件夹下所有的文件都部署到云开发的根目录中，云环境ID可在环境ID下查看


![](https://postimg.aliavv.com/picgo/20200426181915.png)


因为我们希望将dist下的所有文件部署上去，所以上面的命令我们可以写成


    tcb hosting:deploy ./dist -e demo-1cdbae


![](https://postimg.aliavv.com/picgo/20200426181939.png)


上传成功后我们会发现，静态网站托管中多了许多文件


![](https://postimg.aliavv.com/picgo/20200426181946.png)


那我们如何浏览呢？


云开发默认提供了一个与环境对应的默认域名，可以通过这个默认域名进行访问。


![](https://postimg.aliavv.com/picgo/20200426181954.png)


![](https://postimg.aliavv.com/picgo/20200426181959.png)


这样至此我们的Nuxt就部署成功啦



但默认域名存在限制下行速度10KB/S，如果正式使用的话需要添加一个已经备案的域名


![](https://postimg.aliavv.com/picgo/20200426182011.png)


并为其添加dns解析



![](https://postimg.aliavv.com/picgo/20200426182021.png)


![](https://postimg.aliavv.com/picgo/20200426182026.png)


如果可以ping通这个CNAME就可以进行使用自己的域名进行访问啦~~


部署 Nuxt.js 项目





随着各个大型App都推出了自己的小游戏平台，游戏也越来越受到开发者的关注。

Cocos Creator是一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具。这篇文章将介绍下，如何将Cocos Creator的游戏代码通过云开发网站静态托管的方式，快速的部署到线上。


> 本文的重点并不是介绍如何用Cocos Creator开发一款小游戏，所以如果没有Cocos Creator的使用或者开发经验的话，建议先查阅Cocos Creator的开发手册。


### Cocos Creator生成游戏的静态访问文件


假定我们现在已经开发好一款Cocos Creator游戏，点击`Cocos Creator -> 项目 -> 构建发布`，你会看到下面的界面：


![](https://postimg.aliavv.com/picgo/20200427095306.png)



点击构建，就会将我们开发好的游戏编译成可供访问的web游戏项目结构:


![](https://postimg.aliavv.com/picgo/20200427095320.png)



> 这里由于我们是需要再web端访问我们的小游戏，所以在`发布平台`的选项中，我们选择`Web Mobile`。


### 静态托管部署


我们进入腾讯云的云开发(cloudbase)控制台，选择开通一个云环境:


![](https://postimg.aliavv.com/picgo/20200427095331.png)



这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。创建完成后，点击进入我们刚刚创建的云环境，进入云环境管理界面：


![](https://postimg.aliavv.com/picgo/20200427095337.png)



在云环境管理界面，在右侧的网站托管中，我们可以将刚刚项目中生成好的静态页面给上传上去。当然，手动上传显的不太友好，我们也可以借助 [cloudbase cli](https://docs.cloudbase.net/cli/intro.html) 以命令行的方式执行上传。


首先，安装cloudbase cli:


```

npm install -g @cloudbase/cli

```


执行登录命令：


```

tcb login

```

![](https://postimg.aliavv.com/picgo/20200427095348.png)



在弹出的页面确认授权:


![](https://postimg.aliavv.com/picgo/20200427095357.png)



接着，在项目中将编译好的`build/web-mobile`目录中的文件给部署上去：


```

cloudbase hosting:deploy ./build/web-mobile  -e EndId

```


这里的 EnvID 替换为刚创建好的环境ID。


![](https://postimg.aliavv.com/picgo/20200427095402.png)



腾讯云云开发的静态网站托管有默认域名可供访问：


![](https://postimg.aliavv.com/picgo/20200427095408.png)



通过默认域名，我们就能访问啦。


![](https://postimg.aliavv.com/picgo/20200427095413.png)


我们就能访问啦。不过这里需要注意的是，云开发静态托管的默认访问域名限制了访问的下行速度，对于游戏这种静态资源量较大的项目，建议还是自己购买个域名绑定进行访问。


部署 Cocos 游戏

云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持.


使用云开发静态托管可以帮助游戏轻松扛过流量洪峰，让业务平稳运行~同时，可以在 Egret 中接入云开发的 SDK，将数据库、函数、存储等环节也迁移至云开发上，让整个业务不再崩盘。


## 初始化项目

首先， 需要使用 Egret Launcher 初始化一个项目，关于 Egret Launcher 的安装就不再介绍。



打开 Egret Launcher ，创建一个新的 Egret 游戏项目


![](https://postimg.aliavv.com/picgo/20200427095616.png)



项目创建完成后， 可以点击 Egret Wing ，对项目进行编辑


![](https://postimg.aliavv.com/picgo/20200427095638.png)



这里，我们不再编辑，直接执行发布

点击发布按钮，进入到发布页面


![](https://postimg.aliavv.com/picgo/20200427095652.png)


选择 HTML5 ，并点击确定，进行发布


![](https://postimg.aliavv.com/picgo/20200427095738.png)


发布完成后，点击打开文件夹，可以看到构建产物


![](https://postimg.aliavv.com/picgo/20200427100005.png)


![](https://postimg.aliavv.com/picgo/20200427100018.png)


接下来，我们只需要将这些构建产物上传到云开发的静态托管上就可以将 Egret 游戏部署到云开发静态网站托管之上。


## 创建云开发环境

在完成了游戏的开发后， 我们来创建云开发环境，用于后续的部署。访问云开发控制台，点击【新建环境】，创建一个新的环境


![](https://postimg.aliavv.com/picgo/20200427100108.png)


在弹出的环境创建页面，输入你要创建的环境名称。此外，这里计费方式需要选择 按量付费。

![](https://postimg.aliavv.com/picgo/20200427100135.png)



设置完成后，点击立即开通， 就可以开通一个新的云开发环境了。


![](https://postimg.aliavv.com/picgo/20200427100345.png)


你会看到你的环境名变成了你输入的字符加一段随机生成的字符串，这个是你的环境 ID，你可以记录一下你的环境 ID ，后续会用到。稍等片刻，云环境初始化完成后，点击进入详情页面，点击左侧的静态网站托管，


![](https://postimg.aliavv.com/picgo/20200427100402.png)


你会进入到静态托管的详情页面，点击开始使用，开通静态托管服务


![](https://postimg.aliavv.com/picgo/20200427100429.png)


等待静态托管服务的开通，稍等片刻，就开通好了。你可以在设置中看到你的域名信息


![](https://postimg.aliavv.com/picgo/20200427100447.png)


比如我的域名是 https://egret-14cdf2.tcloudbaseapp.com/，这个域名是云开发分配给我的测试域名，可以让我在没有迁移到生产环境的时候完成产品的测试。


## 安装云开发 Cli & 登陆


我们可以通过云开发控制台手动上传这些文件，也可以使用云开发 cli 工具上传。


![](https://postimg.aliavv.com/picgo/20200427100522.png)



考虑到我们在工作中绝大多数场景都是使用 Cli 来完成上传的，因此，这里我们将会使用 Cli 来上传。


关于 CLi 工具安装就不在此赘述，大家可以直接去看云开发的官方文档：http://docs.cloudbase.net/cli/intro.html，按照官方文档进行安装即可。


在完成 cli 工具的安装后，执行如下命令来登陆



```

tcb login

```


登陆完成后，可以看到这样的界面。


![](https://postimg.aliavv.com/picgo/20200427100555.png)



## 上传文件

完成了云开发 Cli 的配置，接下来我们可以来上传文件到云开发，使用命令行，进入到我们刚刚生成的项目文件夹中，比如我这里是进入到了   这个目录 ,然后在这个目录中执行命令进行部署


    tcb hosting:deploy -e egret-14cdf2


稍等片刻，我们的文件就上传完成了。


![](https://postimg.aliavv.com/picgo/20200427100629.png)


访问我们刚刚拿到的测试环境的网址，可以看到这样的界面，则说明我们成功的将游戏部署到云开发静态网站托管之上，接下来我们只需要绑定域名，就可以将游戏上线啦~


![](https://postimg.aliavv.com/picgo/20200427100650.png)


部署 Egret 游戏




云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持.


使用云开发静态托管可以帮助游戏轻松扛过流量洪峰，让业务平稳运行~同时，可以在 LayaBox 中接入云开发的 SDK，将数据库、函数、存储等环节也迁移至云开发上，让整个业务不再崩盘。


## 初始化项目

打开 Laya Air IDE, 初始化一个项目，这里我们将其命名为 cloudbase,放在桌面上。


![](https://postimg.aliavv.com/picgo/20200427101954.png)



可以点击运行按钮，运行创建好的游戏模板，看一下效果。


![](https://postimg.aliavv.com/picgo/20200427102010.png)



正常运行后，就说明我们配置好了一个项目。


## 发布项目


点击顶部菜单栏的 **发布** 按钮，进入发布流程


![](https://postimg.aliavv.com/picgo/20200427102035.png)



选择发布平台为 Web，并点击发布，等待游戏的自动发布


![](https://postimg.aliavv.com/picgo/20200427102506.png)



发布完成后，会提示你查看发布文件夹


![](https://postimg.aliavv.com/picgo/20200427102521.png)



打开后，可以看到编译完的内容


![](https://postimg.aliavv.com/picgo/20200427102533.png)




这些就是 Layabox 游戏的所有文件了，接下来只要将这些文件上传到云开发的静态存储中，就可以让我们使用 LayaBox 开发的游戏享受到高性能的网站托管了。


## 创建云开发环境


在完成了游戏的开发后， 我们来创建云开发环境，用于后续的部署。访问云开发控制台，点击【新建环境】，创建一个新的环境


![](https://postimg.aliavv.com/picgo/20200427102558.png)



在弹出的环境创建页面，输入你要创建的环境名称。此外，这里计费方式需要选择 按量付费。


![](https://postimg.aliavv.com/picgo/20200427102612.png)



设置完成后，点击立即开通， 就可以开通一个新的云开发环境了。


![](https://postimg.aliavv.com/picgo/20200427102629.png)



你会看到你的环境名变成了你输入的字符加一段随机生成的字符串，这个是你的环境 ID，你可以记录一下你的环境 ID ，后续会用到。稍等片刻，云环境初始化完成后，点击进入详情页面，点击左侧的静态网站托管，


![](https://postimg.aliavv.com/picgo/20200427102643.png)



你会进入到静态托管的详情页面，点击开始使用，开通静态托管服务


![](https://postimg.aliavv.com/picgo/20200427102656.png)



等待静态托管服务的开通，稍等片刻，就开通好了。你可以在设置中看到你的域名信息


![](https://postimg.aliavv.com/picgo/20200427102709.png)



比如我的域名是 https://layabox-15b541.tcloudbaseapp.com/，这个域名是云开发分配给我的测试域名，可以让我在没有迁移到生产环境的时候完成产品的测试。


![](https://postimg.aliavv.com/picgo/20200427102724.png)


## 安装云开发 Cli & 登陆

我们可以通过云开发控制台手动上传这些文件，也可以使用云开发 cli 工具上传。


![](https://postimg.aliavv.com/picgo/20200427102739.png)



考虑到我们在工作中绝大多数场景都是使用 Cli 来完成上传的，因此，这里我们将会使用 Cli 来上传。


关于 CLi 工具安装就不在此赘述，大家可以直接去看云开发的官方文档：http://docs.cloudbase.net/cli/intro.html，按照官方文档进行安装即可。


在完成 cli 工具的安装后，执行如下命令来登陆



    tcb login 



登陆完成后，可以看到这样的界面。


![](https://postimg.aliavv.com/picgo/20200427102822.png)


 

## 上传文件

完成了云开发 Cli 的配置，接下来我们可以来上传文件到云开发，使用命令行，进入到我们刚刚生成的项目文件夹中，比如我这里是进入到了 C:\Users\xxx\Desktop\Cloudbase\release\web  这个目录 ,然后在这个目录中执行命令进行部署


    tcb hosting:deploy -e layabox-15b541



稍等片刻，我们的文件就上传完成了。


![](https://postimg.aliavv.com/picgo/20200427102842.png)



访问我们刚刚拿到的测试环境的网址，可以看到这样的界面，则说明我们成功的将游戏部署到云开发静态网站托管之上，接下来我们只需要绑定域名，就可以将游戏上线啦~


![](https://postimg.aliavv.com/picgo/20200427102852.png)



## 总结


将 Layabox 开发的游戏部署到云开发静态网站托管上十分简单，只需要简单的配置一下云开发 cli ，就可以将 LayaAir IDE 开发出来的项目部署到云开发静态网站托管之上。


在实际使用过程中，因为测试域名有限速的配置，因此，建议大家绑定自己的域名，查看效果。


部署 LayaBox Air 游戏




云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持


# 为什么要做静态化发布？


Discuz 因为其强大的性能，在国内被广泛使用。

但是， Discuz 是一套动态系统，动态系统因为允许用户输入，就存在被破解、攻击的可能。对于企业来说，使用Discuz 意味着将自己的网站放置在敌人的枪口之下，因此，进行静态化发布也就势在必得。

此外，静态化的一个好处是服务器的负载会大幅度降低，对于企业来说，可以降低服务器的支付成本。


# 安装测试Discuz

首页，我们需要本地搭建服务器（这里我推荐大家使用 PhpStudy ）

可以到PhpStudy官网：https://www.xp.cn 下载并安装，安装成功后，打开点击一键启动


![](https://postimg.aliavv.com/picgo/20200427121858.png)


然后到码云上下载Discuz https://gitee.com/3dming/DiscuzL/attach_files ，完成后在本地解压


![](https://postimg.aliavv.com/picgo/20200427121921.png)



最后打开PhpStudy，在网站选项下，创建一个网站域名为 discuz.cn 指向刚才解压的文件，注意的是这里文件路径不能包含中文，可以改一下文件名。


![](https://postimg.aliavv.com/picgo/20200427121946.png)


记得在 Hosts 中将 discuz.cn 指向 127.0.0.1


创建成功后我们在浏览器中打开 discuz.cn 这个域名，会显示安装页面


在第3步安装数据库页面下我们填写管理员密码，然后进行下一步，数据库账号和密码默认是root。


![](https://postimg.aliavv.com/picgo/20200427122028.png)


安装成功后，我们就可以看到下面这个页面，然后我们登入账号进入管理中心


![](https://postimg.aliavv.com/picgo/20200427122037.png)


管理端登入成功后我们开始生成HTML页面，用来部署到云开发环境中


![](https://postimg.aliavv.com/picgo/20200427122048.png)


点击门户下面的HTML管理，设置一下HTML的生成


![](https://postimg.aliavv.com/picgo/20200427122118.png)


设置成功后，我们点击生成首页选项，然后点击生成按钮。如果想生成其它HTML，从频道栏目下开始添加和发布文章再生成。


![](https://postimg.aliavv.com/picgo/20200427122130.png)


显示首页生成完成，这个时候就可以点击首页访问了，成功后就可以看到下图


![](https://postimg.aliavv.com/picgo/20200427122158.png)


## 静态化部署


下面使用云开发部署这个首页，其它页面需要生成HTML页面后在部署。

## 部署到云开发静态网站托管

### 创建云开发环境

访问腾讯云云开发控制台，新建【按量计费云开发环境】，记住云开发环境ID，我们需要用到云开发网站托管服务，目前只有按量计费的环境才支持静态托管。


![](https://postimg.aliavv.com/picgo/20200427122213.png)


进入网站托管控制页，开通静态网站托管服务


![](https://postimg.aliavv.com/picgo/20200427122224.png)


当你看到这样的界面时，就说明已经开通好了。

### 安装云开发CLI 工具

    npm install -g @cloudbase/cli

### 登入

    tcb login


这个时候会提醒你需要在网页中授权，在弹出的页面确认授权


![](https://postimg.aliavv.com/picgo/20200427122248.png)


确认授权后，你会看到控制台输出相应的命令

现在开始部署生成的首页HTML，打开终端，进入upload目录

这个我们用代码工具打开 upload文件夹下的index.html，将选中的这一段删掉


![](https://postimg.aliavv.com/picgo/20200427122259.png)


在终端中执行以下命令开始部署，记得将这里的 EnvID 替换为你自己的环境的环境 ID


    tcb hosting:deploy index.html -e EnvID

    tcb hosting:deploy data data  -e EnvID

    tcb hosting:deploy static/image/common/logo.png static/image/common/logo.png  -e EnvID


上面命令是部署我们生成的HTML页面用到的文件夹

### 查看静态网站域名和状态


    tcb hosting:detail -e envId 


这个时候我们打开浏览器访问静态网站域名，就可以看到下面这个效果图了

### 总结

这里只是部署了首页，其它页面需要添加频道栏目、添加文章后在生成HTML，具体操作可以看官方介绍。


Discuz 静态化部署


> 本文作者：[云开发用户 Handsomedoggy](https://cloud.tencent.com/developer/article/1607761)


相信很多同学都接触过或者使用过博客系统WordPress，WordPress不得不说是一个非常棒的一个CMS，这点是毋庸置疑的，不管是从它的性能上来说还是从它整个的一个功能上。那么本篇文章，就教你如何把一个静态的WP部署到腾讯云的云开发上。


这里就有同学问了，什么是静态？为什么我们要使用静态？


## 1、什么是静态？-----我们这里所说的静态，是指静态的web网站。


它的每一个页面都是由html文件配合CSS、Javascript或其他媒体元素组成，这类型的网站，每一次修改都是需要重新的部署，名字上我们也了解到，静态嘛，固定不动。不过同学也不要理解成静态网站就是从视觉上的静态了。


## 2、为什么我们要使用静态WordPess？------关于这个问题，其实静态跟动态可以说是各有所长。

- 稳定性---因为是静态的，所以它的页面内容是比较稳定的，他不会因为程序上的某些错误就会导致一些显示的不正常。


- 安全性---静态是特别安全的，因为它们本身就只是html文件，不会涉及到任何的数据库等。


- 速度---静态文件的加载速度比动态文件快，就好比如，我们使用一个php程序，它需要调用数据库，需要去执行我们给他编写好的指令，静态文件没有这些步骤。再然后就是可以配合CDN(内容分发系统)，做到更快的网站访问速度。


- 费用---静态文件使用的资源较少。


这里有的同学又有问题了，静态那么好，为什么我们还要使用动态的呢？

就如我上面所说，静态跟动态各有所长，下面我们来说说WordPress静态化后的缺点:


1. 评论系统、会员模块、各种各样的插件等一系列需要使用到PHP和数据库的所有模块都会失效，如果你经常需要互动之类的，那么这个静态WP可能不是很适合你，或许你也可以找到其他的解决方案。


2. 内容改变需要重新部署，因为是静态的文件，所以你做的每次改动都需要重新部署到我们的云开发上，相对来说比较麻烦，如果你是经常更新甚至是日更，那么这个静态WP可能不是很适合你。


综上所述，此方案比较适合不经常更新且具有展示性需求使用的同学使用。介绍了那么多，我们开始进入正题！

## 安装依赖环境

首先我们需要安装Node.js 和 npm，可参考node.js安装指南 


再然后我们需要安装云开发的CLI


    npm install -g @cloudbase/cli //此前需要安装 Node.js


安装完成后，我们需要在我们的本地部署一个PHP环境以及安装好我们的WP。本地环境可以使用PHPSTUDY或者WAMPSERVER 


我们安装好本地环境后，启动我们的本地web服务


![](https://postimg.aliavv.com/picgo/20200427122717.png)


点击网站---管理---根目录  就可以进入到我们的本地网站根目录啦

之后我们到WordPress官网 下载Wordpress程序，打开并把wordpress文件夹解压到本地网站的根目录。


![](https://postimg.aliavv.com/picgo/20200427122729.png)


紧接着我们到浏览器，访问我们的wordpress


![](https://postimg.aliavv.com/picgo/20200427122740.png)


点击现在开始我们会看到要求我们填写数据库信息。我们先到我们的本地环境上创建一个数据库


![](https://postimg.aliavv.com/picgo/20200427122749.png)



紧接着我们输入我们的数据库信息,数据库主机我们使用默认的localhost， 表前缀无需改动

点击提交后我们就会到站点信息补充，填写好我们的管理员用户&密码&站点名称等 我们点击安装


![](https://postimg.aliavv.com/picgo/20200427122756.png)


安装完成后，有的同学点击登录可能会 出现该网页无法正常运作 localhost 目前无法处理此请求。HTTP ERROR 500的错误，


这里我们可以在地址栏输入http://本地链接/wordpress/ 先进入我们的主页面看看,不出意外的话同学们都已经显示出我们的主页了。



之后我们再访问 http://本地/wordpress/wp-admin/   (http://localhost/wordpress/wp-admin/)就可以进入我们的后台管理页面啦，输入我们之前所填写的用户名与密码即可登录到后台管理页面。(本地请替换为localhost)


有的同学的WP页面会出现一些PHP相关的错误或者Warnning，可以到本地环境的php.ini更改一下错误显示。

使用phpstudy的同学可以到 **设置--配置文件--php.ini**，点击php7.3.4ns可以进入到php.ini。


WAMP的同学可以单击任务栏WAMP小图标，找到php.ini 。我们进入到php.ini后，搜索 error_reporting 并把 `error_reporting=E_ALL` 改成


`error_reporting=E_ALL & ~E_DEPRECATED & ~E_STRICT`


继续搜索 `display_errors` 并把`display_errors=On`改成`display_errors=Off`


继续搜索 log_errors 并把`log_errors=On`改成`log_errors=Off`


之后我们重启一下web服务，再访问我们的主页就不会出现错误提示啦！


紧接着我们安装三个插件


- [wp2static-7.0-alpha-004 (3).zip](https://ask.qcloudimg.com/draft/6685282/nszql0s44g.zip)

- [wp2static-addon-zip-1.0-alpha-2 (1).zip](https://ask.qcloudimg.com/draft/6685282/xekdxh169g.zip)

- [wenprise-pinyin-slug.1.4.13.zip](https://ask.qcloudimg.com/draft/6685282/cz3c5266eu.zip)


下载上面的附件后，到后台管理的插件--添加插件--上传插件，依次导入安装并启用插件。


第一个插件是WP2Static 这个插件可以帮助我们把WP转换为静态文件


第二个插件是Wenprise Pinyin Slug 这个插件可以把中文的名称转换为拼音(在路径上的转换会用到)


之后我们就可以开始我们的创作啦！


![](https://postimg.aliavv.com/picgo/20200427122952.png)


我随便创建了两篇文章用于测试使用，并添加了附件与图片

之后我们到插件wp2static插件进行静态化操作。在使用插件之前，我们到我们腾讯云的控制台找到云开发 并创建好云环境，再进入云环境把网站托管打开。如无意外的话我们可以看到我们的云环境ID 我的是ykc-151533


然后我们进入到插件页面


![](https://postimg.aliavv.com/picgo/20200427123009.png)


紧接着我们点击Option下面的Jobs，把interval选择为every minute（这里的意思是插件开始运作的时间），再点击Manually Enqueue Jobs Now（手动添加进执行队列）


![](https://postimg.aliavv.com/picgo/20200427123014.png)


紧接着我们等待片刻，时不时点击一下Refresh page,等我们看到所有工作的Status(状态)都显示completed(完成)的时候，我们进入下面的ZIP(在logs下面)，选择download zip。下载完后，这个zip文件就是我们WP的静态文件啦


紧接着我们开始把这个静态文件部署到我们的云开发，我们解压文件到一个目录,我解压到了E:\test 如果不出意外的话你会看到一个index.html wordpress wp-content index.php等文件夹


然后我们打开终端 进入他的上级目录


    cd D:\


紧接着我们登录我们的Cloudbase CLI 我们输入命令


    tcb login


会自动跳转到腾讯云页面进行授权，授权结束后，我们输入


    tcb hosting:deploy test -e 你云环境ID


我的是ykc-151533 所以我输入


    tcb hosting:deploy test -e ykc-151533


之后就会把我们整个test目录上传到云环境啦，然后我们再输入终端命令


    tcb hosting:detail -e ykc-151533(替换成自己的ID噢！) //查看静态网站域名


我的是https://ykc-151533.tcloudbaseapp.com 



![](https://postimg.aliavv.com/picgo/20200427123038.png)


可以看得到不论是英文还是中文都是正常显示的一个状态，附件也是可用的

本次部署就完成啦！因为云开发默认域名仅供测试使用，限制下行速度10KB/S。如您需要对外正式提供网站服务，请绑定您已备案的自定义域名。所以打开速度可能会有一点点慢的，有条件的同学可以绑定自己的域名啦！


好了，本次的分享就到这里了，有想法或者对本次的部署有什么疑问的同学可以到下面的评论区评论啦！


WordPress 静态化部署

**简单介绍一下：**


[云开发](https://console.cloud.tencent.com/tcb)：云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。


云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站


[docsify](https://docsify.js.org/)：docsify动态生成文档网站。与GitBook不同，它不生成静态html文件。相反，它聪明地加载和分析您的Markdown文件，并将它们显示为一个网站。要开始使用它，只需创建一个index.html和在静态网站托管页面上部署它.


接下来我们分三步进行：搭建环境→创建项目→部署


**搭建环境**


1.安装Node.js 和 npm


通过 node -v 命令查看本机是否安装，如果没有安装，参考[node.js安装指南 ](https://nodejs.org/zh-cn/download/)根据电脑系统环境进行安装


2.安装cloudbase/cli


```

npm install -g @cloudbase/cli

```


3.安装docsify-cli


```

npm i docsify-cli -g

```


4.测试安装是否成功


```

cloudbase -v

docsify -v

```


如果看到输出版本号，说明已经安装成功。


**创建项目**


初始化这个项目


```

docsify init docs

```


初始化完成后，您可以修改/docs/README.md文件内容，然后在本地运行


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611152926.png)


运行本地服务器


```

docsify serve docs

```


运行成功后，打开浏览器，访问 localhost:3000


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611152953.png)


**部署**


创建云开发环境


访问[腾讯云云开发控制台](https://console.cloud.tencent.com/tcb)，新建【按量计费云开发环境】，记住云开发环境ID，我们需要用到云开发网站托管服务，目前只有按量计费的环境才支持静态托管。


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611153003.png)


进入[网站托管控制页](https://console.cloud.tencent.com/tcb/hosting)，开通静态网站托管服务


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611153011.png)


当你看到这样的界面时，就说明已经开通好了。


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611153017.png)


登入


```

tcb login

```


这个时候会提醒你需要在网页中授权，在弹出的页面确认授权


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611153025.png)


确认授权后，你会看到控制台输出相应的命令


执行命令上传文件，记得将这里的 EnvID 替换为你自己的环境的环境 ID


```

tcb hosting:deploy ./ -e EnvID

```


稍等片刻，文件就上传好了


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611153033.png)


查看静态网站域名和状态


```

 tcb hosting:detail -e envId 

```


这个时候你会看到静态网站域名，打开浏览器访问就可以了


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611153041.png)


这个时候你可以访问[云开发控制台](https://console.cloud.tencent.com/tcb/hosting)，查看上传的文件


![](http://cloudbasenet-1258016615.cosgz.myqcloud.com/20200611153049.png)


 点击设置，就可以看到刚才控制台输出的默认域名，当然你也可以添加自己的域名 


**小结**


部署过程中用到的环境ID envId ，可以在 [云开发控制台](https://console.cloud.tencent.com/tcb) 查看，[docsify](https://docsify.js.org/)的基本使用可以到其官网查看


如果在操作过程中遇到问题，可以评论留下你的问题


Docsify 文档部署

**简单介绍一下：**


[云开发](https://console.cloud.tencent.com/tcb)：云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。


云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站


[织梦CMS](http://www.dedecms.com)：DedeCMS基于PHP+MySQL的技术开发，支持多种服务器平台，从2004年开始发布第一个版本开始，至今已经发布了五个大版本。DedeCMS以简单、健壮、灵活、开源几大特点占领了国内CMS的大部份市场，目前已经有超过35万个站点正在使用DedeCMS或基于DedeCMS核心开发，产品安装量达到95万。


## 为什么要做静态化发布？

织梦 CMS 是一套动态系统，动态系统因为允许用户输入，就存在被破解、攻击的可能。对于企业来说，使用织梦 CMS 意味着将自己的网站放置在敌人的枪口之下，因此，进行静态化发布也就势在必得。


此外，静态化的一个好处是服务器的负载会大幅度降低，对于企业来说，可以降低服务器的支付成本。


**安装织梦CMS**


首先，我们需要本地搭建服务器（这里我推荐大家使用 [PhpStudy](https://www.xp.cn/) ）


可以到PhpStudy官网：https://www.xp.cn 下载并安装，安装成功后，打开点击一键启动


![](https://postimg.aliavv.com/mbp/xpn86.jpg)




然后到织梦CMS官网： http://www.dedecms.com 下载 [DedeCMS V5.7 SP2正式版](http://www.dedecms.com/products/dedecms/downloads/)，在本地解压


![](https://postimg.aliavv.com/mbp/7uymr.jpg)


最后在PhpStudy网站选项下，创建一个网站域名为 dedecms.cn 指向刚才下![载的织梦CMS文件中的uploads目录](https://postimg.aliavv.com/mbp/lv9r3.jpg)


创建成功后我们在浏览器中打开 dedecms.cn 这个域名，会显示安装页面


在参数配置选项下我们填写数据库密码，默认是root，获取初始化数据体验包


![](https://postimg.aliavv.com/mbp/xlhim.jpg)


安装成功后，会显示下面这个页面，这个时候我们点登入网站后台，账号和密码默认都是admin


![](https://postimg.aliavv.com/mbp/wdttt.jpg)


登入成功后，开始生成静态文件，用来部署到云开发静态网站托管上


点击生成选项，在更新主页HTML页面中 点击更新主页HTML按钮


![](https://postimg.aliavv.com/mbp/v0oi6.jpg)


在更新栏目HTML页面中，点击开始生成HTML按钮


![](https://postimg.aliavv.com/mbp/venho.jpg)


在更新文档HTML页面中，我们点击开始生成HTML


![](https://postimg.aliavv.com/mbp/urksn.jpg)


这个时候我们访问主页 http://dedecms.cn/  就可以看到生成的静态HTML页面




**部署到云开发静态网站托管**


创建云开发环境


访问[腾讯云云开发控制台](https://console.cloud.tencent.com/tcb)，新建【按量计费云开发环境】，记住云开发环境ID，我们需要用到云开发网站托管服务，目前只有按量计费的环境才支持静态托管。


![](https://postimg.aliavv.com/mbp/elt64.jpg)


进入[网站托管控制页](https://console.cloud.tencent.com/tcb/hosting)，开通静态网站托管服务


![](https://postimg.aliavv.com/mbp/bfejg.jpg)


当你看到这样的界面时，就说明已经开通好了。


![](https://postimg.aliavv.com/mbp/xk59i.jpg)


登入


tcb login


这个时候会提醒你需要在网页中授权，在弹出的页面确认授权


![](https://postimg.aliavv.com/mbp/l82w1.jpg)


确认授权后，你会看到控制台输出相应的命令




现在部署生成的静态HTML页面，打开终端，进入uploads目录


执行命令上传文件，记得将这里的 EnvID 替换为你自己的环境的环境 ID


```powershell

tcb hosting:deploy ./index.html -e EnvID

tcb hosting:deploy ./a ./a -e EnvID

tcb hosting:deploy ./templets ./templets -e EnvID

tcb hosting:deploy ./images ./images -e EnvID

```


上面命令是部署我们生成的HTML页面用到的文件夹


查看静态网站域名和状态


```powershell

tcb hosting:detail -e envId 

```


![](https://postimg.aliavv.com/mbp/ip2kd.jpg)


这个时候我们打开浏览器访问静态网站域名，就可以看到下面这个效果图了


![](https://postimg.aliavv.com/mbp/br3zm.jpg)


这篇文章到这就结束了，织梦CMS的基本操作建议到他们官网看看。


织梦 CMS 静态化部署

**云开发静态托管**是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持


GitBook 是一个开源的电子书生成工具，可以很方便的帮助你生成简洁大方的电子书，当然，云开发现在也已经支持 GitBook 的部署啦～现在你可以在云开发上部署你的电子书啦～


## 系统依赖


在进行后续的内容前，请先确保你的电脑中安装了 Node.js 运行环境。如果没有安装，可以访问 nodejs.org  下载安装。


## 安装云开发 cli 工具 和 Gitbook


执行如下命令，安装云开发 cli 工具以及 Gitbook


```

npm i -g @cloudbase/cli gitbook-cli

```


## 本地初始化一个 gitbook 电子书项目


首先，我们创建一个 gitbook 电子书项目,执行如下命令来创建一个电子书


```

gitbook init book

```


这样，我们就在 book 目录中创建了一个新的电子书。


![](https://postimg.aliavv.com/picgo/20200427113948.png)


可以执行命令预览一下他


```

cd book

gitbook serve

```


![](https://postimg.aliavv.com/picgo/20200427113957.png)


启动成功后， 打开浏览器的 localhost:4000 ，可以看到我们刚刚新建的电子书


![](https://postimg.aliavv.com/picgo/20200427114008.png)


这样，就说明我们完成了项目的初始化操作。


## 创建一个云开发环境


完成了本地的 Gitbook 创建，接下来我们来创建一个云开发环境，用来部署 Gitbook 。打开腾讯云控制台，在产品中找到云开发


![](https://postimg.aliavv.com/picgo/20200427114017.png)


进入到云开发的管理控制台，点击新建环境，新建一个环境来进行部署


![](https://postimg.aliavv.com/picgo/20200427114023.png)


新建一个环境，名为 docs，并选择按量计费，开通环境


![](https://postimg.aliavv.com/picgo/20200427114028.png)


在开通环境以后， 记住你的环境 ID，这个 ID 后续我们会用到。


创建完成后，点击环境，进入到环境的管理页面。点击左侧菜单栏中的「静态网站」


![](https://postimg.aliavv.com/picgo/20200427114035.png)


并在静态网站页面开通功能


![](https://postimg.aliavv.com/picgo/20200427114042.png)


当你看到这样的界面时，就说明已经开通好了。


![](https://postimg.aliavv.com/picgo/20200427114046.png)


你现在可以通过上传文件手动上传一个文件测试，稍后，我们将会用云开发 Cli 来完成上传。


## 初始化云开发 Cli


完成了云开发环境的配置后， 我们需要初始化一下云开发 cli ，从而实现借助 cli 来上传页面（当然， 也可以通过网页端直接上传，但 Gitbook 如果文档页面较多，还是使用 Cli 上传更简单）


在命令行输入如下代码


```

tcb login

```


会提醒你需要在网页中授权


![](https://postimg.aliavv.com/picgo/20200427114054.png)


在弹出的页面确认授权


![](https://postimg.aliavv.com/picgo/20200427114059.png)


确认授权后，你会看到控制台输出相应的命令


## 部署


这样，你的云开发 cli 就初始化好了。 接下来，就可以进入到最后一个环节，上传部署 Gitbook 了。


## 部署 Gitbook


接下来，我们来构建 Gitbook 的 HTML ，来进行部署，Gitbook 默认会将 HTML 生成在 \_book 目录。我们可以将这个目录下的文件进行上传和部署,执行如下命令（记得将 envId 替换为你自己的环境ID）


```

gitbook build

cd _book

tcb hosting:deploy ./ -e envId

```


![](https://postimg.aliavv.com/picgo/20200427114109.png)


## 访问


点击设置，进入设置页面，可以找到默认的的域名，点击域名，就可以看到你刚刚部署的环境啦。


![](https://postimg.aliavv.com/picgo/20200427114114.png)


比如，我的部署以后是这样的


![](https://postimg.aliavv.com/picgo/20200427114119.png)


这样，就说明你的部署完成啦～


## One More Thing


只需简单的几步，你就可以轻松实现将 Gitbook 部署到云开发上，无需再忍受 Github Pages 的龟速啦！还不快迁移？


不仅如此，如果你是一个自动化爱好者， 还可以试着把云开发 Cli 配置到你的 CI 环境中，实现自动部署哦～


Gitbook 电子书部署

云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持


Github 为开源项目提供了用于静态页面展示的 Pages 服务，很多开发者都在上面托管了自己的静态网站和博客，不少开源项目的案例和文档页面也采用了这种方式。不过由于 Pages 的 CDN 节点大部分在国外，在国内的访问速度不是很理想，不少开发者希望能提升网站在国内的访问速度和稳定性，今天会介绍如何配合 Github Action 的持续集成服务和 云开发 Github Action 扩展，自动部署到访问速度更快的云开发静态托管服务。


![](https://postimg.aliavv.com/picgo/20200427104955.png)


## 云开发静态托管介绍


云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。可以通过腾讯云控制台、命令行工具以及下面会提到的云开发 Github Action 进行管理部署。云开发提供了免费的二级域名（未绑定自定义域名时下行速度有限制），同时支持免费绑定开发者自己的自定义域名。


首个环境可享受 1GB 容量和每月 5GB 流量的免费额度，对于访问量不是很大的个人博客应该足够了。如果流量大也没关系，计费是按照具体使用收费的按量付费方式，具体信息可以查看计费价格文档 https://cloud.tencent.com/product/wh/pricing


云开发静态托管部署的网站，还可以使用云开发的提供的一站式 Serverless 后端能力，例如云函数、云数据库、云存储、身份服务等。比如可以在静态托管的个人博客上面使用云函数和云数据库实现评论、留言板功能等，或者可以把博客的内容管理从原来的静态文件部署变为动态内容管理等，拓展的用法非常的多，开发者可以继续深入探索。


## 如何通过 Github Action 一键部署到云开发


下面演示如何将 Github 静态页面自动部署到云开发的静态托管，来获得稳定的访问速度和更多的扩展能力。


例如开发者的个人博客 Github 项目结构如下：


    |-- src

    |-- build

    |-- README.md 


希望将项目下 build 目录生成的静态网站代码部署到云开发这边开通的静态网站托管的根目录下。


## 编写 Github Action 文件

首先在项目目录配置如下的 Github Action 文件 .github/workflows/main.yml，如果已经配置过 Github Action 就不需要重新创建了，然后参考下面的配置填写。

```
    on: [push] # push 代码时触发


    jobs:

    deploy:

        runs-on: ubuntu-latest

        name: Tencent Cloudbase Github Action Example

        steps:

        - name: Checkout

            uses: actions/checkout@v2

        

        # 使用云开发 Github Action 部署

        - name: Deploy static to Tencent CloudBase

            id: deployStatic

            uses: TencentCloudBase/cloudbase-action@v1

            with:

                # 云开发的访问密钥 secretId 和 secretKey

            secretId: ${{ secrets.SECRET_ID }}

            secretKey: ${{ secrets.SECRET_KEY }}

            # 云开发的环境id

            envId: ${{ secrets.ENV_ID }}

            # Github 项目静态文件的路径

            staticSrcPath: build

```
可以看到配置中主要用到了  云开发 Github Action 扩展 `TencentCloudBase/cloudbase-action@v1` 来部署静态文件。


注意配置文件中参数部分的 secretId、secretKey 、envId属于敏感信息，需要放在项目的 secret 存储中，这里不用填写真实的值，只需要按照上面实例填写变量即可。


staticSrcPath 这里填写了静态网站构建产生的目录 build，如果想把静态资源部署到云端的某个子目录而不是根目录，可以再配置一个参数 staticDestPath 。


## 配置云开发访问信息


我们还需要在项目的 Secrets 中配置 SECRET_ID、SECRET_KEY、ENV_ID 这几个私密信息，下面是具体的配置方式。


首先要开通云开发静态网站，可以参考开通指南：https://docs.cloudbase.net/hosting/，开通环境后即可得到环境ID ENV_ID，然后在腾讯云 访问管理 页面可以配置一对 API 访问密钥，也就是SECRET_ID、SECRET_KEY。


然后在自己的 Github 项目内的 Setting/Secrets  里设置 SECRET_ID, SECRET_KEY, ENV_ID 信息即可。


![](https://postimg.aliavv.com/picgo/20200427105246.png)



配置完之后就可以提交代码体验自动部署了，每次 git push  Actions 都会自动运行，将项目的静态资源部署到自己的云开发静态托管环境，部署成功之后即可通过云开发提供的二级域名访问来自己的网站。


![](https://postimg.aliavv.com/picgo/20200427105304.png)


## 配置自定义域名

云开发提供的免费的二级域名下行速度有所限制，开发者最好绑定一个自己的域名，绑定域名是免费的，还可以在腾讯云配置一个免费的 SSL 证书，来通过 HTTPS 访问自己的网站。


自定义域名的方法可以参考这篇文档 https://docs.cloudbase.net/hosting/custom-domain.html


![](https://postimg.aliavv.com/picgo/20200427105335.png)



配置完成后，测试下部署在云开发静态托管的网站的访问速度，根据测速数据可以看到各地的访问速度都非常快。


![](https://postimg.aliavv.com/picgo/20200427105349.png)


## 更多扩展玩法


云开发 Tencent CloudBase Github Action 这个扩展会 Github 项目自动部署到云开发环境，目前支持静态托管功能，后续会支持其他资源的部署，比如可以把用 Node JS 、 Java、PHP 等语言开发的服务端项目一键部署到云开发，来获得 Serverless 化的动态网站服务。或者自动化部署带有数据库、前端、后端的全栈应用。


Tencent CloudBase Github Action  扩展市场地址


https://github.com/marketplace/actions/tencent-cloudbase-github-action


Tencent CloudBase Github Action 代码开源地址


https://github.com/TencentCloudBase/cloudbase-action


欢迎大家多多体验、Star 支持或者提交 Issue / Pull request 来参与贡献。


Github Action 自动化部署




**云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持**


本文使用了`create-react-app`创建了一个React应用，并把该应用部署到腾讯云的静态网站托管。


## **作者介绍**


钟炜达，任职于腾讯在线教育部IMWEB团队，是一名前端开发工程师。有丰富Web应用开发经验和在前端工程化方面有较多的实践。


## **GitLab中创建 test-cra 项目**


到GitLab首页，点击`NewProject`创建新的工程


​

![](https://postimg.aliavv.com/picgo/20200427103933.png)


`Project Name`和`Project Slug`都填上`test-cra`，点击`Create Project`


​![](https://postimg.aliavv.com/picgo/20200427103933.png)



## **创建web应用**


在本地环境通过`create-react-app`创建了一个名为`test-cra`的项目


```js

yarn create react-app test-cra

```


设置git相关设置，并上传应用到GitLab


```js

cd test-cra

git init

# 这里需要注意username为你的gitlab账户名

git remote add origin git@gitlab.com:username/test-cra.git

git add .

git commit -m "Initial commit"

git push -u origin master

```


接下来到腾讯云中创建云开发环境


## **创建云开发环境**


输入网址：[https://console.cloud.tencent.com/tcb/env/index](https://console.cloud.tencent.com/tcb/env/index)，如果没有授权会弹出以下画面。


![](https://postimg.aliavv.com/picgo/20200427103933.png)


点击`访问管理`，进入授权。


创建一个云开发环境。这里命名环境为`test-cra`。


​

![](https://postimg.aliavv.com/picgo/20200427104148.png)



## **设置SecretId和SecretKey**


输入网址：[https://console.cloud.tencent.com/cam/capi](https://console.cloud.tencent.com/cam/capi)点击新建秘钥即可。


![](https://postimg.aliavv.com/picgo/20200427104240.jpg)



## **GitLab CI设置**


SecretId和SecretKey属于敏感数据，不应该直接写到CI配置文件中。


回到刚刚创建的GitLab项目，找到Settings->CI/CD


![](https://postimg.aliavv.com/picgo/20200427104258.jpg)



找到Variables项如图新建3个key，SecretId、SecretKey和EnvId。并输入对应的value值。注意必须要开启`protected`和`masked`，这样能有效保证数据保密和安全。


​

![](https://postimg.aliavv.com/picgo/20200427104315.jpg)



在云开发面板中，找到环境设置中的环境ID。EnvId的value为环境ID


​

![](https://postimg.aliavv.com/picgo/20200427104636.png)


## **创建.gitlab-ci.yml配置文件**


在本地工程_test-cra_的根目录中创建`.gitlab-ci.yml`文件


![](https://postimg.aliavv.com/picgo/20200427104647.png)



`.gitlab-ci.yml`配置文件如下，这里可查看更多的[gitlab ci 配置](https://gitlab.com/help/ci/yaml/README)


```js

image: node:12.16.2

stages:

  - build

  - deploy


build:

  stage: build

  script:

    - npm i

    - npm run build

  artifacts:

    paths:

      - ./build/

  only:

    - maste


deploy:

  stage: deploy

  script:

    - cd ./build

    - npm i -g @cloudbase/cli

    - tcb login --apiKeyId $SecretId --apiKey $SecretKey

    - tcb hosting:deploy -e $EnvId

  only:

    - master

```


- 使用node12的镜像作为基础环境

- 整个CI流程有2个`stage`

1. 构建阶段（build）：生成构建产物，并把构建产物进行存档（artifacts操作）

2. 部署阶段（deploy）：

    1. 需要使用腾讯云提供的cli工具（@cloudbase/cli）

    2. 使用API秘钥直接登录，这里需要使用到上一步的`SecretId`和`SecretKey`环境变量

    3. 进入构建产物目录（这里为`./build`目录），执行全量部署。这里需要使用上一步的`EnvId`环境变量。


更多的`tcb`部署静态网站方法可以在：[http://docs.cloudbase.net/cli/hosting.html](http://docs.cloudbase.net/cli/hosting.html)进行查看。


## **push到远程仓库触发构建**


​

![](https://postimg.aliavv.com/picgo/20200427104701.png)



查看CI结果，显示upload成功。


​

![](https://postimg.aliavv.com/picgo/20200427104717.png)



打开[https://console.cloud.tencent.com/tcb/hosting](https://console.cloud.tencent.com/tcb/hosting)，选择设置，点击默认域名即可访问刚刚部署的web应用。


​


![](https://postimg.aliavv.com/picgo/20200427104727.png)

​

![](https://postimg.aliavv.com/picgo/20200427104733.png)


Gitlab CI 自动化部署

Hexo 是被大家广泛使用的静态博客系统， 除了在 Github Pages 部署以外，现在你有了一个新的选择，那就是使用云开发静态网站功能来部署啦！

## 系统依赖


在进行后续的内容前，请先确保你的电脑中安装了 Node.js 运行环境。如果没有安装，可以访问 nodejs.org  下载安装。


## 安装云开发 cli 工具 和 Hexo 

执行如下命令，安装云开发 cli 工具以及 Hexo


```

npm install -g @cloudbase/cli hexo-cli

```


在本地初始化一个 Hexo 项目

首先，我们创建一个 Hexo 项目，执行如下命令


```

hexo init

```



可以看到下面这样的输出


![](https://postimg.aliavv.com/picgo/20200427105723.png)


初始化完成后，进入到目录中，并启动预览


```

cd blog

hexo s

```



然后，在浏览器中打开 localhost:4000 ，可以看到 Hexo 的界面，这样就说明我们成功的完成了 Hexo 的本地初始化


![](https://postimg.aliavv.com/picgo/20200427105746.png)


## 创建一个云开发环境

完成了本地的 Hexo 建设，接下来我们来创建一个云开发环境，用来部署 Hexo 。打开腾讯云控制台，在产品中找到云开发


![](https://postimg.aliavv.com/picgo/20200427105757.png)


进入到云开发的管理控制台，点击新建环境，新建一个环境来进行部署


![](https://postimg.aliavv.com/picgo/20200427105805.png)


新建一个环境，名为 docs，并选择按量计费，开通环境


![](https://postimg.aliavv.com/picgo/20200427105819.png)


在开通环境以后， 记住你的环境 ID，这个 ID 后续我们会用到。

创建完成后，点击环境，进入到环境的管理页面。点击左侧菜单栏中的「静态网站」


![](https://postimg.aliavv.com/picgo/20200427105838.png)


并在静态网站页面开通功能


![](https://postimg.aliavv.com/picgo/20200427105846.png)


当你看到这样的界面时，就说明已经开通好了。


![](https://postimg.aliavv.com/picgo/20200427105858.png)


你现在可以通过上传文件手动上传一个文件测试，稍后，我们将会用云开发 Cli 来完成上传。


## 初始化云开发 Cli

完成了云开发环境的配置后， 我们需要初始化一下云开发 cli ，从而实现借助 cli 来上传页面（当然， 也可以通过网页端直接上传，但如果你博客的文章比较多，还是使用 Cli 上传更加方便）

在命令行输入如下代码


```

tcb login

```


会提醒你需要在网页中授权

在弹出的页面确认授权


![](https://postimg.aliavv.com/picgo/20200427105927.png)


确认授权后，你会看到控制台输出相应的命令


这样，你的云开发 cli 就初始化好了。 接下来，就可以进入到最后一个环节，上传部署 Hexo 了。

## 构建 Hexo 并上传

回到你的 Hexo 目录中，执行 Hexo g 来生成文件，Hexo 会默认将文件生成在 Public 目录下。


![](https://postimg.aliavv.com/picgo/20200427105946.png)


文件生成完成后，可以执行如下命令来进行部署（需要将 EnvID 替换为前面你记下的环境ID）


```

cd public

tcb hosting:deploy ./ -e EnvId

```



稍等片刻，部署完成，接下来就可以预览了。


![](https://postimg.aliavv.com/picgo/20200427110102.png)


点击设置，进入设置页面，可以找到默认的的域名，点击域名，就可以看到你刚刚部署的环境啦。


![](https://postimg.aliavv.com/picgo/20200427110115.png)


比如，我的部署以后是这样的

## One More Thing

只需简单的几步，你就可以轻松实现将 Hexo 部署到云开发上，无需再忍受 Github Pages 的龟速啦！还不快迁移？

不仅如此，如果你是一个自动化爱好者， 还可以试着把云开发 Cli 配置到你的 CI 环境中，实现自动部署哦～


点击以下链接快速开始用云开发静态网站托管部署你的站点：https://console.cloud.tencent.com/tcb?from=12304 


云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。


技术文档：https://www.cloudbase.net/

微信搜索：腾讯云云开发，获取项目最新进展


Hexo 博客部署

**Hugo**是一个用Go编写的静态站点生成器，它具有丰富的主题资源和较好的生成速度。


**云开发（CloudBase）**是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。


云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站。


无论是腾讯云·云开发用户，还是小程序·云开发用户，只要开通按量付费，即可享有云开发静态网站托管服务。


# 作者介绍


腾讯云云开发布道师——俞焕。任职于腾讯前端开发工程师，全栈开发者，就职腾讯游戏市场体系TGideas团队，负责开发了多款针对线下的跨端小程序应用，有丰富的云开发实践经验，同时也负责部分中台系统的开发，对Vue.js在构建Web后台系统上有较多的实践经验。


# 安装Hugo


首先，我们先安装hugo：


```javascript

brew install hugo

```


> windows的用户可以去Hugo的githubc仓库上下载安装hugo的可执行程序进行安装，具体安装流程请点击这里。


紧接着，我们用hugo来帮我们创建一个blog项目：


```javascript

hugo new site hugo-demo && cd hugo-demo

```


然后我们先创建一个测试的文章:


```javascript

hugo new posts/my-first-post.md

```


最后，直接在目录中运行：


```javascript

hugo server

```


在浏览器打开 http://localhost:1313/ 即可查看效果:


![](https://postimg.aliavv.com/picgo/20200427110358.png)


当然，我们需要部署的是编译完成的静态页面文件：


```javascript

hugo -D

```


生成好的静态页面文件会放在项目的public目录中，目录结构如下：


```javascript

├── 404.html

├── categories

│   ├── index.html

│   └── index.xml

├── dist

│   ├── css

│   │   └── app.1cb140d8ba31d5b2f1114537dd04802a.css

│   └── js

│       └── app.3fc0f988d21662902933.js

├── images

│   └── gohugo-default-sample-hero-image.jpg

├── index.html

├── index.xml

├── posts

│   ├── index.html

│   ├── index.xml

│   ├── my-first-post

│   │   └── index.html

│   └── page

│       └── 1

│           └── index.html

├── sitemap.xml

└── tags

    ├── index.html

└── index.xml

```


如果你不喜欢hugo站点的默认主题样式的话，可以自行在github上找到开源的hugo主题，并放置到你的hugo项目中，例如：


```javascript

git clone https://github.com/olOwOlo/hugo-theme-even themes/even

```


当然，这篇文章的重点不是教大家如何使用hogu，而且如何在云开发上部署静态的站点。


# 静态托管部署


我们进入腾讯云的云开发(cloudbase)控制台，选择开通一个云环境:


![](https://postimg.aliavv.com/picgo/20200427110420.png)


这里要注意选择是按量计费的模式(只有按量计费才能开通静态网站托管)。创建完成后，点击进入我们刚刚创建的云环境，进入云环境管理界面：


![](https://postimg.aliavv.com/picgo/20200427110426.png)


在云环境管理界面，在右侧的网站托管中，我们可以将刚刚项目中生成好的静态页面给上传上去。当然，手动上传显得不太友好，我们也可以借助 cloudbase cli 以命令行的方式执行上传。


首先，安装cloudbase cli:


```javascript

npm install -g @cloudbase/cli

```


执行登录命令：


```javascript

tcb login

```


![](https://postimg.aliavv.com/picgo/20200427110503.png)


在弹出的页面确认授权:


![](https://postimg.aliavv.com/picgo/20200427110511.png)


接着，在hugo-site中将public目录中的文件给部署上去：


```javascript

cloudbase hosting:deploy ./public  -e EndId

```


这里的 EnvID 替换为刚创建好的环境ID。


![](https://postimg.aliavv.com/picgo/20200427110525.png)


腾讯云云开发的静态网站托管有默认域名可供访问：


![](https://postimg.aliavv.com/picgo/20200427110535.png)


通过默认域名，我们就能访问啦:


![](https://postimg.aliavv.com/picgo/20200427110542.png)



# One More Thing


只需要简单的几步，你就能得到你喜欢的站点样式了，丰富的资源更是能满足多样化的需求，还不快试试？


​


> [云开发（CloudBase）](https://cloudbase.net/)是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。

> 技术文档：https://www.cloudbase.net/

> [点击此处](https://console.cloud.tencent.com/tcb?from=12304)快速使用云开发

> 微信搜索：腾讯云云开发，获取项目最新进展


Hugo 博客部署


**云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持**



## **Jekyll 介绍**


Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。


- 中文翻译网站： [http://jekyllcn.com/](http://jekyllcn.com/)


​


## **搭建Jekyll本地环境**


上面的翻译站点已经提供了详细的搭建介绍，通过「快速搭建指南：[http://jekyllcn.com/docs/quickstart/](http://jekyllcn.com/docs/quickstart/) 」可以快速基于Jekyll完成站点搭建。本文将基于个人博客 [https://blog.bihe0832.com/](https://blog.bihe0832.com/) 的迁移来讲下iMac搭建Jekyll本地环境及迁移。


安装Jekyll等插件可以参考官网提供的「安装文档 [http://jekyllcn.com/docs/installation/](http://jekyllcn.com/docs/installation/)」来安装。由于系统默认Ruby安装过程中容易出现各种问题，因此建议自定义安装新的Ruby。关于卸载及重装 Ruby 和 Jekyll的详细内容，也可以参考文章[iMac搭建Jekyll本地环境](https://blog.bihe0832.com/imac-jekyll.html)。以下为简单的安装事例：


```javascript

  ➜  blog git:(master) ✗ gem install jekyll # 安装 Jekyll

  Fetching mercenary-0.3.6.gem  

          

    ……

    25 gems installed

  ➜  blog git:(master) ✗ gem install github-pages  #安装 Github Pages 方便预览

  Fetching addressable-2.5.2.gem

          

    ……

    62 gems installed

```


## **创建静态站点**


这部分内容可以参考官网提供的「快速指南 [http://jekyllcn.com/docs/quickstart/](http://jekyllcn.com/docs/quickstart/)」来创建一个简单的站点并根据配置自定义你的站点风格。我选择直接从Github下载我的博客相关的内容（对应地址为：[https://github.com/bihe0832/bihe0832.github.io](https://github.com/bihe0832/bihe0832.github.io)）


对于基于Jekyll的静态站点的目录结构，可以参考官网提供的「目录结构[http://jekyllcn.com/docs/structure/](http://jekyllcn.com/docs/structure/)」，下面为个人博客目录结构的简单介绍：


```javascript

.

├── 404.html  ：404页面

├── CNAME  ：Github Pages的域名配置

├── LICENSE  ：开源协议

├── _config.yml  ：博客相关的配置信息

├── _includes  ：部分重用子页面

├── _layouts  ：页面布局

├── _posts  ：文章内容

├── _site ：Jekyll 生成静态页面目录

├── index.html  ： 博客首页页面格式

├── pages  ：一些特殊的静态页面

├── public    : 博客相关的资源，包括css、js、以及所有图片

├── search  : 博客搜索功能相关代码

├── sitemap.txt  ：站点地图

└── sitemap.xml  ：站点地图

```


#### **编译构建**


当文章写完以后，你可以先通过本地 build 验证构建没有问题。在项目根目录直接命令行运行 `jekyll build` 即可查看构建结果  


```javascript

➜  blog git:(master) ✗ jekyll build

Configuration file: /github/blog/_config.yml

            Source: /github/blog

       Destination: /github/blog/_site

 Incremental build: disabled. Enable with --incremental

      Generating...

                    done in 5.437 seconds.

 Auto-regeneration: disabled. Use --watch to enable.

➜  blog git:(master) ✗

```


如果构建没有报错，你就可以选择将构建结果 `_site` 部署到你的服务器。如果想在本地查看效果，在项目根目录直接命令行运行 `jekyll server` 即可


```js

➜  blog git:(master) ✗ jekyll server

Configuration file: /github/blog/_config.yml

            Source: /github/blog

       Destination:/github/blog/_site

 Incremental build: disabled. Enable with --incremental

      Generating...

                    done in 4.1 seconds.

 Auto-regeneration: enabled for '/github/blog'

    Server address: http://127.0.0.1:4000

  Server running... press ctrl-c to stop.

```


然后在浏览器打开 **Server address** 中显示的地址即可查看效果


# **将静态站点使用腾讯云静态网站托管**


## **创建静态网站托管服务**


1、创建腾讯云云开发环境


打开腾讯云「云开发 [https://console.cloud.tencent.com/tcb/env/index](https://console.cloud.tencent.com/tcb/env/index)」 服务的页面。如下图，点击新建环境，然后在弹框中输入你自定义的环境名称，选择付费模式，然后点击下方的「立即开通」。


![](https://postimg.aliavv.com/picgo/20200427111804.png)


之后就进入了环境的初始化阶段，初始化比较久。一般需要 1 分钟左右，当初始化结束，点击对应的 tab 就进入了 环境总览界面，可以看到具体的资源等信息。


2、初始化静态网站托管服务


点击进入「静态网站托管 [https://console.cloud.tencent.com/tcb/hosting](https://console.cloud.tencent.com/tcb/hosting)」 服务的页面。如下图，选择之前创建的开发环境，然后点击「开始使用」初始化环境。静态网站服初始化一般需要约 3 分钟


![](https://postimg.aliavv.com/picgo/20200427111814.png)


## **将静态页面部署到托管服务**


你阔以直接选择将构建好的静态页面上传到托管服务，但是考虑到博客的更新频率，还是选择使用官方提供的工具来上传。首先使用npm 下载并安装官方上传工具`cloudbase`


```javascript

➜  _posts git:(master) ✗ npm install -g @cloudbase/cli

​

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

/usr/local/bin/tcb -> /usr/local/lib/node_modules/@cloudbase/cli/bin/tcb.js

/usr/local/bin/cloudbase -> /usr/local/lib/node_modules/@cloudbase/cli/bin/cloudbase.js

npm WARN ws@7.2.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.

npm WARN ws@7.2.3 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.

​

+ @cloudbase/cli@0.6.6

added 383 packages from 325 contributors in 26.045s

```


然后使用`cloudbase`命令获取CLI授权，输入命令，然后再弹出的页面中点击「确认授权」


```js

➜  blog git:(master) ✗ tcb login

✔ 已打开云开发 CLI 授权页面，请在云开发 CLI 授权页面同意授权

✖ 未知错误：请求超时，请检查你的网络，如果终端无法直接访问公网，请设置终端 HTTP 请求代理！

请检查你的网络，尝试重新运行 cloudbase login 命令！

```


如果遇到上面的错误，一般是因为网络限制，需要添加 http 代理，可以参照文章 「iMac（OS X）日常开发中各种代理设置方法汇总（shell、Android Studio、gem、npm）https://blog.bihe0832.com/proxy.html」设置 shell 代理即可。设置代理后重试： 


```javascript

➜  _posts git:(master) ✗ tcb login

✔ 已打开云开发 CLI 授权页面，请在云开发 CLI 授权页面同意授权

✔ 登录成功！

? 是否同意 Cloudbase CLI 收集您的使用数据以改进产品？ Yes

可使用下面命令继续操作：

​

– 创建免费环境

​

  $ cloudbase env:create envName

​

– 初始化云开发项目

​

  $ cloudbase init

​

– 部署云函数

​

  $ cloudbase functions:deploy

​

– 查看命令使用介绍

​

  $ cloudbase -h

​

Tips：可以使用简写命令 tcb 代替 cloudbase

```


使用 hosting 命令 将本地已经编译的静态文件部署到托管服务（例如部署我的博客的 `_site` ），命令行中-e 后面的环境ID就是首页生成的环境ID，一般腾讯云会在我们的自定义名称后面加一个后缀。由于博客的内容比较大、加上网络代理，发现有时候会失败，重试即可。


```js

➜  blog git:(master) ✗ jekyll build

Configuration file: /Volumes/Document/Documents/github/blog/_config.yml

            Source: /Volumes/Document/Documents/github/blog

       Destination: /Volumes/Document/Documents/github/blog/_site

 Incremental build: disabled. Enable with --incremental

      Generating...

                    done in 4.504 seconds.

 Auto-regeneration: disabled. Use --watch to enable.

➜  _site git:(master) ✗ cd ..

➜  blog git:(master) ✗ cd _site

➜  _site git:(master) ✗ tcb hosting:deploy ./ -e blog-qcloud-new-131e7b

FetchError: request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639

    at ClientRequest.<anonymous> (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/node-fetch/lib/index.js:1455:11)

    at ClientRequest.emit (events.js:205:15)

    at ClientRequest.EventEmitter.emit (domain.js:471:20)

    at onerror (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:101:9)

    at callbackError (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:123:5)

    at processTicksAndRejections (internal/process/task_queues.js:89:5)

✖ request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639

➜  _site git:(master) ✗ tcb hosting:deploy ./ -e blog-qcloud-new-131e7b

文件传输中 [==================================================] 100% 0.0s

✔ 文件共计 842 个

✔ 文件上传成功 842 个

✖ 文件上传失败 0 个

```


#### **管理静态页面及修改设置**


上传结束以后，在静态页面托管的「文件管理」页面可以对我们上传的内容进行调整，在「设置」页面可以添加域名、错误页面等信息，同时也给出了腾讯云提供的默认域名。如果你有自己的域名，你也可以添加自己的域名解析，例如下面我修改为使用我自己的域名，并设置了自定义的索引页和404页面：


![](https://postimg.aliavv.com/picgo/20200427111839.png)


## **访问静态页面**


在浏览器输入讯云提供的默认域名 [https://blog-qcloud-new-131e7b.tcloudbaseapp.com/index.html](https://blog-qcloud-new-131e7b.tcloudbaseapp.com/index.html)， 或者使用自己的域名[http://qcloud.bihe0832.com/index.html](http://qcloud.bihe0832.com/index.html) 均可打开部署好的静态服务，由于默认资源免费的，腾讯云对下载速度做了限速，因此打开速度会很慢。


**特别说明：**由于默认资源腾讯云对下载速度做了限速，所以我对于我的站点做了特殊配置：


- 默认打开 [http://qcloud.bihe0832.com/jump.html](http://qcloud.bihe0832.com/jump.html)时 还是跳转到我的博客域名及服务器 [http://blog.bihe0832.com](http://blog.bihe0832.com/)

- 完整路径打开 [http://qcloud.bihe0832.com/index.html](http://qcloud.bihe0832.com/index.html) 时使用腾讯云托管的服务


​


Jekyll 博客部署



前几天利用博客尝试了下腾讯云新出的静态网站托管，写了一个总结，收到反馈问问能不能再写一个Octopress的，结果今天就又收到域名备案站的提醒，要完善和整改一些信息，那就干脆尝试用 Octopress 从零搭建一个简单的站点。


## 使用 Octopress 搭建静态站点


#### Octopress 介绍


Octopress is a blogging framework for hackers。


- 官方网站： [http://octopress.org/](http://octopress.org/)


#### 搭建 Octopress 本地环境


参考官网的指引 [http://octopress.org/docs/setup/](http://octopress.org/docs/setup/) 搭建 Octopress 本地环境 


  ➜  github  git clone https://github.com/imathis/octopress.git www.bihe0832.com

    Cloning into 'www.bihe0832.com'...

    remote: Enumerating objects: 1, done.

    remote: Counting objects: 100% (1/1), done.

    remote: Total 10801 (delta 0), reused 0 (delta 0), pack-reused 10800

    Receiving objects: 100% (10801/10801), 2.63 MiB | 1.08 MiB/s, done.

    Resolving deltas: 100% (5578/5578), done.

  ➜  github  cd www.bihe0832.com

  ➜  www.bihe0832.com git:(master) gem install bundler

    Fetching bundler-2.1.4.gem

    bundler's executable "bundle" conflicts with /usr/local/lib/ruby/gems/2.6.0/bin/bundle

    Overwrite the executable? [yN]  y

    bundler's executable "bundler" conflicts with /usr/local/lib/ruby/gems/2.6.0/bin/bundler

    Overwrite the executable? [yN]  y

    Successfully installed bundler-2.1.4

    Parsing documentation for bundler-2.1.4

    Installing ri documentation for bundler-2.1.4

    Done installing documentation for bundler after 2 seconds

    1 gem installed

  ➜  www.bihe0832.com git:(master) rbenv rehash

    zsh: command not found: rbenv

  ➜  www.bihe0832.com git:(master) brew install rbenv

    Updating Homebrew...

    ==> Auto-updated Homebrew!

    Updated 1 tap (homebrew/core).

    ==> Updated Formulae

    stellar-core

  

    ...........

    

    ==> ruby-build

    ruby-build installs a non-Homebrew OpenSSL for each Ruby version installed and these are never upgraded.

    

  ➜  www.bihe0832.com git:(master) rbenv rehash ➜  www.bihe0832.com git:(master) bundle install

    Fetching gem metadata from https://rubygems.org/...........

    Fetching gem metadata from https://rubygems.org/.

    Resolving dependencies...

    

    ...........

  

    Bundle complete! 13 Gemfile dependencies, 52 gems now installed.

    Use `bundle info [gemname]` to see where a bundled gem is installed.

    

  ➜  www.bihe0832.com git:(master) bundle exec

    bundler: exec needs a command to run

  ➜  www.bihe0832.com git:(master) bundle exec rake install

    ## Copying classic theme into ./source and ./sass

    mkdir -p source

    cp -r .themes/classic/source/. source

    mkdir -p sass

    cp -r .themes/classic/sass/. sass

    mkdir -p source/_posts

    mkdir -p public



至此我们就完成了 Octopress 环境的搭建，和站点的初始化，下一步就是修改配置，添加内容


#### 创建静态站点、修改配置、添加内容


这部分内容可以参考官网提供的「Configuring Octopress [http://octopress.org/docs/configuring/](http://octopress.org/docs/configuring/)」来根据配置自定义你的站点风格。我重点修改了 `_config.yml` 添加一些自定义配置。


在搭建好静态站点以后，就可以在`source/_posts`添加你的文章了，我选择了直接迁移过来两篇自己的文章。


#### 编译构建


在项目根目录直接命令行运行 `rake generate ` 即可查看构建结果



  ➜  www.bihe0832.com git:(master) ✗ rake generate

    rake aborted!

    Gem::LoadError: You have already activated rake 12.3.2, but your Gemfile requires rake 10.5.0. Prepending `bundle exec` to your command may solve this.

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/runtime.rb:312:in `check_for_activated_spec!'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/runtime.rb:31:in `block in setup'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/spec_set.rb:147:in `each'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/spec_set.rb:147:in `each'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/runtime.rb:26:in `map'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/runtime.rb:26:in `setup'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler.rb:149:in `setup'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/setup.rb:10:in `block in <top (required)>'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/ui/shell.rb:136:in `with_level'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/ui/shell.rb:88:in `silence'

    /usr/local/lib/ruby/gems/2.6.0/gems/bundler-2.1.4/lib/bundler/setup.rb:10:in `<top (required)>'

    /github/www.bihe0832.com/Rakefile:2:in `<top (required)>'

    (See full trace by running task with --trace)

  ➜  www.bihe0832.com git:(master) ✗ bundle exec rake generate

    ## Generating Site with Jekyll

    write source/stylesheets/screen.css

    Configuration file: /github/www.bihe0832.com/_config.yml

                Source: source

           Destination: public

          Generating...

                        done.

     Auto-regeneration: disabled. Use --watch to enable.


如果构建没有报错，你就可以选择将构建结果 `public` 部署到你的服务器。如果想在本地查看效果，在项目根目录直接命令行运行 ` rake preview ` 即可


  ➜  www.bihe0832.com git:(master) ✗ bundle exec rake preview

    Starting to watch source with Jekyll and Compass. Starting Rack on port 4000

    [2020-04-13 16:30:18] INFO  WEBrick 1.4.2

    [2020-04-13 16:30:18] INFO  ruby 2.6.2 (2019-03-13) [x86_64-darwin18]

    [2020-04-13 16:30:18] INFO  WEBrick::HTTPServer#start: pid=75677 port=4000

    >>> Compass is watching for changes. Press Ctrl-C to Stop.

    Configuration file: /github/www.bihe0832.com/_config.yml

                Source: source

           Destination: public

          Generating...

                        done.

     Auto-regeneration: enabled for 'source'

        write public/stylesheets/screen.css

    ::1 - - [13/Apr/2020:16:30:22 +0800] "GET / HTTP/1.1" 200 16703 0.0151


然后在浏览器打开 [http://localhost:4000/](http://localhost:4000/) 即可查看效果



## 将静态站点使用腾讯云静态网站托管


#### 创建静态网站托管服务


1. 创建腾讯云云开发环境

  

  打开腾讯云「云开发 [https://console.cloud.tencent.com/tcb/env/index](https://console.cloud.tencent.com/tcb/env/index)」 服务的页面。如下图，点击新建环境，然后在弹框中输入你自定义的环境名称，选择付费模式，然后点击下方的「立即开通」。


  ![](https://postimg.aliavv.com/picgo/20200427112159.png)


  之后就进入了环境的初始化阶段，初始化比较久。一般需要 1 分钟左右，当初始化结束，点击对应的 tab 就进入了 环境总览界面，可以看到具体的资源等信息。


2. 初始化静态网站托管服务


  点击进入「静态网站托管 [https://console.cloud.tencent.com/tcb/hosting](https://console.cloud.tencent.com/tcb/hosting)」 服务的页面。如下图，选择之前创建的开发环境，然后点击「开始使用」初始化环境。静态网站服初始化一般需要约 3 分钟




#### 将静态页面部署到托管服务


你阔以直接选择将构建好的静态页面上传到托管服务，但是考虑到博客的更新频率，还是选择使用官方提供的工具来上传。首先使用npm 下载并安装官方上传工具`cloudbase`


  ➜  _posts git:(master) ✗ npm install -g @cloudbase/cli

  

  npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

  /usr/local/bin/tcb -> /usr/local/lib/node_modules/@cloudbase/cli/bin/tcb.js

  /usr/local/bin/cloudbase -> /usr/local/lib/node_modules/@cloudbase/cli/bin/cloudbase.js

  npm WARN ws@7.2.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.

  npm WARN ws@7.2.3 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.

  

  + @cloudbase/cli@0.6.6

  added 383 packages from 325 contributors in 26.045s


然后使用`cloudbase`命令获取CLI授权，输入命令，然后再弹出的页面中点击「确认授权」

  

  ➜  blog git:(master) ✗ tcb login

  ✔ 已打开云开发 CLI 授权页面，请在云开发 CLI 授权页面同意授权

  ✖ 未知错误：请求超时，请检查你的网络，如果终端无法直接访问公网，请设置终端 HTTP 请求代理！

  请检查你的网络，尝试重新运行 cloudbase login 命令！


如果遇到上面的错误，一般是因为网络限制，需要添加 http 代理，可以参照文章 「iMac（OS X）日常开发中各种代理设置方法汇总（shell、Android Studio、gem、npm） [https://blog.bihe0832.com/proxy.html](https://blog.bihe0832.com/proxy.html)」设置 shell 代理即可。设置代理后重试：

  

  ➜  _posts git:(master) ✗ tcb login

  ✔ 已打开云开发 CLI 授权页面，请在云开发 CLI 授权页面同意授权

  ✔ 登录成功！

  ? 是否同意 Cloudbase CLI 收集您的使用数据以改进产品？ Yes

  可使用下面命令继续操作：

  

  – 创建免费环境

  

    $ cloudbase env:create envName

  

  – 初始化云开发项目

  

    $ cloudbase init

  

  – 部署云函数

  

    $ cloudbase functions:deploy

  

  – 查看命令使用介绍

  

    $ cloudbase -h

  

  Tips：可以使用简写命令 tcb 代替 cloudbase


使用 hosting 命令 将本地已经编译的静态文件部署到托管服务（例如部署我的博客的 `public` ），命令行中-e 后面的环境ID就是首页生成的环境ID，一般腾讯云会在我们的自定义名称后面加一个后缀。由于博客的内容比较大、加上网络代理，发现有时候会失败，重试即可。

  

  ➜  www.bihe0832.com git:(master) ✗ bundle exec rake generate

    ## Generating Site with Jekyll

        write source/stylesheets/screen.css

    Configuration file: /github/www.bihe0832.com/_config.yml

                Source: source

           Destination: public

          Generating...

                        done.

     Auto-regeneration: disabled. Use --watch to enable.

  ➜  www.bihe0832.com git:(master) ✗ tcb hosting:deploy ./public/ -e blog-www-173dc4

    FetchError: request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639

        at ClientRequest.<anonymous> (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/node-fetch/lib/index.js:1455:11)

        at ClientRequest.emit (events.js:205:15)

        at ClientRequest.EventEmitter.emit (domain.js:471:20)

        at onerror (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:101:9)

        at callbackError (/usr/local/lib/node_modules/@cloudbase/cli/node_modules/agent-base/index.js:123:5)

        at processTicksAndRejections (internal/process/task_queues.js:89:5)

    ✖ request to https://tcb-admin.tencentcloudapi.com/admin failed, reason: connect ECONNRESET 127.0.0.1:12639

    ➜  www.bihe0832.com git:(master) ✗ tcb hosting:deploy ./public/ -e blog-www-173dc4

    文件传输中 [==================================================] 100% 0.0s

    ✔ 文件共计 65 个

    ✔ 文件上传成功 65 个

    ✖ 文件上传失败 0 个


如果调试通了，也阔以一个命令直接完成编译到部署：


  ➜  www.bihe0832.com git:(master) ✗ bundle exec rake generate && tcb login && tcb hosting:deploy ./public/ -e blog-www-173dc4

    Configuration file: /github/www.bihe0832.com/_config.yml

                Source: source

           Destination: public

          Generating...

                        done.

     Auto-regeneration: disabled. Use --watch to enable.

    ✔ 您已登录，无需再次登录！

    文件传输中 [==================================================] 100% 0.0s

    ✔ 文件共计 65 个

    ✔ 文件上传成功 65 个

    ✖ 文件上传失败 0 个


#### 管理静态页面及修改设置


上传结束以后，在静态页面托管的「文件管理」页面可以对我们上传的内容进行调整，在「设置」页面可以添加域名、错误页面等信息，同时也给出了腾讯云提供的默认域名。如果你有自己的域名，你也可以添加自己的域名解析，例如下面我修改为使用我自己的域名，并设置了自定义的索引页和404页面：

  

![](https://postimg.aliavv.com/picgo/20200427112212.png)


#### 访问静态页面


在浏览器输入讯云提供的默认域名 [https://blog-www-173dc4.tcloudbaseapp.com/](https://blog-www-173dc4.tcloudbaseapp.com/)即可打开部署好的静态服务，由于默认资源免费的，腾讯云对下载速度做了限速，因此打开速度会很慢。


Octopress 博客部署




VuePress 是社区广受好评的文档插件，不少的项目都开始使用 VuePress 来构建团队的文档、产品的官网。现在，你也可以在云开发上托管你的 VuePress 文档啦！不需要再忍受中美网络之间的波动导致的网络性能差和速度慢的问题啦！Let's Go


云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。

云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站

无论是腾讯云·云开发用户，还是小程序·云开发用户，只要开通按量付费，即可享有云开发静态网站托管服务。


## 系统依赖

在进行后续的内容前，请先确保你的电脑中安装了 Node.js 运行环境。如果没有安装，可以访问 nodejs.org  下载安装。


## 安装云开发 cli 工具 和 VuePresss

执行如下命令，安装云开发 cli 工具以及 VuePress


    npm i -g @cloudbase/cli vuepress



## 在本地初始化一个 VuePress 项目

首先，在本地创建一个目录，这里以 tcb 为例


    mkdir tcb && cd tcb


进入到 tcb 目录后，创建一个默认的 hello world 文件


    echo "# Hello TCB & Vuepress" > README.md


![](https://postimg.aliavv.com/picgo/20200427114944.png)



然后，执行命令，启动，并查看效果。


    vuepress dev


等待其编译完成，打开浏览器，访问 localhost:8080


![](https://postimg.aliavv.com/picgo/20200427115013.png)


可以看到刚刚创建的文档产生的页面


![](https://postimg.aliavv.com/picgo/20200427115033.png)


这样，就说明我们完成项目的初始化了。


## 创建一个云开发环境


完成了本地的 Vuepress 建设，接下来我们来创建一个云开发环境，用来部署 VuePresss 。打开腾讯云控制台，在产品中找到云开发


![](https://postimg.aliavv.com/picgo/20200427115149.png)


进入到云开发的管理控制台，点击新建环境，新建一个环境来进行部署



![](https://postimg.aliavv.com/picgo/20200427115251.png)



新建一个环境，名为 docs，并选择按量计费，开通环境


![](https://postimg.aliavv.com/picgo/20200427115307.png)


在开通环境以后， 记住你的环境 ID，这个 ID 后续我们会用到。


创建完成后，点击环境，进入到环境的管理页面。点击左侧菜单栏中的「静态网站」


![](https://postimg.aliavv.com/picgo/20200427115337.png)


并在静态网站页面开通功能


![](https://postimg.aliavv.com/picgo/20200427115357.png)


当你看到这样的界面时，就说明已经开通好了。


![](https://postimg.aliavv.com/picgo/20200427115424.png)



你现在可以通过上传文件手动上传一个文件测试，稍后，我们将会用云开发 Cli 来完成上传。


## 初始化云开发 Cli

完成了云开发环境的配置后， 我们需要初始化一下云开发 cli ，从而实现借助 cli 来上传页面（当然， 也可以通过网页端直接上传，但 VuePress 如果文档页面较多，还是使用 Cli 上传更简单）


在命令行输入如下代码


```

tcb login

```


会提醒你需要在网页中授权


![](https://postimg.aliavv.com/picgo/20200427115535.png)



在弹出的页面确认授权


![](https://postimg.aliavv.com/picgo/20200427115548.png)



确认授权后，你会看到控制台输出相应的命令

 

这样，你的云开发 cli 就初始化好了。 接下来，就可以进入到最后一个环节，上传部署 VuePress 了。


## 部署 VuePress

接下来，我们来构建，并部署 VuePress。

回到我们刚刚创建的 VuePress 的目录，执行命令构建静态页面


    vuepress build


构建完成后，会提醒你，生成的静态文件在 .vuepress/dist


![](https://postimg.aliavv.com/picgo/20200427115807.png)


    cd .vuepress/dist


然后执行命令上传文件，记得将这里的 EnvID 替换为你自己的环境的环境 ID。


    tcb hosting:deploy ./ -e EnvID


稍等片刻，文件就上传好了


![](https://postimg.aliavv.com/picgo/20200427120504.png)


此时，你在云开发管理控制台也可以看到这些文件，说明成功上传。


![](https://postimg.aliavv.com/picgo/20200427120519.png)



## 访问


点击设置，进入设置页面，可以找到默认的的域名，点击域名，就可以看到你刚刚部署的环境啦。


![](https://postimg.aliavv.com/picgo/20200427120537.png)



比如，我的部署以后是这样的


![](https://postimg.aliavv.com/picgo/20200427120559.png)


## One More Thing

只需简单的几步，你就可以轻松实现将 VuePress 部署到云开发上，无需再忍受 Github Pages 的龟速啦！还不快迁移？


不仅如此，如果你是一个自动化爱好者， 还可以试着把云开发 Cli 配置到你的 CI 环境中，实现自动部署哦～


VuePress 文档部署

**简单介绍一下：**

[云开发](https://console.cloud.tencent.com/tcb)：云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。

云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站

[docsify](https://docsify.js.org/)：docsify动态生成文档网站。与GitBook不同，它不生成静态html文件。相反，它聪明地加载和分析您的Markdown文件，并将它们显示为一个网站。要开始使用它，只需创建一个index.html和在静态网站托管页面上部署它.

接下来我们分三步进行：搭建环境→创建项目→部署

**搭建环境**

1.安装Node.js 和 npm
通过 node -v 命令查看本机是否安装，如果没有安装，参考[node.js安装指南 ](https://nodejs.org/zh-cn/download/)根据电脑系统环境进行安装

2.安装cloudbase/cli
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/644a84f6-4c83-4f56-b92d-523062f0795a.png)

3.安装docsify-cli
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/bcbaa0c4-5173-42f0-8bac-832da3f1e76f.png)

4.测试安装是否成功
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/8f984af8-ffd3-4378-b51c-dc7677237377.png)

如果看到输出版本号，说明已经安装成功。

**创建项目**

初始化这个项目
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/f1086998-467f-4eb6-8d70-124f9213b5b7.png)

初始化完成后，您可以修改/docs/README.md文件内容，然后在本地运行
![](https://ask.qcloudimg.com/http-save/4744530/5yh4jmxtt3.png)

运行本地服务器
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/f7e751ee-4b36-4756-b6e5-89aeffb9c7bc.png)

运行成功后，打开浏览器，访问 localhost:3000
![](https://ask.qcloudimg.com/http-save/4744530/dcemg4a3vl.png)

**部署**

创建云开发环境

访问[腾讯云云开发控制台](https://console.cloud.tencent.com/tcb)，新建【按量计费云开发环境】，记住云开发环境ID，我们需要用到云开发网站托管服务，目前只有按量计费的环境才支持静态托管。
![](https://ask.qcloudimg.com/http-save/4744530/cv9czwe7o6.png)

进入[网站托管控制页](https://console.cloud.tencent.com/tcb/hosting)，开通静态网站托管服务
![](https://ask.qcloudimg.com/http-save/4744530/4zjoq9r78p.png)

当你看到这样的界面时，就说明已经开通好了。
![](https://ask.qcloudimg.com/developer-images/article/4744530/s323at24zr.png)

登入
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/dfe0b051-0d83-490f-b1e9-d4a7e4b7d0ae.png)

这个时候会提醒你需要在网页中授权，在弹出的页面确认授权
![](https://ask.qcloudimg.com/developer-images/article/4744530/5u9479pj7j.png)

确认授权后，你会看到控制台输出相应的命令

执行命令上传文件，记得将这里的 EnvID 替换为你自己的环境的环境 ID
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/fb45c6ad-798c-4483-9475-82c009980ae7.png)

稍等片刻，文件就上传好了
![](https://ask.qcloudimg.com/developer-images/article/4744530/kt6b15kb4r.png)

查看静态网站域名和状态
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/f49e2ccc-c808-48c6-bf43-7a3244d7d323.png)

这个时候你会看到静态网站域名，打开浏览器访问就可以了
![](https://ask.qcloudimg.com/developer-images/article/4744530/t87kmwkxvw.png)

这个时候你可以访问[云开发控制台](https://console.cloud.tencent.com/tcb/hosting)，查看上传的文件
![](https://ask.qcloudimg.com/developer-images/article/4744530/dol8plx537.png)

点击设置，就可以看到刚才控制台输出的默认域名，当然你也可以添加自己的域名 

**小结**

部署过程中用到的环境ID envId ，可以在 [云开发控制台](https://console.cloud.tencent.com/tcb) 查看，[docsify](https://docsify.js.org/)的基本使用可以到其官网查看


**云开发静态托管**是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持

GitBook 是一个开源的电子书生成工具，可以很方便的帮助你生成简洁大方的电子书，当然，云开发现在也已经支持 GitBook 的部署啦～现在你可以在云开发上部署你的电子书啦～

## 系统依赖

在进行后续的内容前，请先确保你的电脑中安装了 Node.js 运行环境。如果没有安装，可以访问 nodejs.org  下载安装。

## 安装云开发 cli 工具 和 Gitbook

执行如下命令，安装云开发 cli 工具以及 Gitbook
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/a7a0c679-17e9-4ba2-bf70-caaa46d6b01f.png)

## 本地初始化一个 gitbook 电子书项目

首先，我们创建一个 gitbook 电子书项目,执行如下命令来创建一个电子书
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/59c210d2-d225-4a12-8003-b2ae0572097a.png)

这样，我们就在 book 目录中创建了一个新的电子书。
![](https://postimg.aliavv.com/picgo/20200427113948.png)

可以执行命令预览一下他
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/47579b91-cecd-470e-afbb-fc425614a69e.png)

![](https://postimg.aliavv.com/picgo/20200427113957.png)

启动成功后， 打开浏览器的 localhost:4000 ，可以看到我们刚刚新建的电子书
![](https://postimg.aliavv.com/picgo/20200427114008.png)

这样，就说明我们完成了项目的初始化操作。

## 创建一个云开发环境

完成了本地的 Gitbook 创建，接下来我们来创建一个云开发环境，用来部署 Gitbook 。打开腾讯云控制台，在产品中找到云开发
![](https://postimg.aliavv.com/picgo/20200427114017.png)

进入到云开发的管理控制台，点击新建环境，新建一个环境来进行部署
![](https://postimg.aliavv.com/picgo/20200427114023.png)

新建一个环境，名为 docs，并选择按量计费，开通环境
![](https://postimg.aliavv.com/picgo/20200427114028.png)

在开通环境以后， 记住你的环境 ID，这个 ID 后续我们会用到。

创建完成后，点击环境，进入到环境的管理页面。点击左侧菜单栏中的「静态网站」
![](https://postimg.aliavv.com/picgo/20200427114035.png)

并在静态网站页面开通功能
![](https://postimg.aliavv.com/picgo/20200427114042.png)

当你看到这样的界面时，就说明已经开通好了。
![](https://postimg.aliavv.com/picgo/20200427114046.png)

你现在可以通过上传文件手动上传一个文件测试，稍后，我们将会用云开发 Cli 来完成上传。

## 初始化云开发 Cli

完成了云开发环境的配置后， 我们需要初始化一下云开发 cli ，从而实现借助 cli 来上传页面（当然， 也可以通过网页端直接上传，但 Gitbook 如果文档页面较多，还是使用 Cli 上传更简单）

在命令行输入如下代码
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/48ab96a8-f24e-4e5f-87f8-036d751176ce.png)

会提醒你需要在网页中授权
![](https://postimg.aliavv.com/picgo/20200427114054.png)

在弹出的页面确认授权
![](https://postimg.aliavv.com/picgo/20200427114059.png)

确认授权后，你会看到控制台输出相应的命令

## 部署

这样，你的云开发 cli 就初始化好了。 接下来，就可以进入到最后一个环节，上传部署 Gitbook 了。

## 部署 Gitbook

接下来，我们来构建 Gitbook 的 HTML ，来进行部署，Gitbook 默认会将 HTML 生成在 _book 目录。我们可以将这个目录下的文件进行上传和部署,执行如下命令（记得将 envId 替换为你自己的环境ID）
![image.png](https://6f66-offcial-site-cms-15fc4b-1258016615.tcb.qcloud.la/tcb-cms/2020-08-03/ccda59a2-a1a9-430d-a6ec-4ee6f34057b3.png)

![](https://postimg.aliavv.com/picgo/20200427114109.png)

## 访问

点击设置，进入设置页面，可以找到默认的的域名，点击域名，就可以看到你刚刚部署的环境啦。
![](https://postimg.aliavv.com/picgo/20200427114114.png)

比如，我的部署以后是这样的
![](https://postimg.aliavv.com/picgo/20200427114119.png)

这样，就说明你的部署完成啦～

## One More Thing

只需简单的几步，你就可以轻松实现将 Gitbook 部署到云开发上，无需再忍受 Github Pages 的龟速啦！还不快迁移？

不仅如此，如果你是一个自动化爱好者， 还可以试着把云开发 Cli 配置到你的 CI 环境中，实现自动部署哦～


热门搜索

云开发网站托管指南