hexo+node.js+github的博客搭建教程

发表于

菜的一批的hexo+node.js+github搭建个人博客的教程

hexo大概的原理

hexo基于node.js框架，可以通过简单的命令生成一个静态的html页面

1
2
hexo generate
hexo g

以及通过读取配置文件中的信息一键化部署到github

1
2
hexo deploy
hexo d

我们需要做的只有配置好hexo环境，然后使用命令来生成新文章

1
2
hexo new "文章标题"
hexo n "文章标题"

注意hexo生成的是静态页面，也就是说其实所有的网页生成在generate的时候就已经完成，每次对文章有改动，都必须重新generate，然后再部署到github，这个时候博客才会更新。

node.js环境

node.js官网
node.js国内镜像（好像是阿里爸爸的）
推荐用阿里爸爸的，毕竟比较快。。

Windows

win就是懒人操作嘛，，下载–解压–安装–疯狂点next，连环境变量都帮你配好

Linux

我对linux不算是特别熟悉，命令可能有错，你们谨慎Ctrl c+v

先下载

1
wget https://npm.taobao.org/mirrors/node/v8.9.0/node-v8.9.0-linux-x64.tar.xz

然后解压

1
tar xvf node-v8.9.0-linux-x64.tar.xz

然后就安装完成了，不过这个时候node命令的环境变量还没有配置，这个配置就自己百度/Google吧，方法有好多种

Mac

ummm个人猜测和Linux差不多

检查安装

在命令行里面输入

1
2
node -v
npm -v

如果查看到了版本号，那就说明安装+配置完毕了，可以开始使用hexo了。

hexo下载

首先，找一个看起来比较顺眼的文件夹，我们在这个文件夹里面放我们的hexo和blog

1
2
3
npm install hexo-cli -g
npm install hexo --save
hexo -v

依次键入以上命令后，可以看见hexo的一些版本信息

接下来生成blog

1
hexo init blog

然后进入blog目录
继续输入

1
npm install

npm install命令会根据json配置文件自动安装所需的库。

这个时候就已经完成了，然后我们就可以生成blog页面

1
2
3
hexo g
hexo d
hexo s

https://xuanwo.org/2015/03/26/hexo-intor/
https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog/
注意hexo s命令是在本地建立服务器，根据提示的网址进行访问，我们就可以看见这个网页了。（当然，hexo s命令被终止了我们就看不见了）

一般来说，这个服务器监听的端口是4000，在浏览器中尝试访问一下这个端口

http://localhost:4000/

可以看见自己的博客了。

部署到github

其实也可以部署到其他地方，因为静态网页已经生成了，要做的只是让他可以被获取到。

配置github pages

首先需要一个存放hexo页面的仓库

这里我们new一个，记住这个仓库的命名方式必须是 “用户名”+”.github.io”
（比如我的用户名是xiaoyuoshu，这里仓库名就应该是xiaoyuoshu.github.io）

然后点击这个仓库的settings，在option菜单里下拉找到github pages，然后开启Automatic page generator。
这个时候访问
https://xiaoyuoshu.github.io/
应该就可以访问成功。（请改成你自己的用户名，谢谢）

配置deploy config

这个时候我们已经有了两个资源，1.我们本地的博客静态html。2.一个可以访问并获取到静态html的github仓库。
现在要做的就是把本地的上传到github上。

1
npm install hexo-deployer-git --save

先安装deploy到github上的node扩展。
在blog目录下打开_config.yml文件（yml里面不要随便打空格和回车和换行，格式要求极其严格。）然后下拉，找到最底下的deploy,按照如下格式修改他，还是记住把所有的我的用户名换成你的！！！

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

然后保存这个文件。
我们再使用

1
hexo d

就可以部署到github了，这个时候再打开博客的链接，就可以看见自己的博客了。

写文章

写文章使用的是markdown语法。
这里我们先在blog目录下

1
hexo new "文章标题"

然后

1
2
cd source
cd _posts

这个目录就是我们的文章目录了

1
dir

我们就可以看见我们的所有文章了，这个时候应该有一个helloworld.md和一个我们新建的文章标题.md

使用文本编辑器打开这个新的文章标题.md文件，可以看到开头是一段配置，不用管。

把写好的markdown文本复制到配置之后，保存

1
2
hexo g
hexo d

就可以看见我们的文章了。

gaoji配置

主题

嫌博客页面太丑怎么办，，我们来换个主题吧。

首先，默认的主题都是存在themes目录下的，有几个主题就有几个文件夹。
这个主题就自己去网上找吧，蛮多的，甚至还有二刺猿主题？？？

下载好之后，还是进入_config.yml文件
找到这一段

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: kael

这里我的主题是kael，假设要换成landscape，就把kael替换掉就可以了。注意冒号和主题名之间有一个空格，这个空格别删掉了。

然后

1
2
3
hexo clean
hexo d
hexo s

就可以看见更换后的主题啦。

其他

其他的功能我也没怎么多用，不敢细讲，不过谷歌和百度上超多教程。我就列举一下吧。

  1. 配置域名，如果嫌带github.io的域名太low，可以自己去买一个域名，然后解析到github给你分配的ip
  2. 配置文章标签
  3. 配置文章目录
  4. 配置页面中的一些链接
  5. 等等

其他

hexo已经是给小白搭建博客的福音了，希望各位常写博客，不要跟我一样当鸽子。

在以后能力强大了之后，我们可以自己购买服务器，并使用一些比较火的框架（如worldpress）搭建自己的博客，并实现更多的功能。

互勉