【基础】利用 hexo + Gitpage 开发自己的博客

• 原文作者：cherry
• 原文地址：【基础】利用 hexo + Gitpage 开发自己的博客

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

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把

复制代码

替换成

<% } %> 复制代码

注册并登录百度统计获取你的统计代码。

编辑文件hexo\themes\modernist\layout_partial\head.ejs，在『/head』之前增加：

<%- partial('baidu_tongji') %>
复制代码

重新生成并部署你的站点。

不出意外的话，在你的站点的每个页面的左上角都会看到一个恶心的百度LOGO。你只能在『百度统计首页->网站列表->获取代码->系统管理设置->统计图标设置->显示图标』，把那个勾去掉。百度真是恶心，我准备还是用Google Analytics。

分享

我没有添加分享，觉得这个不是很必要，导致页面看起来啰嗦。以加网为例介绍如何添加：

• 在hexo\themes\modernist\layout_partial\post下新建jiathis.ejs文件。 注册加网获得你的分享代码，写入jiathis.ejs。
• 在hexo\themes\modernist\layout_partial\article.ejs中，添加<%-partial(‘post/jiathis’)%>。 -分享服务还可以使用如下企业提供的技术加网，bShare，百度分享。

网站图标

看一下hexo\themes\modernist\layout_partial\head.ejs，找到这句：

"icon" type="image/x-icon" href="<%- config.root %>favicon.ico">
复制代码

你懂的，将你的favicon.ico放到工程根目录下即可，也就是hexo\source目录。可以在Faviconer制作你的ico图标，国内有比特虫。

自定义挂件

除了默认已提供的挂件外，你还可以自定义自己的小挂件，在hexo\themes\modernist\layout_widget\下，新建自己的ejs文件，如myWidget.ejs，然后在配置文件hexo\themes\modernist_config.yml中配置。

widgets:
  - myWidget
复制代码

用上述方法可以添加新浪微博小挂件。

• 生成自己的微博组件。
• 添加hexo\themes\modernist\layout_widget\weibo.ejs文件。
• 配置hexo\themes\modernist_config.yml。 插件 --

安装插件：

npm install  --save
复制代码

启用插件：在*hexo_config.yml文件添加：

plugins:
-   #插件名
复制代码

升级插件：

npm update
复制代码

卸载插件：

npm uninstall 
复制代码

RSS插件 将上述命令中的『plugin-name』，替换为hexo-generator-feed。一旦安装完成，你可以在配置显示你站点的RSS，文件路径\atom.xml。

你可以用rss作为迁移工具，用如下命令读取其他位置的rss：

hexo migrate rss <source>
复制代码

『source』是本地或网络文件路径。

Sitemap插件 将上述命令中的『plugin-name』，替换为hexo-generator-sitemap。你可以将你站点地图提交给搜索引擎，文件路径\sitemap.xml。

更多插件的安装方法，请参考官方Wiki。

如果你按照上述步骤做，但插件不起作用，没有生成atom.xml和sitemap.xml，也没有报错，那么你应该cd到你的hexo初始化目录，在该目录下重新安装插件，重试。

迁移

hexo支持从其他类型站点迁移，如通用RSS，Jekyll，Octopress，WordPress等，这一部分我没试过。请参考官方文档Hexo Migration。

搜索引擎

你可以到屈站长提交你的站点给搜索引擎。其他内容如添加站点或页面的description，提交Sitemap，添加百度统计，Google Analytics等等，参考本文其他章节的内容，不再一一阐述。

更新

更新hexo：

npm update -g hexo
复制代码

更新主题：

cd themes/你的主题
git pull
复制代码

更新插件：

npm update
复制代码

干掉IE

Kill IE6 提示的javascript代码，请自行搜索。

换机器

你要保留好自己的博客源码。换机器写博客，就只能使用各种网盘的同步功能，或者你把你的站点源文件提交到某代码托管服务器。另外，貌似这篇很牛逼，Hexo 服务器端布署及 Dropbox 同步。

我的办法是这样的，先在一个目录下做好Node+Git+Hexo的绿色环境，写个hexos.bat可以一键启动hexo工作台，把整个目录用Dropbox同步，这样随便在办公室或家的任何笔记本台式机都可以写博客，也不用处理什么文件拷贝备份的事情，非常爽。

统计功能

为hexo博客添加访问次数统计功能

其它

网站加速

Webluker-CDN 网站加速 免费CDN DNS解析

Webluker-FAQ索引

网站监控

监控宝-网站监控 网页监控 服务器监控

监控宝-常见问题

参考文献

• hexo + github + 多说 来搭建免费博客

• 利用swiftype为hexo添加站内搜索

• 博客搬迁记 - 从WordPress到Hexo

• 在 hexo中无痛使用本地图片

• 手把手教你使用Travis CI自动部署你的Hexo博客到Github上

• 为Hexo博客生成sitemap

• 使用gulp精简hexo博客代码

• 单个GitHub帐号下添加多个GitHub Pages的相关问题

• hexo你的博客

个人技术博客 liliuzhu.gitee.io/blog