更新

由于自己又折腾了一阵子，弄了个独立的域名，而且还改了github的账户名。

所以博客地址改为了luckykun.com

------------------------------华丽的分割线--------------------------------------------------

其实我还挺喜欢写文章的，虽然文笔不好＝＝，但总想给自己的学习和生活记录些什么，前段时间一直在博客园写，不过最近在逛论坛的时候不小心看到了hexo,简直有种相见恨晚的感觉呀！在github上创建自己的开源博客，自己的域名，维护方便，主题多多，更重要的是，终于找到只属于自己的小窝啦！于是果断学习搭建了一个，也希望自己能坚持写文^_^

为了引起读者的兴趣，先介绍一下，搭建完成之后，只需这几个简单常用的命令，就能够轻松维护自己的博客了：

$ hexo new(n)    //写文章
$ hexo generate(g)    //把文章生成页面
$ hexo server(s)    //启动本地服务调试
$ hexo deploy(d)    //部署到github 可与hexo g合并为 hexo d -g

折腾了大半天，终于搭建好了自己的博客点这里去看看。不过在这中途，也是历经了九九八十一难呀，所以，我怀着激动心情，把我在这个过程中遇到的坑作为第一篇博客一一记录下来，希望能帮到后面的学者。

备注1：如果喜欢以官方教程为主的，点这里hexo官方文档。
备注2：网上大多教程是都是hexo2.x版本的，所以有很多坑。因此以下教程是针对hexo的版本为3.x以上的，大家放心使用。

准备工作

安装node 到Node.js官网下载相应平台的最新版本，一路安装即可。
安装git 根据系统不同安装相应的git环境。mac系统不多说，windows一般安装msysgit。下面是我本地msysgit的截图，也还是挺好用的:
安装hexo
使用以下命令安装hexo到全局
```
$ npm install -g hexo
```
然后输入命令hexo -v输入hexo的版本号即为安装成功。
github准备
- 博客是在github上托管维护的，所以当然需要一个github的账号了。然后创建一个名为jarson7426.github.io的仓库。
- 其中‘jarson7426’是我的账户名，下文同理。
- 除此之外，相信大多数人都知道，要想使用git命令来和github进行提交部署等操作，需要进行一些配置，大概就是下面一些命令，如不明白请自行搜索。
```
git config --global user.email xxx@163.com
git config --global user.name xxx
ssh-keygen -t rsa -C xxx@163.com(邮箱地址)      // 生成ssh
找到.ssh文件夹打开，使用cat id_rsa.pub    //打开公钥ssh串
登陆github，settings － SSH keys  － add ssh keys（把上面的内容全部添加进去即可）
```

初始化

ok，环境都准备好了，开始激动人心的步骤了，搭建博客。

在某个地方新建一个项目文件夹（比如Blog），然后进入Blog目录，以下所有的命令行操作都是在这个文件夹下进行的。

$ hexo init

生成静态页面

初始化完成之后，就已经生成一篇“hello word”的文章了，现在执行以下命令把文章编译为静态页面：

$ hexo generate

本地启动

把文章变为页面之后，可以执行以下命令，本地启动服务，在浏览器中输入http://localhost:4000/查看生成的页面效果。

$ hexo server

如果你看到了下面这个画面，恭喜你，你成功了！

更换主题

上面的博客效果是hexo自己默认的主题landscape，如果你满足与它，可以跳过这个步骤，直接进行下一步。但是我却还不够满足，因为我发现了一个页面交互人性化，并且完美兼容不同终端显示的主题yilia，貌似这个主题受欢迎程度很高呀，说明我的审美还是不错啊，哈哈~~

下面贴出github上star数量最多的前10个主题（截至目前为止）：

iissnan/hexo-theme-next， 3510个star。
litten/hexo-theme-yilia， 1703个star。
TryGhost/Casper， 679个star。
wuchong/jacman， 503个star。
A-limon/pacman， 431个star。
daleanthony/uno， 416个star。
orderedlist/modernist， 367个star。
AlxMedia/hueman， 336个star。
kathyqian/crisp-ghost-theme， 303个star。
xiangming/landscape-plus， 287个star。

clone主题代码
在目录下执行下面的命令clone主题代码：

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改配置文件
修改Blog/_config.yml文件：

theme: yilia    //默认为landscape

修改themes/yilia/_config.yml文件：

# Header
menu:主页: /所有文章: /archives丝茉茉: /categories/simomo/相册: /photos
# SubNav
subnav:github: "https://github.com/jarson7426"weibo: "http://weibo.com/u/2732624311"zhihu: "#"rss: /atom.xml
# Content
excerpt_link: 阅读全文
fancybox: true
mathjax: true
top: true
# 是否开启动画效果
animate: true
# 是否在新窗口打开链接
open_in_new: false
# Miscellaneous
google_analytics: ''
favicon: /favicon.ico
#你的头像url
avatar: /img.png
#是否开启分享
share_jia: true
share_addthis: false
#是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论
duoshuo: jarson7426
#是否开启云标签
tagcloud: true
#是否开启友情链接
#不开启——
friends: false
#开启——
#friends:
#  百度一下: http://www.baidu.com
#  淘宝商城: http://www.taobao.com
#是否开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: true

查看效果
更改主题之后可以使用命令hexo server打开本地服务，查看效果。

部署到github

上面所有的操作完成之后，你就可以将你的Blog项目部署到github上了。

部署之前先修改Blog/_config.yml文件。
```
deploy:type: gitrepository: https://github.com/jarson7426/jarson7426.github.io.git  //jarson7426替换为你自己的用户名branch: master
```
备注：在hexo3.x版本下，这里的type应该填git，不是github；另外冒号后面都有一个英文的空格，不然会报错的。
然后使用以下命令进行部署。
```
$ hexo deploy
```
备注：如果执行上述命令报错，你可以试试下面这个命令再试。
```
$ npm install hexo-deployer-git--save
```

部署成功后，你在浏览器中输入jarson7426.github.io，就能看到和本地一样的效果了。

结语

可能会有同学发现，我除了使用了新的主题外，还加了很多新的东西。

鼠标移动头像上会有旋转效果。
给文章添加打赏功能。
添加回到顶部的功能。
添加总站访问量和文章阅读量
其实修改这些非常简单，只要你有html、css、js的基础就可以。

思路：因为整个网站都是依赖yilia主题。所以应该在theme/yilia文件夹下，修改对应的dom结构，然后添加对应的效果或者事件绑定就可以实现了。

好了，到这里搭建github博客的步骤就结束了。enjoy it！！！

题记：周末花了很长时间，基于gitpages+jekyll搭建博客，记录下其中一些过程
http://fatmind.github.io/

一、首先得理解：

1.Github Pages 是什么 ?
GitHub Pages are public webpages freely hosted and easily published through our site。
github Pages可以被认为是用户编写的、托管在github上的静态网页，是个免费的host服务。

2.Jeklly 是什么 ?
Jekyll从核心上来说是一个文本转换引擎。该系统内部的工作原理是：你输入一些用自己喜爱的标记语言格式书写的文本，可以是Markdown、Textile或纯粹的HTML，它将这些文本混合后放入一个或一整套页面布局当中。在整个过程中，你可以自行决定你的站点URL的模式、以及哪些数据将被显示在页面中，等等。这一切都将通过严格的文本编辑完成，而生成的Web界面则是最终的产品。

3.github pages与jeklly关系
Jekyll is the engine behind GitHub Pages.
Every GitHub Page is run through Jekyll when you push content to a specially named branch within your repository.
即：提交到github-pages的内容会经过jeklly处理，转换为静态的html，前期是结构必须符合jeklly的要求。参见：www.soimort.org/posts/101/ <基本结构> 部分

二、动手操作

1.请认真阅读，非常清楚
http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
注：例子中使用project-site方式，user-site方式会更简单点，无需分支gh-pages。请看https://pages.github.com/

help文档请注意
a、For User Pages, use the master branch in your username.github.io repository. For Project Pages, use the gh-pages branch in your project's repository.
b、Because a normal HTML site is also a valid Jekyll site, you don't have to do anything special to keep your standard HTML files unchanged.

2.Jeklly是否一定要在本地安装 ?

We highly recommend installing Jekyll on your computer to preview your site and help diagnose troubled builds before publishing your site on GitHub Pages.

目的是为了方便调试问题，所以不是必须的。安装比较繁琐。
推荐：找一个满意的模板，clone下来简单修改，很少需要在本地调试。https://github.com/jekyll/jekyll/wiki/sites

三、其它

1.当提交后，一直不能生效，一般是因为jeklly处理错误。可以查看邮箱确认：github会发一封 ‘Page build failure’

2.推荐markdown编辑器：haroopad

3.hexo与jeklly比较

hexo VS jekyll相关推荐

为什么用hexo代替jekyll
最近想要搞个个人博客,因为不想自己搞站点,所以找到了github pages,它提供给我们域名和空间,多省事啊.那静态页面用什么工具呢?一开始我用的是jekyll,然后我有了那句经典的感受,那句话是从 ...
Hexo集成Valine实现评论留言
2年前搭建的hexo博客好久没有维护了,一看 hexo 以及先前使用 butterfly 主题已经更新好几个版本了,看介绍在速度性能上有了很大的提高,于是打算给 hexo 升个级,整理整理翻翻新.通过 ...
jekyll网站上传服务器,jekyll 高效搭建个人博客之完整流程
jekyll.png 原创精选来自我的博客文章目录说在前面的话作为一个和电脑.代码打交道的我,一直都想拥有自己的博客,一切都显得那么高(zhuang)大(bi)上(yong),在下定决心之后就在 ...
基于Hexo+GitHub Page搭建免费个人博客教程
1. Hexo 介绍 Hexo 是基于NodeJs的静态博客框架,简单.轻量,其生成的静态网页可以托管在Github和Heroku上. 超快速度支持Markdown 一键部署丰富的插件 2. 搭建 ...
Hexo NexT 评论系统 Valine 的使用
文章目录评论系统 Valine 的使用 1 Valine 的介绍 2 Valine 的使用 3 Valine 的配置 4 Valine 的优化 4.1 去除 Valine的 Powered By 4 ...
Hexo+gitee：30分钟搭建一个自己的个人博客网站欢迎友链呀＜(▰˘◡˘▰)
Hexo + Gitee 部署自己的个人博客目前市场上比较火的一些博客框架: Hexo.jekyll.Solo.Halo .gohugo.VuePress.wordpress 等等 ,这些都是开 ...
史上最快搭建Hexo博客教程！
文章目录前言 Github 配置开启Github Pages服务安装配置Git Bash 安装Node js Hexo配置常用命令更换主题推荐前言此处是废话,可以跳过. 作为一名未 ...
搭建 Hexo 个人博客和 Matery 主题的配置优化
文章目录 Hexo 的安装安装 Git 安装 Node.js 升级 Node.js 版本安装 Hexo 升级 Hexo 版本初始化 Hexo 启动 Hexo 服务 Hexo 部署到 GitHub ...
Hexo 静态博客我的新博客
欢迎访问我的新博客: 内容持续更新 https://www.oikiou.top/ 静态网页静态网页生成器 Jekyll(由 Github 构建的用于为其 Github 页面提供支持的 Ruby 生 ...

hexo VS jekyll

更新