Cloud development static site deployment

Cloud development provides developers with the ability to host static web pages, and we can put static resources (HTML, CSS, JavaScript, fonts, etc.) into the object storage COS for cloud development, so that we can quickly complete the deployment of web applications without the need for domain names and filings (cloud development provides secondary domain names, but it is recommended to bind documented domain names). S tatic web hosting, support for HTTP and HTTPS access, static web pages hosted on cloud development, are cached on CDN servers, and we can also deploy files to static hosting using the Cloudbase Cli tool.

First, the opening of static website hosting

1, cloud development environment to open pay-per-view

Static web hosting services can only be launched in a pay-per-view cloud development environment, and prepaid (i.e., monthly) environments are not available. Pay-per-view for environments created by small program cloud development, we can go to WeChat developer tools in the cloud development console settings to open, open pay-per-view can no longer cut back to prepaid, but pay-per-view is more recommended.

Pay-as-you-go In addition to having the same free amount as prepaid, pay-as-you-go has four benefits:

• The number of database connections 1000, tens of thousands of people at the same time online is no problem;

• You can open static website hosting service, use it to build blogs, no domain name to build small program resources management background, and other complex websites can be developed;

• Pay-as-you-go, pay more granular, more cost-effective than prepaid, I went to calculate the price, or very reasonable;

• Support resource pack purchase cloud development resources, CDN, cloud functions, databases, static websites are supported by resource pack purchase, very conscientious, very cost-effective.

2, the opening of static website hosting

When we switch the environment developed by the small program cloud to pay-as-you-go, we can log into the cloud development console of Tencent Cloud Web page and click on the corresponding environment name to open a static website hosting service. Once opened, you can see file management and settings two tabs, and when a static site hosting service is available, a default static site domain name is provided:

https://你的环境id.tcloudbaseapp.com

This domain name supports HTTP and HTTPS access, but static hosting has a default speed limit: 10K, which can be used in the administrative background for minority access, and if used for open websites, it is recommended to bind domain names that have already been filed. W hen you no longer need a static hosting service, it's a good idea to log off the static site. O therwise, static sites continue to in charge for storage. We can view the consumption of static site service traffic and storage resources on the statistical analysis page of the web console.

3, console management static hosting

Cloud development static managed services can use both the console for file management and CLI tools for file management. In the web cloud development console, you can directly manage static websites, such as file management tabs, you can upload, delete files, create folders and bulk upload folders and other operations.

For example, if we upload a picture like .png,

In the settings, you can do static site domain name, index document management. A n index document, also known as the home page of a static Web site, is a page returned when a user makes a request to the root or any subdirect of the Web site, which is usually named index .html. The error document refers to the page returned after an error in accessing a static Web site.

When you add a domain name, you will be automatically assigned a .cdn.dnsv1.com suffix of the CNAME domain name, CNAME domain name can not be directly accessed, the domain name service provider needs to complete the CNAME configuration, the configuration takes effect, the hosting service can take effect on the custom domain name.

Second, CLI tools to manage static websites

With static hosting services and logins to the CLoudbase CLI tool, we can use the Cloudbase CLI tool to manage files in static sites.

1, view static website information

We can enter the following commands at the terminal to show the status of static websites, access domain names, xly-xrlur replaced with the id of your cloud development environment

cloudbase hosting:detail -e xly-xrlur

To see what files are in the static site storage space, for example, we want to see xly-xrlur

cloudbase hosting:list -e xly-xrlur

2, upload files/folders to the specified directory

We can use the following command to upload the local computer (a file or folder at the project root) to the specified path in the storage space of a static Web site, and if you do not specify cloudPath, all files in the project root are uploaded to the root of the storage space.

cloudbase hosting:deploy localPath cloudPath -e envId

For example, we want to upload the contents of the download folder under the root of the project to the public folder of the static site storage space:

cloudbase hosting:deploy ./download public -e xly-xrlur

Or deploy the index/.js file under the static directory to the static/index .js

cloudbase hosting:deploy ./static/index.js static/index.js -e xly-xrlur

3, delete the file

We can use the following command to delete files or folders in the storage space of a static Web site, as long as we have mastered the path of the network storage space is easy to grasp:

cloudbase hosting:delete cloudPath -e envId

Third, static blog generator

Using a static blog generator is a popular way to build a blog, and once a static web page of a blog is generated, it can also be deployed to a static site hosting for cloud development. T here are many static blog generators, such as Gatsby, Jekyll, Hugo, Hexo, VuePress, and so on, in hexo's case. Hexo is a fast, concise, and efficient blog framework that allows you to parse articles using Markdown (or other rendering engines), and has a wide selection of blog topics to choose from.

1, Hexo static blog installation and generation

First we enter the following command at the terminal to perform the global installation of hexo,

#全局安装hexo
npm install hexo-cli -g
#检测hexo是否安装成功以及常用命令
hexo --version
hexo --help

After the installation is complete, use the cd command in the terminal to go to the root of the static site hosting project (as described earlier) and then generate a blog

#生成博客项目，这里的tcbblog为博客名称，你可以任意修改
hexo init tcbblog
#命令行工具进入博客项目
cd tcbblog
#安装博客项目的依赖
npm install

After executing the above commands, the hexo blog is built, so how can we see the effect, after executing the following command, http://localhost:4000 the local computer to see the effect of this static blog:

hexo server
#如果你想中断服务可以连续按两次Ctrl+C

We can also modify blog topics, such as Fluid, a Material Design-style theme based on Hexo, to view the documentation.

How to add article content to Hexo-generated blogs or how to make some custom configurations can be seen in Hexo's official technical documentation.

2. Deploy static blogs to static storage

To deploy static blogs to static storage, you first need to execute the following commands at the terminal to generate static site files (as are other static blog generators, which are at the heart of static site hosting), and site files are generated in the public folder:

#在终端执行这个命令需要注意cd进入tcbblog也就是博客项目的根目录才行
hexo generate

The next thing we need to do is upload the site files in the public folder to the root or secondary subdirecttors stored by the static site.

It is important to note here that the hexo command is executed at the terminal at the root of the blog project, which is tcbblog, and to execute the cloudbase command, we need to go to the root of cd .. Fall back to the parent directory

Combined with the above knowledge is not difficult, we can let the terminal into the root of the cloud development project after the following command, that is, the tcbblog folder in the secondary directory public all the files are uploaded to the static storage blog folder:

cloudbase hosting:deploy ./tcbblog/public blog -e xly-xrlur

Then we can 你的域名或静态存储域名/blog static storage domain name/blog.

Static site hosting and cloud development itself is not really very directly related, we can also host other static web sites such as Github Pages and in PHP, Java, Python and other developed web pages to use cloud development, that is to say, cloud development SDK does not rely on static site hosting services, basically as long as the web page can use the Web cloud development SDK. Static managed services are only a service provided by cloud development in order to implement server-free, the use of Web-side SDK in static managed web pages can also make static web pages dynamic, with the ability to operate cloud storage, cloud databases, etc.