看一眼就學會的 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 小遊戲，除去小遊戲的開發時間，搭建過程很是便捷快速。各位小夥伴們還不趕忙來「薅羊毛」！