【鬼臉原創】github搭建動態網站

目錄

1. 簡介
2. github註冊及基本使用
3. git基本使用
4. github站點配置
5. 域名映射
6. 後臺服務搭建
7. 前端頁面搭建
8. 總結

 

1、簡介

     github提供了免費的倉庫，而且支持我的站點搭建，以及域名映射； 而網上也有一些免費的後臺服務。

     今天我就利用 github + 後臺服務  搭建一個免費的動態網站。     

     演示地址：  http://lanleiming1.github.io

  

2、github註冊及基本使用（網上一搜一大堆，直接貼個地址了）

      http://jingyan.baidu.com/article/f7ff0bfc7181492e27bb1360.html

 

3、git基本使用（這個也是，有好多教程了）

      傳送門：廖雪峯的官方網站--git教程

 

4、github我的站點配置

      

      自動生成站點

     

       

          

        

         

 

 

5、域名映射

     若是你有本身的域名的話，能夠映射到github上。

     1）在github倉庫中，新建一個CNAME文件，內容直接寫須要綁定的域名

          

     2)前往你的DNS服務商新建一個CNAME解析至你的github page我的主頁地址

       

  等待更改生效，通常幾分鐘就可使用你自定義的域名進行訪問了

 

 6、後臺服務搭建

       網上有一些免費的後臺服務提供商，我這裏用的是bmob，須要註冊下。

       

 

      

    

    這裏只簡單實現一個記錄站點訪問總次數的功能；

    

 

接下來就是經過JSONP，來調用這兩個方法了。 

 1 <script type="text/javascript">   
 2    /*
 3      url中的1cf19cbebb0bdf1a 就是應用祕鑰中的Secret Key
 4      getTotalPV  就是雲端代碼中設置的方法名，注意大小寫
 5   */    
 6     $.ajax({  
 7         url:"http://cloud.bmob.cn/1cf19cbebb0bdf1a/getTotalPV",  
 8         dataType:'jsonp',  
 9         data:'',  
10         jsonp:'callback',  
11         success:function(result) {  
12            alert(result.results[0].totalPV);
13         }      
14     }); 
15     
16 </script>

 

 7、前端頁面搭建

      

一、將原先aside中的內容替換以下
 <aside id="sidebar">
           <p style="font-size:16px;font-weight:bold;color:#FF7256;">網站訪問次數：<label id="lb_count">0</label></p>
        </aside>
二、引用jquery文件，編寫js文件，操做dom
<script src="jquery.js" type="text/javascript"></script>
   <script type="text/javascript">   	
      $(function(){
	   getTotalPV();
	});
	function getTotalPV()
	{
		$.ajax({  
			url:"http://cloud.bmob.cn/1cf19cbebb0bdf1a/getTotalPV",  
			dataType:'jsonp',  
			data:'',  
			jsonp:'callback',  
			success:function(result) {  
		           //result.results[0].totalPV
			   $('#lb_count').html(result.results[0].totalPV);
			   //更新次數
			   setTotalPV();
			}      
		}); 	
	}	
	function setTotalPV()
	{
	  $.ajax({  
			url:"http://cloud.bmob.cn/1cf19cbebb0bdf1a/setTotalPV",  
			dataType:'jsonp',  
			data:'',  
			jsonp:'callback',  
			success:function(result) {  			  
			}      
		}); 
	}
</script>

 

效果以下：

 

8、總結

     上述只是簡單的構建了一個動態站點，拋磚引塊玉，更深刻一點的能夠自行擴展！