Click on this article to find out more about CODING user xfly!

There are often friends around me who ask me if there is any way to launch their own personal projects without buying a server. For example, many students like to build their own blog sites or small games.

A relatively easy way to do this right now without costing yourself a dime is the Pages service. This kind of service is well-known abroad, such as GitHub Pages service, although it can be accessed in China, but the access speed is not satisfactory. So our domestic own have this kind of service? Of course, there are CODING Pages.

CODING Pages is a free static web hosting service. You can use CODING Pages to host static web Pages such as blogs and project websites.

CODING Pages is a convenient way to create a small HTML game. In this article, the HTML version of 2048 small games as an example, complete belt you go through the construction process.

Prepare in advance

1. Tencent Cloud Developer Platform account. Because you want to use CODING Pages service, so we need a tencent cloud developer platform account, if have you can skip this part, if no, please go to tencent cloud platform developers | technical power to develop website to register. 2. Basic Git command line knowledge. For example, initialize local repository, commit code to local repository, commit code to remote repository, and so on. 3. Install a Local Git development environment. You can choose a GUI client that is easy to use, or you can download the official Git command line and click to go to the download page. Note: Tencent Cloud Developer platform is referred to as “platform” below.

Create a CODING project

First we create a new project on the platform and fill in some necessary information, as shown in the picture below:

After creation, it will enter our project home page, copy the remote warehouse link in the lower right corner, using HTTPS protocol header as an example, to prepare for cloning the project to local. The remote repository link for this example project is: git.dev.tencent.com/dtid_1d9eee…

Clone the project to the local PC

We could have two scenarios:

  1. There is no local code, it belongs to the new project. After we clone the project, we can start development work in the project directory.

  2. Local existing code, only need to bind remote repository.

Case one

We need to clone the project from the remote repository to the local development environment, either through the Git GUI client or through the Git command line. The author takes command behavior as an example: Suppose cloning the project in the existing directory, open the command line and enter the following command, in which the parameter after clone is the remote warehouse link that we copied in the previous step.

$ git clone https://git.dev.tencent.com/tuercun/html_2048.git 
Cloning into 'html_2048'. remote: Enumerating objects: 4, done. remote: Counting objects: 100% (4/4), done. remote: Compressing objects: 100% (3/3), done. remote: Total 4 (delta 0), reused 0 (delta 0) Unpacking objects: 100% (4/4), done.Copy the code

Note that if the open source option is not checked when creating the platform project, the clone command will prompt you to enter the platform account and password, and press Enter. Next, you just need to develop the code under this project, or you can copy the code to this directory.

The second case

Html_2048 is a local project (it does not need to be the same as the name of the remote repository project), so we need to initialize the Git repository for this project and bind the remote repository link.

  1. Go into your existing project and initialize your Git repository.
$ git init 
Initialized empty Git repository in ~/2048/.git/ 
Copy the code
  1. Bind the remote repository link.
$ git remote add origin https://git.dev.tencent.com/tuercun/html_2048.git 
Copy the code

Commit code to the remote repository

You can choose to submit the code at any time, and for the sake of explanation, we’ll assume we’ve developed our little game by now. The steps of each submission are similar. We only cover the most basic submission process here, and we will not expand the description of tag, release and other operations.

Commit all modified code files to stage
$ git add .
Push the staging change record to the local repository, including a commit note
$ git commit -m "init"
Push local repository change records to remote repository$ git push origin master Enumerating objects: 43, done. Counting objects: 100% (43/43), done. Delta compression using up to 8 threads Compressing objects: 100% (39/39), done. Writing objects: 100% (41/41) and 291.76 KiB | 11.22 MiB/s, done. Total 41 (2) the delta, reused 0 (delta 0) To https://git.dev.tencent.com/tuercun/html_2048.git 2f8c4d9.. 42196b8 master -> masterCopy the code

At this point we go back to the platform, go to the code browse page, and see that the code we just submitted is already in the remote repository.

Deploying the Pages Service

Now comes the most exciting step, deploying the Pages service, which is just a few mouse clicks away from the platform.

First, we enter the Pages service page, as shown below:

Check the I have read the Coding Pages Service Statement, click one button to turn on Coding Pages, and the most amazing thing happens.

The CODING Pages service has been built. Visit tuercu.coding. me/html_2048.

How does the CODING Pages service know which file to access? The Pages service has a limitation: by default, it only recognizes the index file in the project root directory, which in this case is the index.html file in the root directory.

Configuring the Pages Service

In fact, the CODING Pages service has been set up. Some students want to change the default domain name provided by CODING Pages service into their own domain name. The intimate CODING Pages service knows that many students have such needs, so the answer is yes. We click on the Settings of the Pages service page, as shown below:

Fill in the domain name you want to bind in the part of binding the new domain name. Before binding, you need to go to the resolution tool provided by the DNS domain name resolver of your domain name to add a CNAME record, where the record type is CNAME and the host record is the domain name you want to bind. This example is 2048.starcode.cn and the record value is tuercu.coding.me provided by the CODING Pages service. The binding effect is as follows:

The difference between preference and preference is that the former won’t discard the original tuercu.coding. me/html_2048, but still can access it and its own domain name. In the latter case, the original access address is automatically redirected to a user-defined domain name address.

One more requirement: can I access it using HTTPS? The answer is yes, and it will automatically configure an HTTPS certificate for your custom domain name. This feature is really moving.

As shown in the figure, the author enabled mandatory HTTPS access, which means HTTPS access will be mandatory when accessing the address 2048.starcode.cn, ensuring the security of data transmission.

summary

So far, we have quickly built an HTML version of 2048 mini-game by using CODING Pages service, which is very convenient and fast in addition to the development time of the mini-game. You guys don’t hurry up to “collect your wool”!