front end developer personal website

2022.03.23

author: bookerzhao,Tencent CSIG webFront-end development engineer

Github Provides open source projects with static page display Pages Serve,Many developers host their own static websites and blogs on it,Many cases and documentation pages of open source projects also use this approach.。However, due to Pages of CDN Most of the nodes are abroad,The access speed in China is not very ideal,Many developers hope toImprove website access speed and stability in China,Today we will introduce how to cooperate Github Action continuous integration services and cloud development Github Action expand,Automatic deployment to faster-access cloud development static hosting services。

Cloud development static hosting is a static website hosting capability provided by cloud development,static resources(HTML、CSS、JavaScript、font etc.)distribution by Tencent Cloud Object Storage COS and Tencent Cloud with multiple edge locations CDN provide support。

front end developer personal website

Introduction to static hosting for cloud development

Cloud development static hosting is the ability of static website hosting provided by cloud development,static resources(HTML、CSS、JavaScript、font etc.)distribution by Tencent Cloud Object Storage COS and Tencent Cloud with multiple edge locations CDN provide support。You can use the Tencent Cloud console、Command line tools and the ones mentioned belowcloud development Github Action Manage deployment。Cloud Development provides free second-level domain names(Downlink speed is limited when no custom domain name is bound),At the same time, it supports free binding of the developer's owncustom domain name

The first environment to enjoy 1GB capacityand monthly 5GB flowof free quota,It should be enough for personal blogs that don't get a lot of traffic。It doesn't matter if there is a lot of traffic,Billing is a pay-as-you-go method based on specific usage charges,For specific information, please refer to the billing price document
https://cloud.tencent.com/product/wh/pricing

Cloud development static hosting deployment website,You can also use the provided by cloud developmentone stop Serverless Backend capabilities,e.g. cloud functions、cloud database、cloud storage、Identity Services, etc.。For example, it can be implemented using cloud functions and cloud databases on a statically hosted personal blogComment、message boardfunction, etc.,Or you can change the content management of the blog from the original static file deployment toDynamic Content ManagementWait,Extensive usage is very much,Developers can continue to explore further。

how to pass Github Action One-click deployment to cloud development

The following shows how to Github Static pages are automatically deployed to cloud-developed static hosting,to get stable access speed and more scalability。

For example, the developer's personal blog Github The project structure is as follows:

|-- src

|-- build

|-- README.md

Hope to put the project under build The static website code generated by the directory is deployed to the root directory of the static website hosting opened on the cloud development side。

write Github Action document

(front end developer personal website)First configure the following in the project directory Github Action document
.github/workflows/main.yml,If already configured Github Action No need to recreate,Then refer to the following configuration to fill in。

(front end developer personal website)on: [push] # push Fired when code

jobs:

deploy:

runs-on: ubuntu-latest

name: Tencent Cloudbase Github Action Example

steps:

- name: Checkout

uses: actions/checkout@v2

# Develop with the cloud Github Action deploy

- name: Deploy static to Tencent CloudBase

id: deployStatic

uses: TencentCloudBase/cloudbase-action@v1

with:

# Access key for cloud development secretId and secretKey

secretId: ${{ secrets.SECRET_ID }}

secretKey: ${{ secrets.SECRET_KEY }}

# Cloud development environmentid

(front end developer personal website)

# Github Path to project static files

staticSrcPath: build

It can be seen that the configuration is mainly used cloud development Github Action expand
TencentCloudBase/cloudbase-action@v1 to deploy static files。

Pay attention to the parameter section in the configuration file secretId、secretKey 、envIdsensitive information,need to be placed in the project secret in storage,Don't fill in the real value here,Just fill in the variables according to the above example。

(front end developer personal website)staticSrcPath Fill in the directory generated by static website construction here build,If you want to deploy static resources to a subdirectory in the cloud instead of the root directory,One more parameter can be configured staticDestPath 。

Configuring Cloud Development Access Information

We also need to Secrets Medium configuration SECRET_ID、SECRET_KEY、ENV_ID these private information,The following is the specific configuration method。

First, you need to open the cloud development static website,You can refer to the opening guide:
https://docs.cloudbase.net/hosting/,After opening the environment
List of cloud development environments page to get the environmentID ENV_ID ,Then in Tencent Cloud access management The page can configure a pair of API access key,that isSECRET_ID、SECRET_KEY。

then in your own Github within the project Setting/Secrets settings SECRET_ID, SECRET_KEY, ENV_ID information。

(front end developer personal website)front end developer personal website

After configuration, you can submit code to experience automatic deployment,every time git push Actions will run automatically,Deploy the static resources of the project to your own cloud development static hosting environment,After successful deployment, you can access your own website through the second-level domain name provided by Cloud Development。

front end developer personal website

Configure a custom domain name

The downlink speed of the free second-level domain name provided by cloud development is limited,It is best for developers to bind a domain name of their own,Binding a domain name is free,You can also configure a free one on Tencent Cloud SSL Certificate,to pass HTTPS visit own website。

The method of customizing the domain name can refer to this document
https://docs.cloudbase.net/hosting/custom-domain.html

front end developer personal website

After the configuration is complete,Test the access speed of the statically hosted website deployed in the cloud development,According to the speed measurement data, it can be seen that the access speed everywhere is very fast。

front end developer personal website

More extended usage

cloud development Tencent CloudBase Github Action This extension will Github Automatic deployment of projects to the cloud development environment,Currently supports static hosting functionality,The deployment of other resources will be supported in the future,For example, you can use Node JS 、 Java、PHP developed in other languagesOne-click deployment of server-side projects to cloud development,to get Serverless Customized dynamic website service。orAutomated deployment with database、front end、Backend full stack application

Tencent CloudBase Github Action Extended Market Address:

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

Tencent CloudBase Github Action Code open source address:

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

Welcome to experience、Star support or submit Issue / Pull request to contribute。

Developer support

Cloud development also launched【9.9Meta Static Website Hosting Annual Sponsorship Program】。As long as you are a tech blogger/technical site,After migrating to the cloud to develop static website hosting services,Apply for this sponsorship program。 Application method link: https://url.cn/5nFAtxq Static website hosting product introduction:
https://cloud.tencent.com/product/wh

返回列表
更多新闻资讯

website development company american fork

2022-03-15

website development company american fork Florida, USA,What is the cost of a dynamic e-commerce website??At the data exitWe are e-commerce website designersThe company provides the best professional web design for small or large companies in

quality management plan for website development

2022-03-15

quality management plan for website development Website as a facade in the Internet promotion,Is the display of corporate image,The importance is self-evident。So how to build a high quality website?What issues need to pay attention to during websit

how to choose website development company

2022-03-15

how to choose website development company In today's fast-developing economy,Small and medium-sized enterprises have realized the importance of enterprise website to enterprise development。However,The website building market is polarized。Some