【鬼脸原创】github搭建动态网站

a{
color:blue;
font-weight:bold;
}
#cnblogs_post_body ol li
{
list-style-type: cjk-ideographic;
}
p[id]
{
font-size:17px;
font-weight:bold;
}

目录

1. 简介
2. github注册及基本使用
3. git基本使用
4. github站点配置
5. 域名映射
6. 后台服务搭建
7. 前端页面搭建
8. 总结

一、简介

github提供了免费的仓库，并且支持个人站点搭建，以及域名映射； 而网上也有一些免费的后台服务。

今天我就利用 github + 后台服务  搭建一个免费的动态网站。

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

二、github注册及基本使用（网上一搜一大堆，直接贴个地址了）

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

三、git基本使用（这个也是，有好多教程了）

传送门：廖雪峰的官方网站--git教程

四、github个人站点配置

自动生成站点

五、域名映射

如果你有自己的域名的话，可以映射到github上。

1）在github仓库中，新建一个CNAME文件，内容直接写需要绑定的域名

2)前往你的DNS服务商新建一个CNAME解析至你的github page个人主页地址

等待更改生效，一般几分钟就可以使用你自定义的域名进行访问了

六、后台服务搭建

网上有一些免费的后台服务提供商，我这里用的是bmob，需要注册下。

这里只简单实现一个记录站点访问总次数的功能；

接下来就是通过JSONP，来调用这两个方法了。

 <script type="text/javascript">
    /*
      url中的1cf19cbebb0bdf1a 就是应用秘钥中的Secret Key
      getTotalPV  就是云端代码中设置的方法名，注意大小写
   */
     $.ajax({
         url:"http://cloud.bmob.cn/1cf19cbebb0bdf1a/getTotalPV",
         dataType:'jsonp',
         data:'',
         jsonp:'callback',
         success:function(result) {
            alert(result.results[0].totalPV);
         }
     }); 

 </script>

七、前端页面搭建

1、将原先aside中的内容替换如下
 <aside id="sidebar">
           <p style="font-size:16px;font-weight:bold;color:#FF7256;">网站访问次数：<label id="lb_count">0</label></p>
        </aside>
2、引用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>

效果如下：

八、总结

上述只是简单的构建了一个动态站点，抛砖引块玉，更深入一点的可以自行扩展！