摘要：本文以版的小游戲?yàn)槔暾貛Т蠹易咭槐榇罱鞒?。因?yàn)橐褂梅?wù)，所以我們需要一個(gè)騰訊云開發(fā)者平臺(tái)賬號(hào)，如果已經(jīng)有了可以跳過(guò)該部分，如果沒(méi)有請(qǐng)前往騰訊云開發(fā)者平臺(tái)技術(shù)助力開發(fā)官網(wǎng)進(jìn)行注冊(cè)。注意以下對(duì)騰訊云開發(fā)者平臺(tái)均使用平臺(tái)作為簡(jiǎn)稱。

本文作者：CODING 用戶 - xfly
點(diǎn)擊閱讀原文，還有更多實(shí)用教程等你發(fā)現(xiàn)！

身邊經(jīng)常會(huì)有小伙伴問(wèn)我有沒(méi)有辦法不買服務(wù)器也能上線自己的個(gè)人項(xiàng)目，比如不少同學(xué)都非常喜歡搭建一個(gè)屬于自己的博客站點(diǎn)或者小游戲等。

目前相對(duì)比較簡(jiǎn)便的且不花自己一分錢的方法就是 Pages 服務(wù)。這類服務(wù)在國(guó)外比較知名的如 GitHub Pages 服務(wù)，在國(guó)內(nèi)雖然能訪問(wèn)到，不過(guò)訪問(wèn)速度不盡人意。那么我們國(guó)內(nèi)自家的有沒(méi)有這類服務(wù)呢？當(dāng)然是有的，也就是今天要向大家推薦的 CODING Pages。

CODING Pages 是一個(gè)提供免費(fèi)靜態(tài)網(wǎng)頁(yè)托管的服務(wù)平臺(tái)，你可以使用 CODING Pages 托管博客、項(xiàng)目官網(wǎng)等靜態(tài)網(wǎng)頁(yè)。

今天教大家如何通過(guò) CODING Pages 服務(wù)快速搭建一個(gè) HTML 小游戲，非常方便。本文以 HTML 版的 2048 小游戲?yàn)槔?，完整地帶大家走一遍搭建流程?/p> 提前準(zhǔn)備

1. 騰訊云開發(fā)者平臺(tái)賬號(hào)。因?yàn)橐褂?CODING Pages 服務(wù)，所以我們需要一個(gè)騰訊云開發(fā)者平臺(tái)賬號(hào)，如果已經(jīng)有了可以跳過(guò)該部分，如果沒(méi)有請(qǐng)前往 騰訊云開發(fā)者平臺(tái) | 技術(shù)助力開發(fā) 官網(wǎng)進(jìn)行注冊(cè)。
2. 一些基本的 Git 命令行知識(shí)。比如初始化本地倉(cāng)庫(kù)、提交代碼到本地倉(cāng)庫(kù)、提交代碼到遠(yuǎn)程倉(cāng)庫(kù)等。
3. 本地需要安裝好 Git 開發(fā)環(huán)境。你可以選擇使用方便的 GUI 客戶端，也可以下載官方的 Git 命令行，點(diǎn)擊前往下載頁(yè)面。
注意：以下對(duì)騰訊云開發(fā)者平臺(tái)均使用「平臺(tái)」作為簡(jiǎn)稱。

首先我們?cè)谄脚_(tái)上新建一個(gè)項(xiàng)目，填寫一些必要信息，如下圖所示：

創(chuàng)建完成后，會(huì)進(jìn)入我們的項(xiàng)目首頁(yè)，復(fù)制右下角的遠(yuǎn)程倉(cāng)庫(kù)鏈接，以 HTTPS 協(xié)議頭為例，為克隆項(xiàng)目到本地做準(zhǔn)備。本示例項(xiàng)目的遠(yuǎn)程倉(cāng)庫(kù)鏈接是：
https://git.dev.tencent.com/d...

至此我們?cè)?CODING 上的項(xiàng)目就初始化完成了。

我們可能會(huì)有兩種情況：

本地沒(méi)有任何代碼，屬于新項(xiàng)目。那么我們把項(xiàng)目克隆下來(lái)后就可以開始在項(xiàng)目目錄下進(jìn)行開發(fā)工作了。

本地已有代碼，只需要綁定遠(yuǎn)程倉(cāng)庫(kù)。

第一種情況

我們需要先將遠(yuǎn)程倉(cāng)庫(kù)中的項(xiàng)目克隆到本地開發(fā)環(huán)境，可以借助 Git GUI 客戶端來(lái)操作，也可以使用 Git 命令行來(lái)完成。筆者以命令行為例：
假設(shè)在現(xiàn)有目錄下克隆項(xiàng)目，打開命令行，輸入如下命令，其中 clone 后面的參數(shù)即為我們上一步驟中復(fù)制的遠(yuǎn)程倉(cāng)庫(kù)鏈接。

$ 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.? 

需要注意的是，如果在平臺(tái)創(chuàng)建項(xiàng)目的時(shí)候未勾選公開源代碼選項(xiàng)，此時(shí)克隆命令執(zhí)行的時(shí)候會(huì)提示你輸入平臺(tái)的賬號(hào)和密碼，輸入按回車即可。
接下來(lái)只需要在這個(gè)項(xiàng)目下進(jìn)行代碼的開發(fā)，或者你也可以將寫好的代碼拷貝到該目錄下。

第二種情況

假設(shè)我們本地已經(jīng)有 html_2048 這個(gè)項(xiàng)目了（不需要和遠(yuǎn)程倉(cāng)庫(kù)的項(xiàng)目名一致），那么我們只需要對(duì)這個(gè)項(xiàng)目進(jìn)行 Git 倉(cāng)庫(kù)初始化，并綁定遠(yuǎn)程倉(cāng)庫(kù)鏈接即可，具體操作如下：

進(jìn)入已有項(xiàng)目進(jìn)行 Git 倉(cāng)庫(kù)初始化。

$ git init?
Initialized empty Git repository in ~/2048/.git/?

綁定遠(yuǎn)程倉(cāng)庫(kù)鏈接。

$ git remote add origin https://git.dev.tencent.com/tuercun/html_2048.git?

你可以選擇在任何時(shí)候提交代碼，為方便講解，我們假設(shè)到這已經(jīng)開發(fā)完成我們的小游戲了。
每一次提交的步驟都是類似的，我們這里只涉及最基本的提交流程，對(duì)于 tag 、release 等操作就不拓展開來(lái)說(shuō)明了。

# 將修改過(guò)的代碼文件全部提交到暫存區(qū)（stage）
$ git add .
# 將暫存區(qū)的修改記錄推送到本地倉(cāng)庫(kù)，并包含提交備注
$ git commit -m "init"
# 將本地倉(cāng)庫(kù)更改記錄推送到遠(yuǎn)程倉(cāng)庫(kù)
$ 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

此時(shí)我們回到平臺(tái)，前往代碼瀏覽頁(yè)面，可以看到我們剛才提交的代碼已經(jīng)在遠(yuǎn)程倉(cāng)庫(kù)里面了。

接下來(lái)我們就要進(jìn)入最激動(dòng)人心的步驟 —— 部署 Pages 服務(wù)了，其實(shí)到這里只需要在平臺(tái)上鼠標(biāo)點(diǎn)幾下就能完成。

首先我們進(jìn)入 Pages 服務(wù)頁(yè)面，入口如下圖所示：

勾選 我已閱讀 《Coding Pages 服務(wù)聲明》，點(diǎn)擊一鍵開啟Coding Pages，然后你會(huì)發(fā)現(xiàn)最神奇的事情發(fā)生了。

CODING Pages 服務(wù)已經(jīng)搭建完成了，訪問(wèn)提供的地址：
http://tuercun.coding.me/html...，完美運(yùn)行。

到這里有些同學(xué)會(huì)感到奇怪，CODING Pages 服務(wù)怎么知道要訪問(wèn)哪一個(gè)文件呢？其實(shí)這里 Pages 服務(wù)有一個(gè)限制，默認(rèn)只能識(shí)別項(xiàng)目根目錄的 index 文件，在本示例中就是根目錄下的 index.html 文件。

到這里其實(shí)已經(jīng)完成了 Pages 服務(wù)的搭建，有些同學(xué)就想能否不使用 CODING Pages 服務(wù)提供的默認(rèn)域名，改成自己的域名呢？貼心的 CODING Pages 服務(wù)知道會(huì)有不少同學(xué)有這種需求，所以答案自然是可以的。
我們點(diǎn)擊 Pages 服務(wù)頁(yè)面的 設(shè)置，如下圖所示：

在綁定新域名部分填寫自己想要綁定的域名，在綁定前需要前往自己域名的 DNS 域名解析商提供的解析工具上增加一條 CNAME 記錄，其中記錄類型為 CNAME、主機(jī)記錄為你要綁定的域名，本示例為 2048.starcode.cn、記錄值為 CODING Pages 服務(wù)提供的 tuercun.coding.me。綁定好以后的效果如下圖所示：

其中 首選 和 跳轉(zhuǎn)至首選 的區(qū)別是：前者不會(huì)將原先的 http://tuercun.coding.me/html... 廢棄，仍可以訪問(wèn)，同時(shí)也可以訪問(wèn)自己的域名；后者是強(qiáng)制將原先的訪問(wèn)地址自動(dòng)跳轉(zhuǎn)到自定義的域名地址上。

還有一個(gè)需求：
能不能使用 HTTPS 訪問(wèn)？答案是能，而且是會(huì)給你的自定義域名自動(dòng)配置一個(gè)相應(yīng)的 HTTPS 證書。這個(gè)功能真的是很讓人感動(dòng)。

如圖筆者開啟了強(qiáng)制 HTTPS 訪問(wèn)，意味著訪問(wèn) 2048.starcode.cn 這個(gè)地址會(huì)強(qiáng)制使用 HTTPS 訪問(wèn)，保證了數(shù)據(jù)傳輸?shù)陌踩?/p> 小結(jié)

至此我們通過(guò)使用 CODING Pages 服務(wù)快速搭建了一個(gè) HTML 版的 2048 小游戲，除去小游戲的開發(fā)時(shí)間，搭建過(guò)程非常便捷快速。各位小伙伴們還不趕緊來(lái)“薅羊毛”！