Hexo+Next搭建Github个人静态博客

经过我几天的努力，用hexo搭建的博客终于好了。欢迎莅临

废话不多说。

环境配置

• Node.js(必须) 一路默认安装即可。
• 安装Git(必须) 一路默认安装即可。
• Github账号(必须)

安装Hexo

nodejs和git安装完成后，打开’git bash’安装hexo

npm install -g hexo-cli

Start

新建一个文件夹(如E:\Hexo)，在此文件夹中执行命令

hexo init
npm install

本地查看

hexo server //hexo s

后在浏览器中输入 http://localhost:4000/

此时，会有一篇文章hello world,对应的文件为 E:\Hexo\source_posts\hello-world.md
文章用markdown语法写.

新建文章

hexo new "New article"

会新建一个名为’New article’的文章，执行以下命令之后查看。

hexo generate   //生成静态网页以及css js文件 存放于public文件夹中
hexo server

至此，本地博客搭建完毕。下一步移植到Github

Github

新建repository,项目名必须是:name.github.io(name是你的账号名)。
我的账号名是cnfanhua,新建的项目名也就是cnfanhua.github.io

部署

在你的hexo文件夹中有个重要的文件_config.yml,打开编辑,把’cnfanhua’换成你的账号名

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

执行下列命令后部署(部署前，需要配置SSh，否则失败)。

hexo generate
hexo deploy　　//上传至github 代替 git push...

至此，个人博客搭建完成。
注意:每次修改后 需要 hexo g 命令保存 然后hexo d 命令上传

外配置SSh

打开git bash

• 设置username和email

   

• git config --global user.name "test"
  git config --global user.email "test@gmail.com"

• 生成秘钥

• ssh-keygen -t rsa -C "test@gmail.com"

• 最后得到id_rsa和id_rsa.pub两个文件，把id_rsa.pub的内容粘贴到github中即可

NexT主题

下载

gitHub,clone到你的博客目录\themes目录下(E:\Hexo\themes下)

git clone git@github.com:iissnan/hexo-theme-next.git

使用

打开站点总配置_config.yml(即E:\Hexo下的_config.yml),找到theme换成next即可(theme: next),记得每一个冒号后面要有一个空格

NexT-配置

插件安装

npm install <插件名>

卸载插件

npm uninstall <插件名>

多说评论

使用多说前需要先在 多说 创建一个站点。具体步骤如下：

• 登录后在首页选择 “我要安装”。
• 创建站点，填写表单。多说域名 这一栏填写的即是你的 duoshuo_shortname
  主题配置文件 中设置：

　　　　　　# 多说热评文章 true 或者 false
　　　　　　duoshuo_shortname: '多说域名'

Google 分析

登陆google分析网站获取ID
编辑 站点配置文件，新增字段 google_analytics，值设置成你的 Google 跟踪 ID。

google_analytics: UA-XXX...

社交链接，将在侧栏中显示

将以下代码放到站点配置文件

 

social:
  GitHub: your-github-url
  Twitter: your-twitter-url
  Weibo: your-weibo-url
  DouBan: your-douban-url
  ZhiHu: your-zhihu-url
  # 等等

 

文章目录

主题配置文件 中设置：

sidebar: post   #自动展示有目录的文章的目录
#sidebar: always    #总是展示
#sidebar: hide      #隐藏

添加云标签

hexo new page "tags"        //新增tags页面

　　编辑刚才的页面(path\source\tags\index.md)

---
title: TagCloud
date: 2016-01-21 16:12:58
type: "tags"
comments: false     //关闭评论
---

　　编辑主题配置文件,添加 tags 到 menu 中

menu:
  home: /
  archives: /archives
  tags: /tags

添加high一下

在 Hexo\themes\next\layout_partials\header.swig 中的 ul 标签加入如下 li 代码：

<li> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() {
    function c() {
        var e = document.createElement("link");
        e.setAttribute("type", "text/css");
        e.setAttribute("rel", "stylesheet");
        e.setAttribute("href", f);
        e.setAttribute("class", l);
        document.body.appendChild(e)
    }
 
    function h() {
        var e = document.getElementsByClassName(l);
        for (var t = 0; t < e.length; t++) {
            document.body.removeChild(e[t])
        }
    }
 
    function p() {
        var e = document.createElement("div");
        e.setAttribute("class", a);
        document.body.appendChild(e);
        setTimeout(function() {
            document.body.removeChild(e)
        }, 100)
    }
 
    function d(e) {
        return {
            height : e.offsetHeight,
            width : e.offsetWidth
        }
    }
 
    function v(i) {
        var s = d(i);
        return s.height > e && s.height < n && s.width > t && s.width < r
    }
 
    function m(e) {
        var t = e;
        var n = 0;
        while (!!t) {
            n += t.offsetTop;
            t = t.offsetParent
        }
        return n
    }
 
    function g() {
        var e = document.documentElement;
        if (!!window.innerWidth) {
            return window.innerHeight
        } else if (e && !isNaN(e.clientHeight)) {
            return e.clientHeight
        }
        return 0
    }
 
    function y() {
        if (window.pageYOffset) {
            return window.pageYOffset
        }
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    }
 
    function E(e) {
        var t = m(e);
        return t >= w && t <= b + w
    }
 
    function S() {
        var e = document.createElement("audio");
        e.setAttribute("class", l);
        e.src = i;
        e.loop = false;
        e.addEventListener("canplay", function() {
            setTimeout(function() {
                x(k)
            }, 500);
            setTimeout(function() {
                N();
                p();
                for (var e = 0; e < O.length; e++) {
                    T(O[e])
                }
            }, 15500)
        }, true);
        e.addEventListener("ended", function() {
            N();
            h()
        }, true);
        e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
        document.body.appendChild(e);
        e.play()
    }
 
    function x(e) {
        e.className += " " + s + " " + o
    }
 
    function T(e) {
        e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
    }
 
    function N() {
        var e = document.getElementsByClassName(s);
        var t = new RegExp("\\b" + s + "\\b");
        for (var n = 0; n < e.length; ) {
            e[n].className = e[n].className.replace(t, "")
        }
    }
 
    var e = 30;
    var t = 30;
    var n = 350;
    var r = 350;
    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var s = "mw-harlem_shake_me";
    var o = "im_first";
    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var a = "mw-strobe_light";
    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var l = "mw_added_css";
    var b = g();
    var w = y();
    var C = document.getElementsByTagName("*");
    var k = null;
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            if (E(A)) {
                k = A;
                break
            }
        }
    }
    if (A === null) {
        console.warn("Could not find a node of the right size. Please try a different page.");
        return
    }
    c();
    S();
    var O = [];
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            O.push(A)
        }
    }
})()    '>High一下</a> </li>

开启RSS功能

安装插件

npm install hexo-generator-feed --save

后编辑主题配置文件_config.yml,添加如下代码

rss: /atom.xml #rss地址  默认即可

报错

找不到git部署 ERROR Deployer not found: git

解决办法

npm install hexo-deployer-git --save

部署类型设置git

hexo 3.0 部署类型不再是github,而是git,修改主题配置文件_config.yml中deploy中的type为git

deploy:
  type: git
  repository: git@cnfanhua.github.com:cnfanhua/cnfanhua.github.io.git
  branch: master

参考

1.hexo
2.创建GitHub技术博客全攻略
3.搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门
4.HEXO+Github,搭建属于自己的博客
5.Hexo搭建Github静态博客
6.hexo系列教程：（三）hexo博客的配置、使用
7.hexo系列教程：（二）搭建hexo博客
8.NexT
9.廖雪峰Git教程