环境

Mac os安装Homebrewg软件包

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install caskroom/cask/brew-cask  // Homebrew Cask，该包管理器会自动配置好环境变量

安装Node.js

brew install node

安装Git

brew cask install git

查看node npm git 版本是否正确

node -v
npm -v
git --version

安装Hexo

npm install -g hexo-cli //安装Hexo
hexo init hexo //创建一个目录，用于放置你的Hexo博客
npm install // Hexo的安装和初始化

测试Hexo

hexo server // 运行本地服务测试

终端会显示如下所示

INFO Hexo is at http://localhost:4000/. Press Ctrl+C to stop

在浏览器输入http://localhost:4000/即可打开默认页面，说明Hexo博客搭建成功

Hexo博客文件夹目录结构说明

source：博客资源文件夹
source/_drafts：草稿文件夹
source/_posts：文章文件夹
themes：存放主题的文件夹
themes/landscape：默认的主题
_config.yml：全局配置文件

部署到Github Pages

我们的Hexo本地服务完成了，要想供外网访问，我们要部署到服务器上，这里我们选择部署到Github Pages

创建一个repository，名称开头必须和账号一样，然后以.github.io
如下所示

nnianhou-.github.io

修改_config.yml配置文件，打开配置文件，找到如下位置，修改repository地址，就是你刚才创建仓库的地址

deploy:
  type: git
  repository: https://github.com/nnianhou-/nnianhou-.github.io.git
  branch: master

添加ssh key到Github

为避免每次输入Github用户名和密码的麻烦，我们配置ssh
检查SSH keys是否存在。如果有文件id_rsa.pub或id_dsa.pub，则直接将key添加到Github中，否则进入下一步生成SSH key。

$ ls -al ~/.ssh

生成新的ssh key,注意将your_email@example.com换成你自己注册Github的邮箱地址。

$ ssh-keygen -t rsa -C "your_email@example.com"

默认会在相应路径下（~/.ssh/id_rsa.pub）生成id_rsa和id_rsa.pub两个文件。
将ssh key添加到Github中
Find前往文件夹~/.ssh/id_rsa.pub打开id_rsa.pub文件，里面的信息即为SSH key，将这些信息复制到Github的Add SSH key页面即可。
进入Github --> Settings --> SSH keys --> add SSH key:
Title里任意添一个标题，将复制的内容粘贴到Key里，点击下方Add key绿色按钮即可。

绑定个人域名

现在使用的域名是Github提供的二级域名，也可以绑定为自己的个性域名。域名我是在万网买的，可直接在其网站做域名解析。

Github端：
在/blog/themes/landscape/source目录下新建文件名为：CNAME文件，注意没有后缀名！直接将自己的域名如：miaodalive.com写入。

终端cd到blog目录下执行如下命令重新部署：

 hexo clean
 hexo d -g

域名解析：
如果将域名指向一个域名，实现与被指向域名相同的访问效果，需要增加CNAME记录。登录万网，在你购买的域名后边点击：解析 --> 添加解析
记录类型： CNAME
主机记录：将域名解析为example.com（不带www），填写@或者不填写
记录值： miaodalive.github.io. (不要忘记最后的.，miaodalive改为你自己的用户名)，点击保存即可

此时，点击访问http://miaodalive.com和访问http://nnianhou-.github.io效果一致，大功告成！

将个人博客同时部署到 GitHub 和 Coding

首先到 Coding 上注册并开一个项目，项目名称和用户个性后缀相同（方便二级域名访问博客），拿到项目的 https 地址https://git.coding.net/nnianhou/nnianhou.git
打开本地 blog 目录下的 _config.yml 文件，修改如下：

deploy:
  type: git
  repository: 
            github: https://github.com/nnianhou-/nnianhou-.github.io.git
            coding: https://git.coding.net/nnianhou/nnianhou.git
  branch: master

cd 到本地 blog/source 目录下执行如下命令新建 Staticfile 文件

touch Staticfile  #名字必须是Staticfile

原因是 coding.net 需要以这个文件来作为静态文件部署的标志，就是说看到这个 Staticfile 就知道按照静态文件来发布。

执行发布命令：

hexo d -g

个人域名添加两条 CNAME 解析。将 miaodalive.github.io. 解析为 [海外] ，将 miaodalive.coding.me. 解析为 [默认]

这样就是为了从国内访问 miaodalive.com 就是访问 Coding 上的博客项目，从国外访问 miaodalive.com 就是访问 GitHub 上的博客项目。

到 Coding 上的博客项目主页，点击 Pages服务 输入部署分支 master 立即开启

这样就可以访问自己在 Coding 上的个人博客了 miaodalive.coding.me/miaodalive 如果像这样你的用户后缀名与博客项目名称相同你还可以省略项目名称直接访问 miaodalive.coding.me

添加域名绑定，输入个人域名就 OK 了，可能需要耐心等待几分钟，这样在国内访问自己的博客就快得多了。
试了一下在国内访问 miaodalive.com 拦不住 要飞起来了😂

修改主题

如果要修改主题，只需要将主题文件clone到themes目录下，并修改_config.yml配置文件即可
进入hexo的themes目录，clone主题

git clone git@github.com:wuchong/jacman.git

然后修改配置文件的theme参数为jacman即可

theme:jacman

发布第一篇博客

hexo new HelloWord 

新生成的文章都会保存在/source/_posts目录下，打开生成的博客，模板如下，这是生成文档的默认格式，在分割线下面，就可以按照正常的Markdown格式进行写作

title:HelloWord
date:20116-10-18 22:21:02
tags:
---

也可以将Markdown拷贝到/source/_posts目录下

生成博客发布到服务器，安装hexo-deployer-git工具

 npm install hexo-deployer-git --save

提交到服务器上，提交过程中还需要输入github账号和密码

 hexo deploy

成功后，这个时候你就可以打开你的github，进入 repository的setting页面，往下滑，可以看到会显示出你的个人主页网址 http://nnianhou-.github.io就可直接访问博客了

Hexo常用命令

 hexo new "postName" //新建文章
 hexo d -g // 修改后更新博客

Hexo博客Jacman主题的优化

在themes/你的主题/layout/_partial/footer.ejs中最后面添加脚本：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

添加总pv计数和总uv计数

在上面footer.ejs文件最后添加这两个计数脚本：

<span id="busuanzi_container_site_pv">
      Total visits: <span id="busuanzi_value_site_pv"></span>
</span>
<span id="busuanzi_container_site_uv">
      You are Visiter No.<span id="busuanzi_value_site_uv"></span>
</span>

添加文章访问计数

这里我添加到标题右下方，正文上面的地方。在themes/jacman/layout/_partial/post/header.ejs中
class="article-time"> 标签里面添加：

<span id="busuanzi_container_page_pv">
    总阅读<span id="busuanzi_value_page_pv"></span>次
</span>

404页面

直接在根目录下创建自己的404.html或者404.md就可以
推荐使用腾讯公益

<script type="text/javascript" 
   src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
   charset="utf-8" 
   homePageUrl="http://yoursite.com/yourPage.html" 
   homePageName="回到我的主页">
</script>

打赏功能

我们要实现的目标就是只需在themes\jacman\_config.yml文件中添加如下语句：

donate:
  enable: true
  text: 打赏我的人，运气都不会太差~
  wechat: http://ac-fmwkcchq.clouddn.com/079ce0e3beced7de32fa.jpeg
  alipay: http://ac-fmwkcchq.clouddn.com/ccfe5d160b2b94b6e4c0.jpeg
  web: true

我们想要将打赏功能嵌入到每一篇博客当中，所以我们需要改动文章显示的HTML模板。
找到themes\jacman\layout\_partial\post\article.ejs
这就是文章的HTML模板文件，在<div class="article-content">...</div>的下面，<%- partial('footer') %>的上面插入如下HTML代码：

<% if (theme.donate) { %>
    <!-- css -->
    <style type="text/css">
        .center {
            text-align: center;
        }
        .hidden {
            display: none;
        }
        .donate_bar a.btn_donate{
            display: inline-block;
            width: 82px;
            height: 82px;
            background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat;
            _background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat;

            <!-- http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif
                 因为本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果，
                 为了在让打赏按钮显示效果正常 而 添加了以下几行 css，
                 嵌入其它博客时不一定要它们。 -->
            -webkit-transition: background 0s;
            -moz-transition: background 0s;
            -o-transition: background 0s;
            -ms-transition: background 0s;
            transition: background 0s;
            <!-- /让打赏按钮的效果显示正常 而 添加的几行 css 到此结束 -->
        }

        .donate_bar a.btn_donate:hover{ background-position: 0px -82px;}
        .donate_bar .donate_txt {
            display: block;
            color: #9d9d9d;
            font: 14px/2 "Microsoft Yahei";
        }
        .bold{ font-weight: bold; }
    </style>
    <!-- /css -->

    <!-- Donate Module -->
    <div id="donate_module">

    <!-- btn_donate & tips -->
    <div id="donate_board" class="donate_bar center">
        <br>
        ------------------------------------------------------------------------------------------------------------------------------
        <br>
        <a id="btn_donate" class="btn_donate" target="_self" href="javascript:;" title="Donate 打赏"></a>
        <span class="donate_txt">
            <%= theme.donate.text %>
        </span>
            
        
    </div>
    <!-- /btn_donate & tips -->

    <!-- donate guide -->
    
    <div id="donate_guide" class="donate_bar center hidden">
        <br>
        ------------------------------------------------------------------------------------------------------------------------------
        <br>
        <% if(theme.donate.web) { %>
        <div width="100%" align="center"><div name="dashmain" id="dash-main-id-87895f" class="dash-main-3 87895f-0.99"></div></div>
        <script type="text/javascript" charset="utf-8" src="http://www.dashangcloud.com/static/ds.js"></script>
        <% } %>

        <a href="<%= theme.donate.wechat %>" title="用微信扫一扫哦~" class="fancybox" rel="article0">
            <img src="<%= theme.donate.wechat %>" title="微信打赏 Donate" height="190px" width="auto"/>
        </a>
        
          

        <a href="<%= theme.donate.alipay %>" title="用支付宝扫一扫即可~" class="fancybox" rel="article0">
            <img src="<%= theme.donate.alipay %>" title="支付宝打赏 Donate" height="190px" width="auto"/>
        </a>

        <span class="donate_txt">
            <%= theme.donate.text %>
        </span>

    </div>
    <!-- /donate guide -->

    <!-- donate script -->
    <script type="text/javascript">
        document.getElementById('btn_donate').onclick = function() {
            $('#donate_board').addClass('hidden');
        $('#donate_guide').removeClass('hidden');
        }

        function donate_on_web(){
            $('#donate').submit();
        }

        var original_window_onload = window.onload;
        window.onload = function () {
            if (original_window_onload) {
                original_window_onload();
            }
            document.getElementById('donate_board_wdg').className = 'hidden';
        }
    </script>
    <!-- /donate script -->
</div>
<!-- /Donate Module -->
   <% } %>