Skip to content

hainuo/hainuo.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

这是一个没有后端代码的动态网站, 采用AngularJs+AVOS Cloud实现。只有前端代码,没有后端代码。前端页面托管在Github Page上。 大家可以用它来搭建一个免费的不用备案的博客,也把它当作学习AngularJs的同学当例子看。 演示网站:http://luofei.co ###运行原理

  • AVOS 是一个后端及服务的BAAS云计算, 提供了很多后端服务,用户不用开发后端代码。本博客系统用了AVOS的数据存储接口,用户管理接口。所以用户登录、文章的添加修改等功能都没有开发后端代码。AVOS因为支持HTML5跨域ajax请求。 所以这些接口我们可以用angularjs直接调用。
  • angularjs负责了前端的接口调用、页面路由、模板渲染。你所看见的网站路径,如http://luofei.co/about , 并不是后端实现的路径解析,而是在前端用angularjs的路由功能实现的。
  • angularjs+AVOS的开发体验非常棒,个人认为纯前端+纯后端API的开发方式会是以后的趋势。

###如何将本博客系统搭建在AVOS和GitHub Page上

####1,GitHub Page的使用 GitHub page 是GitHub的免费静态文件托管服务, 它会为你分配一个二级域名,如 luofei614.github.io 。 你可以绑定自己的一级域名, 因为我已经绑定一级域名, 所以访问 luofei614.github.io会跳到到我的一级域名。
Github Page 使用十分简单,可参考官方教程:https://pages.github.com/ , 就是在github上建立一个名为:yourname.github.com 的项目, 然后把本博客系统的代码提交到刚建立的项目中, 第一次提交后大概等待10分钟左右, 然后可访问 yourname.github.com 。 以后提交代码就几乎会实时生效,只是第一次提交等待时间会长一些。

####2,博客设置 在script/app.js 文件中 有一些设置需要你修改。

blog.constant('blogConfig',{
//AVOS应用的ID和KEY
"AVOS_ID":"l33c40ot1nhdgzkc5ljh2dzn2i8z4jaxlr40zyhmqbxjc1lp",
"AVOS_KEY":"fzho7uxsmpqwsvvopblxyd3ma6d25u999ena17hyuid7865y",
//网站名称
"site_name":"罗飞的技术分享博客",
//每页显示文章数
"pagesize":10,
//多说评论,你在多说上申请的二级域名
"duoshuo_domain":"luofeico",
//文章分类
"categories":["PHP","ThinkPHP","服务器","数据库","前端","HTML5","CSS","javascript","jQuery","bootstrap","angularjs","phonegap","go","python","工具","编辑器"],
//主题图片
"header_pics":[
    {name:"图片1",url:"/image/header_pic/1.png"},
    {name:"图片2",url:"/image/header_pic/2.png"},
    {name:"图片3",url:"/image/header_pic/3.png"},
    {name:"图片4",url:"/image/header_pic/4.png"}
]
});

你需要将AVOS_ID和AOVS_KEY更换为你在AVOS上建立的应用的ID和KEY。稍后讲如何获得这个ID和KEY。 另外文章的评论系统是用的多说多说评论,你需要去多说创建一个应用,并修改duoshou_domain配置项为你多说的二级域名名称。 多说官网:http://duoshuo.com/

####3,使用AVOS Cloud 请大家先到AVOS Cloud https://cn.avoscloud.com/ 上注册一个用户,并创建一个应用。

  • 获得应用KEY 进入应用, 在设置-->应用key , 能获得ID和KEY。修改源码script/app.js文件中的相应配置.

enter image description here enter image description here

  • 建立用户, 在数据-->_User 中手动添加一行数据,输入用户名和密码。 添加完数据后,为了安全,我们要设置_User对象的权限。

enter image description here enter image description here

设置_User对象的add_fields,create,delete,update的操作权限只能为刚才创建的用户。get和find的权限为public。

  • 发布文章 进行完上面的设置后,现在访问网站,会提示

enter image description here

这是因为我们还没有创建文章的数据对象, 在网站的底部点击“管理员登陆”,然后输入之前你创建的用户名和密码,进行登陆。 登陆再在网站底部点击“发布文章”, 发布你的第一篇文章, 文章发布后同时会在AVOS创建一个名为article的数据对象。 为了安全,我们同样要设置这个数据对象的权限和_User数据对象的权限设置一样,add_fields,create,delete,update的操作权限只能为刚才创建的用户。get和find的权限为public。

####4,绑定一级域名。 你可以再绑定自己的一级域名, 在CNAME文件中输入你的一级域名。 只能输入一个域名,如输入 yourdomin.com , 然后 我们将域名yourdomain.com CNAME到yourname.github.io , 你还可以做 www.yourdomain.com 的CNAME, www.yourdomain.com 访问时会跳转到 yourdomin.com。

到现在,你已经搭建好了一个免费的不用备案的个人博客网站。

About

海诺博客公告板

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published