搭建CMS,HEXO+Github

hexo是一款基于Node.js的静态博客框架

配置环境

安装Node（必须）

作用：用来生成静态页面的

到Node.js下载相应平台的最新版本，一路安装即可。

安装Git（必须）

作用：把本地的hexo内容提交到github上去.

安装Xcode就自带有Git，我就不多说了。

申请GitHub（必须）

作用：是用来做博客的远程创库、域名、服务器之类的，怎么与本地hexo建立连接等下讲。

github账号我也不再啰嗦了,没有的话直接申请就行了，跟一般的注册账号差不多，SSH Keys，看你自己了，可以不配制，不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码，配置了就不需要了，怎么配置我就不多说了，网上有很多教程。

正式安装Hexo

Node和Git都安装好后,首先创建一个文件夹,如blog,用户存放hexo的配置文件,然后进入blog里安装Hexo。

执行如下命令安装Hexo：

sudo npm install -g hexo

初始化然后，执行init命令初始化hexo,命令：

hexo init

好啦，至此，全部安装工作已经完成！blog就是你的博客根目录，所有的操作都在里面进行。

生成静态页面

hexo generate（hexo g也可以）

本地启动

启动本地服务，进行文章预览调试，命令：

hexo server

浏览器输入http://localhost:4000

我不知道你们能不能，反正我不能，因为我还有环境没配置好

配置Github

建立Repository

建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】，固定写法

然后建立关联，我的blog在本地/Users/qikun1990/blog，blog是我之前建的东西也全在这里面，有：

    _config.yml    node_modules    public      source

    db.json        package.json    scaffolds  themes

现在我们需要_config.yml文件，来建立关联，命令：

vim _config.yml

翻到最下面，改成我这样子的

deploy:

     type: git

     repo: https://github.com/qikun1990/volo.git

     branch: master

然后执行命令：

npm install hexo-deployer-git --save

网上会有很多说法，有的type是github, 还有repository最后面的后缀也不一样，是github.com.git，我也踩了很多坑，我现在的版本是hexo: 3.1.1，执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。

忘了说了，我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了，总共就两种协议，相信你懂的。

然后，执行配置命令：

hexo deploy

然后再浏览器中输入http://qikun1990.github.io/就行了，我的github的账户叫qikun1990,把这个改成你github的账户名就行了

部署步骤

每次部署的步骤，可按以下三步来进行。

    hexo clean

    hexo generate

    hexo deploy

一些常用命令：

hexo new"postName" #新建文章

hexo new page"pageName" #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）

hexo deploy #将.deploy目录部署到GitHub

hexo help # 查看帮助

hexo version #查看Hexo的版本

报错总结

ERROR Deployer not found: git 或者 ERROR Deployer not found: github

解决方法： npm install hexo-deployer-git --save

如发生报错： ERROR Process failed: layout/.DS_Store , 那么进入主题里面layout和_partial目录下，使用删除命令：

rm-rf.DS_Store

ERROR Plugin load failed: hexo-server

原因：

Besides,utilities are separated into a standalone module.hexo.util is not reachable anymore.

解决方法，执行命令：

sudo npm install hexo-server

执行命令hexo server，提示：Usage: hexo ....

原因：

我认为是没有生成本地服务

解决方法，执行命令：

npm install hexo-server --save

提示：hexo-server@0.1.2 node_modules/hexo-server

....

表示成功了

这个时候再执行：

hexo-server

得到:

INFOHexois running at http://0.0.0.0:4000/.PressCtrl+C to stop.

这个时候再点击http://0.0.0.0:4000，正常情况下应该是最原始的画面，但是我看到的是：

白板和Cannot GET / 几个字

原因：

由于2.6以后就更新了，我们需要手动配置些东西，我们需要输入下面三行命令：

npm install hexo-renderer-ejs --save

npm install hexo-renderer-stylus --save

npm install hexo-renderer-marked --save

这个时候再重新生成静态文件，命令：

hexo generate（或hexo g）

启动本地服务器：

hexo server（或hexo s）

再，点击网址http://0.0.0.0:4000OK终于可以看到属于你自己的blog，本地已经简单的设置好了，但是现在域名和服务器都是基于自己的电脑，接下来需要跟github进行关联。

主题推荐

Cover- A chic theme with facebook-like cover photo

Oishi- A white theme based on Landscape plus and Writing.

Sidebar- Another theme based on Light with a simple sidebar

TKL- A responsive design theme for Hexo. 一个设计优雅的响应式主题

Tinnypp- A clean, simple theme based on Tinny

Writing- A small and simple hexo theme based on Light

Yilia- Responsive and simple style 优雅简洁响应式主题，我用得就是这个。

Pacman voidy- A theme with dynamic tagcloud and dynamic snow

一些基本路径

文章在source/_posts, 文章支持Markdown语法，可以使用一些MarkDown渲染工具。如果想修改头像可以直接在主题的_config.yml文件里面修改，友情链接，之类的都在这里。开始打理你的博客吧，有什么问题或者建议，都可以提出来，我会继续完善的。

修改头像

我当前的路径/Users/leopard/blog/themes/yilia，ls 你可以看到

Gruntfile.js    _config.yml package.json

README.md  layout      source

vim _config.yml 进去，找到 #你的头像url avatar: 后接一个URL就行了，头像就修改成功了

修改主题和作者名字

我当前的路径/Users/leopard/blog，ls 你可以看到

_config.yml  node_modules    public      source      themes

db.json        package.json     scaffolds   ssh-keygen

vim _config.yml 进去，找到 author: XXX，修改成你自己的名字就行了

修改主题，然后继续往下找到

# Extensions

## Plugins: http://hexo.io/plugins/

## Themes: http://hexo.io/themes/

theme:yilia

改成theme: yilia，theme:后面接你自己的主题名字就行了,然后分别执行

部署 hexo g

提交 hexo d

你的主题，和名字就修改成功了

使用自己的域名

很多人可能并不清楚github pages是干嘛的，官网是：https://pages.github.com/，其实算github提供的一个服务，我们可以免费的再其上面搭建自己的网站，也有很多人利用github pages作为自己的个人博客站点。

接下来，我们就看github pages如何使用，以及我是如何利用它做页面跳转的。

那么，通过本文的学习，你也可以利用github pages搭建一个小站点，构建属于自己的网站，或者使用github pages维护个人博客都可以。

二、Github Pages的使用

（1）新建仓库

ok，首先你需要一个github的账号，立志作为一名优秀的程序员，这个账号是应该有的，如果没有赶快申请一个。

有了账号以后，首先点击新建仓库，如图：

然后到达仓库信息填写界面，如图：

这里只要注意一个地方，就是仓库的名称，必须是：你的用户名.github.io，例如我的用户名是hongyangAndroid，我填写的仓库名称即为：hongyangAndroid.github.io。

（2）更新内容

有了仓库以后，你就可以去随意的更新内容了，如果你对html熟悉，你可以随便写个页面提交上去，比如我写个简单的html页面。

先简单说一下如果更新github仓库中的内容：

1. clone到本地

   命令行进入硬盘上任意一个文件夹，然后执行

   git clone https://github.com/hongyangAndroid/hongyangAndroid.github.io.git
   
      
   1
   2
      
   1
   2

   注意修改为你的仓库地址，如果你的电脑上并不支持git命令，你可以搜索git 安装，先安装好git并配置好环境。

到达本地之后，我们就可以准备好需要更新进去的页面了，比如我新建一个index.html内容如下：

<!DOCTYPE html>
<html>
<body>
<h1>这是我使用github pages搭建的个人站点。</h1>
</body>
</html>
 
1
2
3
4
5
6
 
1
2
3
4
5
6

完成之后，记得保存，index.html必须和你clone下来的.git文件夹在同一个目录，如图：

完成之后，就是提交了。

/Users/zhy/github_repository/mine/hongyangAndroid.github.io
git add .
git commit -m "更新index.html，编写博文测试"
[master c22f3d4] 更新index.html，编写博文测试
 1 file changed, 6 insertions(+), 1 deletion(-)
git push
Username for 'https://github.com': hongyangAndroid
Password for 'https://hongyangAndroid@github.com': 
>zhy$ 

 
1
2
3
4
5
6
7
8
9
10
 
1
2
3
4
5
6
7
8
9
10

注意首先命令行进入你的hongyangAndroid.github.io这个目录，然后依次执行git add . , git commit -m "注释"，git push，然后输入你的用户名，密码即可。

更新成功之后，那就要恭喜你了，你的个人站点搭建成功了。

你肯定又要说，你忽悠谁呢，顶多算你新建了一个仓库，提交了一个html文件而已，这里我要说，No No No，你的个人站点真的搭建好了，你已经可以给你的亲朋好友炫耀了，那么站点总要有个访问的地址吧，不然怎么访问呢？

恩，是的，默认的地址是:

http://hongyangandroid.github.io
 
1
 
1

例如我在浏览器访问这个地址：

看到没有，我们刚才编写的简单html文件已经可以通过特定的url访问了，恩，你记得修改为你自己的url。

如果你的html、css、js技术足够好，你完全可以利用这样的方式搭建一个高逼格且实用的个人站点，当然你也可以在上面搭建你的简历，方便打印，不过注意保护个人隐私。

三、打造博客专属域名

（1）域名购买与解析

ok，首先你要有个域名，那么就要去申请域名了，这里我们可以通过万网申请：https://wanwang.aliyun.com/，查找你想申请域名，如果可以买，购买就可以了。

购买域名完成，进入万网的管理控制台：

找到你已经购买的域名，点击解析，进入如下页面：

然后点击添加解析，ip可以跟我填写的一致，当然以防发生变化，你可以ping你的url：

例如：

ping www.hongyangandroid.github.io
 
1
 
1

然后拿到返回的这个IP也可以。

恩，根据上表，选择一个IP，填写两条记录其实就可以了：

• 主机记录www对应www.zhanghongyang.com
• 主机记录@对应zhanghongyang.com

ok，设置完成解析之后，是不是直接访问域名就能跳转到我们刚才的github页面呢？

恩，是不能，你去访问会显示404.

我们还差一个环节。

（2）CNAME

差什么呢，差一个CNAME文件，这个文件需要提交到我们刚才创建的仓库，内容为我们的域名，例如:

然后记得执行：git add . , git commit -m "注释"，git push，然后输入你的用户名，密码即可，忘了命令往前翻。

更新成功之后，检查下，确定成功了，就可以通过你的域名访问了，例如：

ok，到这里你已经学会了如何通过你购买的域名与github pages结合，即通过你购买的域名访问你的个人站点了。

一般情况下，到这里就可以庆祝了，比如你想托管你的简单的网页设置。

但是，如果你和我一样，博客在其他平台下托管，你想通过购买的域名跳转到该平台，你的任务还没结束。

（3）神奇的JS

好吧，其实一点也不神奇，也就一行js跳转代码。

对于我这种情况，我不需要任何内容，只要一行js就好了，我可以这么写index.html：

<!DOCTYPE html>
<html>
<script>
    window.location.href="http://blog.youkuaiyun.com/github_38922197";
</script>

<body>
</body>

</html>
 
1
2
3
4
5
6
7
8
9
10
 
1
2
3
4
5
6
7
8
9
10

然后我提交就搞定了，我就可以通过appleker.xyz直接跳转到我的优快云页面了。

but，心细的人并没有满足，比如我们手机访问的csdn列表页面和电脑的列表页面不同的，于是我们可以更加完善我们的js代码：

<script>
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        window.location.href="http://blog.youkuaiyun.com/github_38922197";
    } else {
        window.location.href="http://m.blog.youkuaiyun.com/blog/index?username=github_38922197";
    }
}
browserRedirect();
</script>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

通过判断userAgent来确定是否是来自手机端的，如果是手机端的访问mobile的页面，否则访问pc端页面。