[教程]基于Hexo主题&Github平台的个人博客搭建，以Chic主题为例

1. 安装Git和NodeJS

安装Git
- Window用户可在浏览器中下载Git，从Git官网直接下载 Git - Downloads (git-scm.com)，选择默认安装即可。安装完毕，在开始菜单里找到“Git”->“Git Bash”，或者在文件夹中点击鼠标右键找到“Open Git Bash here”，点击出现Git的命令行窗口即表示安装成功。
- 绑定GitHub账号，打开“Git Bash”，在命令框中输入以下两行命令。
  1
  2
  git config --global user.name “用户名”
  git config --global user.email 邮箱号
- 查看配置信息，确认是否配置成功。
  1
  2
  git config --global user.name
  git config --global user.email
安装NodeJS
- 从NodeJS官网 nodejs.org安装并配置环境变量，具体教程可查看CSDN中Nicolecocol老师的教程Node.js安装及环境配置超详细教程【Windows系统】_windows 安装nodejs-CSDN博客。
- 安装后用以下命令确认是否安装成功。
  1
  2
  3
  git version
  node -v
  npm -v

2. 安装Hexo

使用npm安装Hexo，在命令Git Bash命令框中输入以下命令。
1
npm install -g hexo-cli
安装Hexo后，在合适位置新建一个文件夹（存放你的博客代码），在该文件夹打开“Git Bash”，在命令框中执行以下命令，Hexo会在文件夹中生成所需文件夹。
1
2
3
hexo init MyBlog
cd myBlog
npm install
以上命令运行成功后，一个基础的本地博客就建立完成了，之后运行 hexo s命令，然后在浏览器中输入 localhost:4000 回车查看效果。

3. 加载主题

在官网hexo.io/themes/找到自己喜欢的主题下载，我接下来以Chic主题演示。
- 点击Chic在GitHub下载hexo-theme-Chic文档
- 点击Visit预览主题
下载主题后，将文件存放在 MyBlog/themes文件夹下。
打开 MyBlog/_config.yml文件，修改 theme为 hexo-theme-Chic(需与主题文件名一致)

4. 修改配置信息

打开`/MyBlog/themes/hexo-theme-Chic/_config.yml`文件

修改博客名
1
2
# Header
navname: Brando-R's Blog
修改头像下显示的名字
1
2
# Profile
nickname: Brandp-R(猫猫)

修改个人签名

1 2	### this variable is MarkDown form. description: 国主菌子别演我

修改个人头像

1 2	# 个人头像 avatar: /image/avatar.jpg

修改个性签名下的超链接，选择需要的超链接，不需要的用# 注释

links:
  Blog: /archives
  # Category:
  # Tags: 
  # Link:
  # Resume:
  # Publish:
  # Trophy:
  # Gallery:
  # RSS:
  # AliPay:
  # ZhiHu: 
  # LinkedIn:
  # FaceBook:
  # Twitter:
  # Skype:
  # CodeSandBox:
  # CodePen:
  # Sketch:
  # Gitlab:
  # Dribbble:
  # Instagram:
  # Reddit:
  # YouTube:
  # QQ: 
  # Weibo:
  # WeChat:
  Github: https://github.com/Brando-R

打开 MyBlog/_config.yml文件，修改文章作者名字。该文件夹中的其他属性修改可查看前端小黑老师的博客个人博客搭建笔记----hexo根目录下的_config.yml配置解释-CSDN博客，真的很详细！
1
2
3
4
5
6
7
8
9
# Site 网站相关的一些信息配置
title: Hexo
subtitle: ''
description: ''
keywords:
# 修改为自己的名字
author: Brando-R(猫猫)
language: en
timezone: ''
使用hexo s命令可在在浏览器输入localhost:4000查看效果。

5. 博客美化（添加特效）（如不需要可跳过这一步）

蜘蛛网特效：在theme/hexo-theme-Chic/layout/layout.ejs中添加代码（代码来源于b站up主DDID迪，有需要可查看他的博客搭建教学视频[教程]Hexo & Github搭建自己的专属博客_哔哩哔哩_bilibili也是用Chic主题：

<script>
!
function() {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1), //置于主页面背后
o: n(i, "opacity", .5), //线条透明度
c: n(i, "color", "0,0,0"), //线条颜色
n: n(i, "count", 100) //线条数量
}
}
function o() {
a = m.width = window.innerWidth ||
document.documentElement.clientWidth || document.body.clientWidth,
c = m.height = window.innerHeight ||
document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function(i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 :
1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1,
1), e = x + 1; e < u.length; e++) n = u[e],
null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l
= o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o,
i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t /
2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y),
r.lineTo(n.x, n.y), r.stroke()))
}),
x(i)
}
var a, c, u, m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(n) {
window.setTimeout(n, 1e3 / 45)
},
w = Math.random,
y = {
x: null,
y: null,
max: 2e4
};
m.id = l,
m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z +
";opacity:" + d.o,
e("body")[0].appendChild(m),
o(),
window.onresize = o,
window.onmousemove = function(n) {
n = n || window.event,
y.x = n.clientX,
y.y = n.clientY
},
window.onmouseout = function() {
y.x = null,
y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1;
s.push({
x: h,
y: g,
xa: v,
ya: p,
max: 6e3
})
}
u = s.concat([y]),
setTimeout(function() {
i()
},
100)
} ();
</script>

雪花特效，该特效来源于CSDN老师的博客hexo+next添加雪花飘落背景效果_hexo 落叶动效-CSDN博客，博客中有另一个雪花特效。

在themes/hexo-theme-Chic/source/js目录下新建snow2.js文件，添加如下代码

/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200; /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function (callback) {
        setTimeout(callback, 1000 / 60);
    };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function () {
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function () {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
    this.size = Math.random() * flakeSize + 2; /* 形状 */
    this.maxSize = flakeSize; /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
    this.fallSpeed = fallSpeed; /* 坠落速度 */
    this.velY = this.speed; /* Y方向速度 */
    this.velX = 0; /* X方向速度 */
    this.stepSize = Math.random() / 30; /* 步长 */
    this.step = 0 /* 步数 */
}
flakeMove.prototype.update = function () {
    var x = this.x,
        y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function (width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function (ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 画雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /*  一帧一帧的画 */
    this.loop = requestAnimationFrame(function () {
        drawSnow.apply(that);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({
    maxFlake: 60
});
snow.start();

在theme/hexo-theme-Chic/layout/layout.ejs中添加代码

<!-- 引入jQuery -->
<script type="text/javascript" src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<!-- 雪花特效2 -->
 <script type="text/javascript" src="/js/snow2.js"></script>

在theme/hexo-theme-Chic/_config.yml中添加代码、
1
2
3
# 雪花特效2
snow2:
enabled: true

其他各种特效可以查看Hexo 博客美化合集（不断更新） - 知乎 (zhihu.com)，包括看板娘和点击特效各种巴拉巴拉…

6. 将博客部署到Github

在GitHub创建博客仓库
- 进入GitHub主页后点击new新建一个仓库，仓库名为用户名.github.io！！！（这里一定要注意不能写错）

配置SSH key

将本地博客部署到GitHub前需要先配置SSH key

# 如果是第一次使用git需要进行前面两部
git config --global user.name "用户名"
git config --global user.email "邮箱地址"
# 使用 ssh-keygen 生成私钥和公钥：
ssh-keygen -t rsa -C '邮箱地址（与上面的一致）'

之后三次回车，如果显示出密钥和公钥的地址，则表示生成成功。

找到你的密钥和公钥，地址是在C:\Users\Brando-R\.ssh
在GitHub中点击头像，点击Settings->SSH and GPG keys里添加SSH key，点击==New SSH key==
将生成的公钥 id_rsa.pub 文件里的内容复制到 Key 里面，然后选择添加，GitHub 会提示输入密码确认。
接着打开git bash,输入以下命令，将主机添加到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证实添加成功。

将本地和GitHub连接起来，

配置参数，打开MyBlog/-config.yml文件，在文件末尾填写以下参数。

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://github.com/Brando-R/Brando-R.github.io	# 你的仓库链接
  branch: master	# push到master分支

安装部署插件 hexo-deployer-git打开“Git Bach“，输如指令：
1
npm install hexo-deployer-git --save

执行以下指令部署上传

1 2	hexo g # 上传 hexo d # 部署到GitHub上

在浏览器输入https://用户名.github.io，即可打开自己的博客。

7. 上传文章

博客搭建好之后我们就可以开始在博客上上传文章了！！！

新建文章
- 执行以下命令后，程序会在source/-posts新建一个markdown格式文件，具体的markdown语法可在官网Markdown 基本语法 | Markdown 官方教程查看学习
1
hexo new '文章标题'

文章上传

# hexo clean 清除缓存文件
# hexo g 生成文件
# hexo d 部署到GitHub上
hexo clean && hexo g && hexo d

如果要在本地查看文章，则输入hexo s命令，然后在浏览器打开localhost:4000即可。

8. 博客搭建过程中遇到的各种问题

打开博客中的tag，category和about出现404

首先，我们做完上面的步骤其实是不完全完整的，因为我们还没有创建tag，category和about页面，其他主题也可能出现类似问题，所以我们需要查看相关主题的配置文档，Chic文档点击传送门：hexo-theme-Chic/README-CN.md，文档中有相关创建tag，category和about页面的方法以及其他内容。

如果你只需要解决创建tag，category和about页面的问题，可以直接看下面内容
- 执行以下命令
  1
  2
  3
  hexo new page tag
  hexo new page category
  hexo new page about
- 打开新建的页面source/tag/index.md,添加以下代码
  1
  2
  3
  4
  5
  // source\tag\index.md
  ---
  title: Tag
  layout: tag
  ---
- category和about页面同理，layout字段键值为categoryorabout。
git无法生成SSH key

这个是我博客搭建过程中遇到的最大的问题，因为以前一直使用idea写代码，使用没有注意到这个问题，所以解决起来比较麻烦。

之所以会出现无法再user文件夹下生成.ssh文件，是因为我的用户名是中文导致的，所以如果你的用户名是中文的话建议去该成英文的（血与泪的教训）
文章上传/部署成功，但是博客不更新

出现这个问题大概率就是浏览器导致的，在你打开直接的博客进入一个页面时，浏览器加载了你以前的缓存页面，导致你看到的是以前的博客。这个的解决方法也很简单。
- 在你需要清理缓存的网页，点击F12打开，打开控制台，在找到应用程序->存储，然后点击清理网站数据即可
部署到Github失败

如果是显示该图的错误信息的话，大概率是网络问题，你只需要打开你GitHub的博客仓库，然后重新使用hexo clean && hexo g && hexo d命令即可，不行的话就多试几次！
博客上的图片无法加载

在你出现这个问题的时候应该是你已经开始写代码的时候了，解决方法可以看知乎这篇教程解决Hexo+Github+Typora图片无法正确显示的问题，相当有用，可以直接下滑到底部查看最终解决方案。

9. 最终感言

最后的最后，这个搭博客的过程对我这个计算机小白来说是真的非常艰难的，真的很感谢我的好朋友欧猫子对我的技术支持，指路他的博客oyy0v0😼，以及他的博客教程建立博客|oyy0v0😼 。

1. 安装Git和NodeJS

安装Git

安装NodeJS

2. 安装Hexo

3. 加载主题

4. 修改配置信息

打开/MyBlog/themes/hexo-theme-Chic/_config.yml文件

5. 博客美化（添加特效）（如不需要可跳过这一步）

6. 将博客部署到Github

在GitHub创建博客仓库

配置SSH key

将本地和GitHub连接起来，

7. 上传文章

8. 博客搭建过程中遇到的各种问题

打开博客中的tag，category和about出现404

git无法生成SSH key

文章上传/部署成功，但是博客不更新

部署到Github失败

博客上的图片无法加载

9. 最终感言

打开`/MyBlog/themes/hexo-theme-Chic/_config.yml`文件