部署篇：如何將demo部署到Github以及綁定域名

本篇將介紹如何將靜態(tài)頁面部署托管到Github，然后我們可以外網(wǎng)在線隨意訪問，同樣國內(nèi)也有類似Github這種代碼倉庫托管平臺，比如Gitee碼云、Coding。Github是世界程序員的平臺，用戶和資源都是最多的，所以，文章下邊主要是針對Github來講解介紹。

首先舉例幾個讓大家看效果，以下都是前端靜態(tài)頁面網(wǎng)頁，無后端，都是托管于 Github：

·個人主頁：giscafer.com html頁面

·博客：blog.giscafer.com 使用Hexo博客框架構(gòu)建的靜態(tài)頁面博客

·個人Demo/項目集合 project.giscafer.com （樣式不兼容手機）

·NgxFromBuilder 表單自動化構(gòu)建 Angular開發(fā)，打包后部署Github

·個人旅游地圖相冊 和前面章節(jié)介紹到的Leaflet實現(xiàn)旅游相冊類似，部署到Github后綁定域名而已

·mapshaper-plus 基于mapshaper實現(xiàn)的，擴展Echarts地圖數(shù)據(jù)轉(zhuǎn)換

·在線簡歷 使用reveal.js實現(xiàn)的效果

……

鏈接地址：gis616（添加備注鏈接）

不管是項目、demo、工具集合，只要你是純前端靜態(tài)資源的東西都可以部署到 Github 。本章主要目的就是給大家介紹如何部署demo到Github，就用我們前面幾章節(jié)中的demo來介紹部署過程。（繼續(xù)往下看，你要先有Github網(wǎng)站賬號）

前期準備

先了解 Github Pages

正如官方首頁 Github Pages 介紹一樣，Github Pages 是用來方便的發(fā)布你工程的網(wǎng)站，官方介紹了Git命令式的方式提交代碼。沒使用過git的同學(xué)可能看不懂，下邊我將介紹使用可視化界面操作來介紹。

工具軟件

需要安裝以下兩個軟件，到官網(wǎng)下載對于電腦環(huán)境的安裝包，直接安裝就行。

·Git 代碼版本管理工具（類似SVN，比SVN強大好用）

·TortoiseGit Git命令可視化GUI工具

Github托管Demo

（1）登錄github新建工程

新建工程

填寫工程名稱（自己隨意填寫，一般按工程含義填寫即可，這里我是演示用，隨意取的名稱），其他相關(guān)信息非必填。

工程信息填寫

（2）提交代碼到工程

復(fù)制工程項目git地址，提交代碼到git工程，如果了解git的同學(xué)可以用 git clone 項目地址的方式克隆下來。

git clone

首次使用的同學(xué)，通過上邊安裝的 TortoiseGit 軟件來下載項目代碼。

（windows）桌面右鍵,彈出菜單選擇 git clone ，輸入工程git地址

然后將你的代碼，復(fù)制到克隆下來的工程目錄下，這里我們介紹master復(fù)制搭建靜態(tài)頁面的話，就直接放到工程根目錄即可。比如我們將之前第5章中，介紹的openlayers、leaflet、arcgis 三個不同JS庫實現(xiàn)地圖加載的Demo代碼拷貝到工程中。因為靜態(tài)頁面部署，web服務(wù)器默認找的是index.html文件，所以我們復(fù)制leafletdemo/index.html 文件到工程根目錄下。（如果你部署的是自己的demo，這里只需要將demo下的文件拷貝到工程目錄即可）

最后提交代碼，工程根目錄文件夾下，右鍵菜單選擇git commit->master，輸入提交信息，勾選需要提交的文件，然后點擊提交，最后還要點擊push，推送到遠程工程。

提交代碼

提交推送

賬號確認

啟用 Gtihub Pages

提交代碼成功后，我們打開Github對于的工程主頁，如果，選擇設(shè)置：

設(shè)置入口

設(shè)置Github Pages為master分支

保存設(shè)置后，Github Pages會自動生成一個二級域名+工程名稱的訪問地址。生成規(guī)則是：https://用戶名.github.io/工程名稱，現(xiàn)在演示的demo部署地址就為 https://giscafer.github.io/demo_test/

我們就可以通過地址訪問我們的demo了。到此就部署成功。

demo地址預(yù)覽

因為以上我復(fù)制了三個demo的代碼到工程目錄下提交的，所以其他demo的效果也可以訪問到：

·arcgisdemo: https://giscafer.github.io/demo_test/arcgisdemo/

·openlayersdemo: https://giscafer.github.io/demo_test/openlayersdemo/

以上我們演示的是master分支部署托管靜態(tài)頁面，其他還可以支持gh-pages 分支，master目錄下的doc文件夾部署。感興趣的同學(xué)可以多了解一下。

綁定域名綁定域名的前提需要注冊域名，注冊域名的網(wǎng)站很多，比如阿里云、百度云、騰訊云、萬網(wǎng)（也是阿里的）、西部數(shù)碼等。

下邊介紹截圖是阿里購買的域名綁定github pages，其他平臺都是類似的。

（1）域名解析

到域名管理列表中，找到自己需要綁定的域名，選擇域名解析

第一步：

域名解析

第二步：

添加解析紀錄

第三步：

A紀錄綁定

第三步中，選擇A紀錄綁定，綁定的是自己github二級域名的ip地址，該ip可以通過CMD里輸入ping 用戶名.github.io的方式知道ip地址多少。

綁定后：

解析紀錄詳情

（2）工程創(chuàng)建CNAME文件，綁定解析的二級域名

在你的github工程根目錄下（以上舉例則為demo_test/CNAME），新建一個名為CNAME文件，右鍵文本編輯器打開，輸入你想要綁定的域名（對應(yīng)你域名解析的域名即可）直接輸入即可。然后提交，見提交日記

webgisdemo.felearn.com

最后通過域名 webgisdemo.felearn.com 即可訪問上邊的demo了。如果你想一個域名針對一個demo，去掉二級域名的話，那就是 giscafer.com 的效果，這種情況也是類似的，域名解析好，CNAME綁定就可以了。文章一開始介紹的demo都是部署托管Github的，不管是一級域名還是二級域名，還是demo路徑的方式，都可以做到的。

其他介紹

發(fā)布到Github Pages的過程，其實可以搞成自動化的方式，代碼打包后，通過git提交到對于gh-pages分支，這塊熟悉了git和github的同學(xué)可以嘗試一下。

其他的如Hexo博客框架，本質(zhì)上是通過編譯 Markdown 文件為html靜態(tài)文件，然后部署到Github Pages，也就成了靜態(tài)博客的效果了。早期個人的博客就是這么搞的。

本章小結(jié)

本章主要介紹如果將demo靜態(tài)文件部署到Github，并介紹了自定義域名綁定demo。利用好Github Pages，可以自己做網(wǎng)頁效果，也可以直接生成工程使用介紹頁面，Github上很多開源的

庫、框架，都是生成文檔，然后直接通過Github Pages去發(fā)布API文檔，或者網(wǎng)站介紹。只是綁定了自定義域名而已。因為這就是Github提供Github Pages的主要目的。如果文章中有錯誤的地方歡迎指出，也歡迎留言討論。

本文鏈接地址：gis616（備注鏈接，免費獲?。?

（持續(xù)更新中....）