Fork me on GitHub

HEXO搭建及主题配置

Posted on | 浏览 次
Words count in article: 2,101 字

如何搭建属于自己的静态博客

看别人都有自己的私有博客，而且页面也相当美观，自己甚是羡慕。所以就在网上找了许多的资料，发现许多人都在用 hexo 作为自己博客的框架，所以自己也尝试者在本地搭建一个
属于自己的私人博客。可以在自己没事的时候，发发牢骚；也可以记录自己在学习的路上所遇到的问题，及自己的解决方案。
以下就是本人自己搭建私有博客时的步骤，和自己所遇到的坑，以及填坑的过程；想来想去就拿这次的经历作为自己第一次的博客写作内容吧！！！本来是想在自己 kali linux 上安装
的，结果就稀里糊涂的在 win10 上安装了(尴尬ing)!!! 如果以下文章对你有点帮助，别忘了star一下，https://github.com/NEOscavenger00 ^_^

一、使用Hexo和GitHub来部署自己的博客

1.前期准备工作

(1)、安装node.js

安装nodejs是为了生成静态页面，因为hexo是一款基于Node.js的静态博客框架。到Node.js官网下载相应平台的最新版本，这里给个链接@nodejs，nodejs
一路按安装即可。
安装成功后，打开 cmd (win终端，快捷键是 ctrl + r 输入 cmd ) cmd 查看是否安装成功； cmdnode 如果没有成功有可能需要手动配置 nodejs 的环境变量，如何配置
这里就不再赘述了。网上资料有很多。

(2)、安装Git

安装Git是为了利用GitHub中的github.io来做博客的远程创库和服务器，之后也可以使用云服务来作为自己博客的服务器；本人为屌丝一个，就直接使用GitHub作为自己的远程服务器了，想使用云服务和创建自己特有的域名的博客，
在这里我就不介绍如何搭建了。如果你很感兴趣，不妨在网上查找资料，这类的资料还是很多的。
首先下载@git, 然后点击安装,以下是我的安装步骤：git_1 , git_2 , git_3 , 其中的Git Bash就是我们主要用到的。安装好git后，还需要一个
GitHub账号，如何注册GitHub账号，这里也不赘述了；这里给个链接自己去注册吧。@GitHub

(3)、安装hexo

使用npm来安装hexo。在电脑任意位置Shift+鼠标右键，打开Git Bash npm执行命令

1
$ npm install -g hexo

npmhexo 然后就是漫长的等待，npm_hexo 如果失败，可以使用淘宝镜像来执行；命令如下：

1
$ npm install -g hexo-cli

安装完成后，在输入命令，验证是否安装正确。

1
$ hexo -v

hexo_v

2.部署本地站点

(1)、部署hexo

在你想创建博客的盘符下面或者文件下面，打开Git Bash，执行命令；

1
$ hexo init hexoweb

也可以

1
$ hexo i hexoweb //i 是init的缩写

hexo_init
命令中init 后跟的是你博客文件的名字，我这里写的是hexoweb，你也可以写你自己喜欢的名字；然后执行一下命令；

1
2
3
$ cd hexoweb //切换到项目根目录
$ hexo g  //g是generetor的缩写
$ hexo s  //s是server的缩写

hexo_g, hexo_s
然后在浏览器中输入 localhost:4000查看页面是否生成。
local 看到以上图片中的样子，就说明成功了，这就是hexo默认的博客主题。现在你可以在这个文件下面开始写自己的博客了。
什么？？？你说这个默认主题你不喜欢，想换一个自己喜欢的主题。换主题那也行的，那下面我就教你如何换hexo的主题。

(2)、选择hexo主题

首先给你几个链接，供你参考:

https://hexo.io/themes/ 这里有很多hexo主题可供选择
https://www.zhihu.com/question/24422335 知乎上hexo主题的评价与选择
https://github.com/NEOscavenger00 我的GitHub，别忘点颗星 ^^
https://neoscavenger00.github.io/ 这是我的博客主页
我这里使用的 next主题，主要是因为这个主题容易上手，而且是最多人喜欢用的一个大众主题^^。首先，在项目根目录下执行命令

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

然后在项目先会生成一个next文件，具体路径D:\hexoweb\themes,我们的主题就在这个文件下，后面我所要修改的主题各个设置，都会在这个文件下进行修改；
下载主题完成后，找到项目根目录下的_config.yml，具体路径为D:\hexoweb，config 使用编辑器打开该文件，然后找到theme字段，
把landscape改为next。nexi 然后在终端执行以下命令：

1
2
3
$ hexo clean //清除缓存
$ hexo g //重新生成代码
$ hexo s //本地部署

然后打开浏览器访问 localhost:4000 查看效果。next_l
如果出现这个样式，就说明主题添加成功了。next主题有三种选择，上面的是默认最简洁的一种，如果觉得不好看，可以选择修改主题文件下的_config.yml文件来确定要哪个主题。

Muse - 默认 Scheme，这是 Next 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新

我这里选择的是Mist的主题。mist 然后重新执行上面的命令，打开localhost:4000，查看效果。mist_s
到这里本地私有博客就算基本完成了，下面开始将如何利用GitHub建立远程私有博客。之后我还会教大家如何修改头像，添加标签、炫酷的页面效果、版本声明等等。

二、部署GitHub

1.创建自己的GitHub项目

(1)、创建项目

这里就可以用到我们前面注册的GitHub账号了。首先创建一个新的项目:git_new

(2)、按格式输入项目名称：

git_io

(3)、点击setting,设置一个page

setting
往下翻找到GitHub Pages，进行以下修改即可
page
这个时候访问以下你的链接（输入地址：用户名.github.io），就可以看到效果了，我的主页已经覆盖掉了，就用网上的一张图片代替
my_page

(4)、本地链接远程仓库

打开Git Bash,执行以下命令，生成ssh-keygen

1
2
3
4
$ ssh-keygen -t rsa  //中间出现什么都不用管，一直Enter下去
$ cd .ssh
$ ls
$ cat id_rsa.pub // 将出现的key 复制下来，等会要用(也就是下图我涂掉的一块)

key
然后打开GitHub主页，按照以下的步骤操作即可；
setting_1 setting_2 setting_3
这样以后就可以免密码向GitHub仓库push代码了；
之后，修改hexo根目录下的配置文件D:\hexoweb\_config.yml，deploy 修改好后，再次确定格式有没有写错，该对齐的要对齐，该留空格的要留空格。
不知道项目地址的，打开自己的GitHub主页点击刚才新建的项目；hub_io

(5)、 结尾部署

执行命令

1
2
$ npm install hexo-deployer-git --save //这是安装hexo的插件
$ hexo d //部署命令，就靠它链接远程仓库

等待一会，完成后，再访问你的网站（还记得吗？就是你GitHub上的，用户名.github.io），就会发现神奇的一幕，你在本地创建的私有博客，竟然出现在远程仓库了。
web
以后你也可以自己，写博客发布了，只要将你的网站给别人，别人就可以看到你写的博客了，是不是很开心。当然以后你也可以自己买云服务，将自己的博客部署到自己的服务器上。当然这是后话，下面我教你，发布自己的第一篇博客

(6)、发布第一篇博客

执行命令

1
2
3
$ hexo new "firstArticle"
 //hexo n 也可以 
 //你自己的博客名称，名为firstArticle.md的文件会建在目录D:\hexoweb\source\_posts下。

然后用编辑器将文章写好后，在项目根目录下执行以下命令：

1
2
$ hexo g //重新生成代码
$ hexo d //发布到远程仓库上

现在可以访问自己的网站查看一下吧！！！
done

填坑排雷

下一篇我将写以下hexo的各种配置

1
2
3
4
5
6
7
8
9
10
var brief_introduction = {
  nickName  : "NEOscavenger",
  site : "https://github.com/NEOscavenger00"
};
while(alive){
    eat();
    sleep();
    code();
    repeat();
}

作者：@NEOscavenger00
2018.06.06

你的鼓励就是对我最大的支持！