使用gitpage和hexo开发你自己的博客更新

进入程序员这个坑之后就开始自己在网上扒资料，然而资料太多，情况太复杂，主要是看见别人的博客，感觉好高大上，并且感觉在茫茫的互联网有自己的小天地感觉也是极好的。不是为了给别人看，而是为了 记录自己的成长，记录自己的每一个脚印。

Gitpage+hexo

想要实现拥有一个独立的私有博客，我们需要两个东西，一个是可供浏览器访问的静态网页存储空间，这个我们选择gitPage，一个是一个静态网页生成工具，Octopress也好，Hexo也罢，这里我选择的是Hexo。

环境准备

1 安装Node

到Node.js官网下载相应平台的最新版本，一路安装即可。我用的是node-v0.10.22-x86.msi

2 安装Git

安装git，或安装github客户端，自我感觉github客户端很好用，界面很友好，同样操作起来也比git好用的多！我用的是window10系统，在官网下载数次都未安装成功，最后在知乎上终于找到安装包，链接: http://pan.baidu.com/s/1eS2mHxS 密码: yatq ，有需要的同学可以点击下载。

安装步骤

1 安装Hexo

使用git shell,依次输入以下代码命令：

cd /
npm install hexo-cli -g

命令解释：

cd和/之间要有空格，这条指令的作用是返回根目录，也可以在cd /后加入一个文件名，例如下文要用到的cd /Hexo 就可以指向这个文件夹，再输入代码行就默认在在此文件下执行。

2 安装博客所需文件

cd /
hexo init Hexo
cd /Hexo
npm instal
hexo generate（可简写为hexo g）
hexo sever（可简写为hexo s）

命令解释:

cd /这里返回的根目录取决于你在github客户端的设置，我设置的是F盘，所以返回得也是F盘，所以下面创建的Hexo文件夹也在F盘。

Hexo这个文件名可以随便命名，存放的是构建博客所要用到的所有文件。

指向Hexo目录

安装依赖文件

编译

开启本地服务(第5、6步的操作可以合并成hexo s -g)

此时打开浏览器，在地址栏输入http://localhost:4000/
即可查看博客的原型，是不是看到了胜利的曙光；但是如果“显示无法访问此网站”也不要沮丧，我这步是直接看到页面的，你无法访问的原因可能你没有翻墙，因为页面中默认使用了ajax.google.com 下的js包。

那么如何翻墙呢？ 下面提供我所知道的两种方法：

这种方法比较简单，下载安装运行Lantern，可以官网下载的吧！这里提供一下安装包吧，链接: http://pan.baidu.com/s/1c2x7eRu
密码: z3kw

这种方法需要修改hosts文件，我的 hosts 文件路径：C:\Windows\System32\drivers\etc ，详细攻略：http://blog.my-eclipse.cn/host-google.html

如果你不想翻墙，可以采用这种方法：
进入你刚新建好的 blog根目录

themes/landscape/layout/_partial
1，找到 after-footer.ejs把

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js“ > </script>
替换成

<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js“ > </script>

2，找到 header.ejs
注释掉或者删掉 下面这句css引用
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel=”stylesheet” type=”text/css”>
hexo server 之后。访问 http://localhost:4000 就会看到blog主页了。

如果你成功在http://localhost:4000/
下看到了博客原型，那么再进行一些简单的操作之后就可以马上拥有自己的博客了，是不是很激动！

行百里者半九十

不到成功的那一刻，一切欣喜若狂都是不值得的！如果你已经迫不及待，我们继续：

3 部署博客到服务器

也就是把博客部署到github page提供的服务器上。

步骤

首先回到git shell按ctrl+c，之后输入y即可
修改Hexo文件夹下_config.yml文件，如下图所示修改，repository后的地址要改成你自己的地址：deploy: type: github repo: https://github.com/yourname/blog.git
继续回到git shell输入命令：

hexo clean
hexo g
hexo s
hexo d

命令解释:

清除public，当 source 文件夹中的部分资源更改过之后，特别是对文件进行了删除或者路径的改变之后，需要执行这个命令，然后重新编译。
编译，一般部署上去的时候都需要编译一下，编译后，会出现一个 public 文件夹，将所有的md文件编译成html文件
开启本地服务，
部署博客到github上，如果一切顺利，你就通过访问usename.github.io访问你的博客了！
是的，现在你拥有了自己的博客！
发表博文
千辛万苦建立了博客，那么我们来学习一下如何发表博文。

新建博文

继续回到git shell输入：

hexo new “新博文的名字”
即可在 Hexo\source_posts 目录中找到”新博文的名字.md”这个文件。你就可以使用maekdown编辑器打开进行编写博客内容了。

Markdown编辑器

推荐两款我所使用的markdown编辑器：

MIU，据说是仿mac版的mou，界面相当友好，非常喜欢，官网都下载不了，挺小众，可能我就是典型的少说派，我也是偶然间得到，在此提供下载地址：
链接: http://pan.baidu.com/s/1slMPeTR
密码: 2pnk
正在使用的Atom:更为先进的文本代码编辑器 ,由 Github 打造的下一代编程开发神器,其中支持markdown。
可能会遇到的问题

hexo new [layout] “postName” #新建文章

其中layout是可选参数，默认值为post。有哪些layout呢，请到scaffolds目录下查看，这些文件名称就是layout名称。当然你可以添加自己的layout，方法就是添加一个文件即可，同时你也可以编辑现有的layout，比如post的layout默认是hexo\scaffolds\post.md

title: { { title } }
date: { { date } }
tags:
---

大括号与大括号之间我多加了个空格，否则会被转义，不能正常显示。
我想添加categories，以免每次手工输入，只需要修改这个文件添加一行

title: { { title } }
date: { { date } }
categories:
tags:
---

postName是md文件的名字，同时也出现在你文章的URL中，postName如果包含空格，必须用”将其包围，postName可以为中文。

注意，所有文件：后面都必须有个空格，不然会报错。

看一下刚才生成的文件hexo\source_posts\postName.md

title: postName #文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2013-12-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: #文章分类目录，可以为空，注意:后面有个空格
tags: #文章标签，可空，多标签请用格式[tag1,tag2,tag3]，注意:后面有个空格
---

始使用markdown格式输入你的正文。，你就可以用喜爱的编辑器尽情书写你的文章。关于markdown语法，可以参考我的文章Markdown简明语法。

fancybox
可能有人对这个Reading页面中图片的fancybox效果感兴趣，这个是怎么做的呢。
很简单，只需要在你的文章*.md文件的头上添加photos项即可，然后一行行添加你要展示的照片：

layout: photo
title: 我的阅历
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
- http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
经过测试，文件头上的layout: photo可以省略。

不想每次都手动添加怎么办？同样的，打开您的hexo\scaffolds\photo.md

layout: { { layout } }
title: { { title } }
date: { { date } }
tags:
photos:
-
---

然后每次可以执行带layout的new命令生成照片文章：

hexo new photo "photoPostName" #新建照片文章
description
markdown文件头中也可以添加description，以覆盖全局配置文件中的description内容，请参考下文_config.yml的介绍。

title: hexo你的博客
date: 2013-11-22 17:11:54
categories: default
tags: [hexo]
description: 你对本页的描述
---

hexo默认会处理全部markdown和html文件，如果不想让hexo处理你的文件，可以在文件头中加入layout: false。

文章摘要
在需要显示摘要的地方添加如下代码即可：

以上是摘要
<!--more-->
以下是余下全文

more以上内容即是文章摘要，在主页显示，more以下内容点击『> Read More』链接打开全文才显示。

hexo中所有文件的编码格式均是UTF-8。

优雅的在博客上