看一眼就学会的 HTML 小游戏搭建！

本文做者：CODING 用户 - xfly 点击阅读原文，还有更多实用教程等你发现！

身边常常会有小伙伴问我有没有办法不买服务器也能上线本身的我的项目，好比很多同窗都很是喜欢搭建一个属于本身的博客站点或者小游戏等。

目前相对比较简便的且不花本身一分钱的方法就是 Pages 服务。这类服务在国外比较知名的如 GitHub Pages 服务，在国内虽然能访问到，不过访问速度不尽人意。那么咱们国内自家的有没有这类服务呢？固然是有的，也就是今天要向你们推荐的 CODING Pages。

CODING Pages 是一个提供免费静态网页托管的服务平台，你可使用 CODING Pages 托管博客、项目官网等静态网页。

今天教你们如何经过 CODING Pages 服务快速搭建一个 HTML 小游戏，很是方便。本文以 HTML 版的 2048 小游戏为例，完整地带你们走一遍搭建流程。

提早准备

1. 腾讯云开发者平台帐号。由于要使用 CODING Pages 服务，因此咱们须要一个腾讯云开发者平台帐号，若是已经有了能够跳过该部分，若是没有请前往 腾讯云开发者平台 | 技术助力开发 官网进行注册。
2. 一些基本的 Git 命令行知识。 好比初始化本地仓库、提交代码到本地仓库、提交代码到远程仓库等。
3. 本地须要安装好 Git 开发环境。 你能够选择使用方便的 GUI 客户端，也能够下载官方的 Git 命令行，点击前往下载页面。
注意：如下对腾讯云开发者平台均使用「平台」做为简称。

建立 CODING 项目

首先咱们在平台上新建一个项目，填写一些必要信息，以下图所示：

建立完成后，会进入咱们的项目首页，复制右下角的远程仓库连接，以 HTTPS 协议头为例，为克隆项目到本地作准备。本示例项目的远程仓库连接是： git.dev.tencent.com/dtid_1d9eee…

至此咱们在 CODING 上的项目就初始化完成了。

克隆项目至本地

咱们可能会有两种状况：

1. 本地没有任何代码，属于新项目。那么咱们把项目克隆下来后就能够开始在项目目录下进行开发工做了。

2. 本地已有代码，只须要绑定远程仓库。

第一种状况

咱们须要先将远程仓库中的项目克隆到本地开发环境，能够借助 Git GUI 客户端来操做，也可使用 Git 命令行来完成。笔者以命令行为例： 假设在现有目录下克隆项目，打开命令行，输入以下命令，其中 clone 后面的参数即为咱们上一步骤中复制的远程仓库连接。

$ 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.  
复制代码

须要注意的是，若是在平台建立项目的时候未勾选公开源代码选项，此时克隆命令执行的时候会提示你输入平台的帐号和密码，输入按回车便可。 接下来只须要在这个项目下进行代码的开发，或者你也能够将写好的代码拷贝到该目录下。

第二种状况

假设咱们本地已经有 html_2048 这个项目了（不须要和远程仓库的项目名一致），那么咱们只须要对这个项目进行 Git 仓库初始化，并绑定远程仓库连接便可，具体操做以下：

1. 进入已有项目进行 Git 仓库初始化。

$ git init 
Initialized empty Git repository in ~/2048/.git/ 
复制代码

2. 绑定远程仓库连接。

$ git remote add origin https://git.dev.tencent.com/tuercun/html_2048.git 
复制代码

提交代码至远程仓库

你能够选择在任什么时候候提交代码，为方便讲解，咱们假设到这已经开发完成咱们的小游戏了。 每一次提交的步骤都是相似的，咱们这里只涉及最基本的提交流程，对于 tag 、release 等操做就不拓展开来讲明了。

# 将修改过的代码文件所有提交到暂存区（stage）
$ git add .
# 将暂存区的修改记录推送到本地仓库，并包含提交备注
$ git commit -m "init"
# 将本地仓库更改记录推送到远程仓库
$ 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), 291.76 KiB | 11.22 MiB/s, done.
Total 41 (delta 2), reused 0 (delta 0)
To https://git.dev.tencent.com/tuercun/html_2048.git
2f8c4d9..42196b8 master -> master
复制代码

此时咱们回到平台，前往代码浏览页面，能够看到咱们刚才提交的代码已经在远程仓库里面了。

部署 Pages 服务

接下来咱们就要进入最激动人心的步骤 —— 部署 Pages 服务了，其实到这里只须要在平台上鼠标点几下就能完成。

首先咱们进入 Pages 服务页面，入口以下图所示：

勾选 我已阅读 《Coding Pages 服务声明》，点击一键开启Coding Pages，而后你会发现最神奇的事情发生了。

CODING Pages 服务已经搭建完成了，访问提供的地址： tuercun.coding.me/html_2048，完…

到这里有些同窗会感到奇怪，CODING Pages 服务怎么知道要访问哪个文件呢？ 其实这里 Pages 服务有一个限制，默认只能识别项目根目录的 index 文件，在本示例中就是根目录下的 index.html 文件。

配置 Pages 服务

到这里其实已经完成了 Pages 服务的搭建，有些同窗就想可否不使用 CODING Pages 服务提供的默认域名，改为本身的域名呢？贴心的 CODING Pages 服务知道会有很多同窗有这种需求，因此答案天然是能够的。 咱们点击 Pages 服务页面的 设置，以下图所示：

在绑定新域名部分填写本身想要绑定的域名，在绑定前须要前往本身域名的 DNS 域名解析商提供的解析工具上增长一条 CNAME 记录，其中记录类型为 CNAME、主机记录为你要绑定的域名，本示例为 2048.starcode.cn、记录值为 CODING Pages 服务提供的 tuercun.coding.me。绑定好之后的效果以下图所示：

其中 首选 和 跳转至首选 的区别是：前者不会将原先的 tuercun.coding.me/html_2048 废弃，仍能够访问，同时也能够访问本身的域名；后者是强制将原先的访问地址自动跳转到自定义的域名地址上。

还有一个需求： 能不能使用 HTTPS 访问？答案是能，并且是会给你的自定义域名自动配置一个相应的 HTTPS 证书。这个功能真的是很让人感动。

如图笔者开启了强制 HTTPS 访问，意味着访问 2048.starcode.cn 这个地址会强制使用 HTTPS 访问，保证了数据传输的安全。

小结

至此咱们经过使用 CODING Pages 服务快速搭建了一个 HTML 版的 2048 小游戏，除去小游戏的开发时间，搭建过程很是便捷快速。各位小伙伴们还不赶忙来“薅羊毛”！