Main
Main
文章目录
  1. 0000.环境配置
    1. 0x00.windows下
    2. 0x01.linux下(Linux mint)
  2. 0001.安装Hexo
    1. 0x00.Start
    2. 0x01.本地查看
    3. 0x02.新建文章
  3. 0010.Github
  4. 0011.部署
    1. 0x00.外配置SSh
  5. 0100.NexT主题
    1. 0x00.下载
    2. 0x01.使用
  6. 0101.NexT-配置
    1. 0x00.插件安装
    2. 0x01.卸载插件
    3. 0x02.多说评论
    4. 0x03.Google 分析
    5. 0x04.社交链接,将在侧栏中显示
    6. 0x05.文章目录
    7. 0x06.添加云标签
    8. 0x07.添加high一下
    9. 0x08.开启RSS功能
  7. 0110.报错
    1. 0x00.找不到git部署
    2. 0x01.部署类型设置git
  8. 0111.参考
  9. 1000.2016.11.11 16:50:16更新
    1. 0x00.绑定个人域名
    2. 0x01.hexo g -d 之后报404错误

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

0000.环境配置

0x00.windows下

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

0x01.linux下(Linux mint)

  • Git安装
    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
<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”-保存
支持一下
  • 微信扫一扫
  • 支付宝扫一扫