0000.环境配置

0x00.windows 下

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

0x01.linux 下(Linux mint)

1
sudo apt-get install git
  • Node.js下载 然后打开终端输入以下命令进行解压
1
2
3
4
5
6
$ tar -zxf node-vxxx.tar.gz
$ cd node-vxxx
$ sudo cp -r bin/* /usr/local/bin/
$ sudo cp -r lib/* /usr/local/lib/
$ sudo cp -r include/* /usr/local/include/
Nodejs安装完成

0001.安装 Hexo

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

1
npm install -g hexo-cli

0x00.Start

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

1
2
hexo init
npm install

0x01.本地查看

1
hexo server //(等价的命令)hexo s

后在浏览器中输入

1
http://localhost:4000/

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

0x02.新建文章

1
hexo new "New article"

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

1
2
hexo generate   //生成静态网页以及css js文件
hexo server

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

0010.Github

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

0011.部署

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

1
2
3
4
deploy:
  type: git
  repository: https://github.com/userame/username.github.io.git
  branch: master

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

1
2
hexo generate
hexo deploy

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

0x00.外配置 SSh

打开 git bash

  • 设置 username 和 email
1
2
git config --global user.name "test"
git config --global user.email "test@gmail.com"
  • 生成秘钥
1
ssh-keygen -t rsa -C "test@gmail.com"
  • 最后得到 id_rsa 和 id_rsa.pub 两个文件，把 id_rsa.pub 的内容粘贴到 github 中即可

0100.NexT 主题

0x00.下载

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

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

0x01.使用

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

0101.NexT-配置

0x00.插件安装

1
npm install <插件名>

0x01.卸载插件

1
npm uninstall <插件名>

0x02.多说评论

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

  • 登录后在首页选择 “我要安装”。
  • 创建站点，填写表单。多说域名 这一栏填写的即是你的 duoshuo_shortname
    主题配置文件 中设置：
1
2
# 多说热评文章 true 或者 false
duoshuo_shortname: '多说域名'

0x03.Google 分析

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

1
google_analytics: UA-XXX...

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

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

1
2
3
4
5
6
7
social:
  GitHub: your-github-url
  Twitter: your-twitter-url
  Weibo: your-weibo-url
  DouBan: your-douban-url
  ZhiHu: your-zhihu-url
  # 等等

0x05.文章目录

主题配置文件 中设置：

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

0x06.添加云标签

1
hexo new page "tags"        //新增tags页面
  • 编辑刚才的页面(path\source\tags\index.md)
1
2
3
4
5
6
---
title: TagCloud
date: 2016-01-21 16:12:58
type: "tags"
comments: false     //关闭评论
---
  • 编辑主题配置文件,添加 tags 到 menu 中
1
2
3
4
menu:
  home: /
  archives: /archives
  tags: /tags

0x07.添加 high 一下

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<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>

0x08.开启 RSS 功能

安装插件

1
npm install hexo-generator-feed --save

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

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

0110.报错

0x00.找不到 git 部署

1
ERROR Deployer not found: git

解决办法

1
npm install hexo-deployer-git --save

0x01.部署类型设置 git

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

1
2
3
4
deploy:
  type: git
  repository: git@cnfanhua.github.com:cnfanhua/cnfanhua.github.io.git
  branch: master

0111.参考

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 教程

1000.2016.11.11 16:50:16 更新

0x00.绑定个人域名

  • Step1.我是从万网购买的域名。
  • Step2.在你的个人博客目录下/source 新建 CNAME(PS，无扩展名)，文件内容为你的域名(如：xxx.com 不带“http://”和“www”)
  • Step3.重要的一步，在域名控制台新增解析设置，如下
  • —–3.1.记录类型 A 主机记录 www 记录值 192.30.252.154 其他默认
  • —–3.2.记录类型 A 主机记录@ 记录值 192.30.252.154 其他默认
  • Step4.更新你的博客，依次执行 hexo clean\ hexo g -d
  • Step5.waiting

0x01.hexo g -d 之后报 404 错误

本地测试 hexo s 正常，但是提交到服务器之后报 404 的错误，一些资源加载失败。原因是 github 升级了 jekyll
解决方案：@Issues1220
在博客文件夹根目录.deploy_git 文件夹下新增.nojekyll 文件。
How to Create it?

  • Step1.CMD->notepad
  • Step1.文件-另存为-选择目录输入”.nojekyll”-保存