hexo+github搭建博客

一直都想搭建一个自已的博客,用来记录自学编程的苦逼历程,最近终于腾出手开始了。

在网上搜了很多资料,综合各种因素后,决定用Hexo和github来搭建博客。网上相关的资料倒是很多,但是我依旧踩了很多坑,历经了九九八十一难才稍稍修炼成人形,其中心酸难以言说。故此我决定开篇就简述一下此博客的诞生史,自我反思并整理一下思路,也希望能给需要的人一些帮助。

环境准备

安装Git

下载并安装Git,去Git官网下载windows下面的最新版本即可(本人电脑是win7 32位)。接下来一直点next安装,若有疑问也可去网上搜安装教程。此处很简单,相信你不会遇到问题的。

安装Node.js

点击Node.js下载适合你当前系统的版本,推荐LTS版本,当前最新LTS版本是8.11.1 (包括 npm 5.6.0),我用的就是这一版。

安装好后打开cmd命令窗口(用git的CMD也可以),运行node -v命令来判断安装是否成功

1
2
$ node -v
v8.11.1

然后运行 npm -v 命令。

1
2
$ npm -v
5.6.0

安装Hexo

接下来是重点中的重点,安装hexo。进行到这一步,错误就开始出现了,我也是在这一步开始不断踩雷。
hexo的安装命令在网上可以搜索到两种方法,第一种:
npm install hexo-cli -g

npm install hexo –save

hexo -v

hexo init

npm install

hexo g

hexo s

我用这种方法安装的hexo不完整,hexo根目录中只有两个文件,不知道具体是什么原因造成的,所以我用了以下方法进行安装:

安装:在git命令框中输入npm install -g hexo

初始化:hexo init

npm install

建立本地连接:hexo server 或者 hexo s(hexo s是hexo server的简写)
此时访问https://localhost:4000 就可以出现本地访问页面,但若是按ctrl+C的话,就会停止本地服务,则页面不可见。

建立仓库

注册github账号并新建仓库

注册账号很简单,我就不多说了.在此提醒一下创建仓库时需要注意的地方

  1. 仓库名字一定要是 你的账户名字.github.io

    比如说我的账户名字是SuoerGintoki,那么我新建的仓库名字就是SuperGintoki.github.io

    注意:此处有个问题,网上有人说仓库名不能有大写,如果你的账户名有大写的话需要重新注册,但名字有大写并没有影响到我目前的操作,如果大家不放心,没有github账户的新用户可以考虑注册全部小写的用户名。

  2. 如果是第一次使用git和github,需要配置git的个人信息,生成密匙,并将公匙添加到github上,此处较为简单,不再详述。

将git与github page联系起来

配置_config.yml文件

打开根目录下的_config.yml文件,修改如下:

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

git@github.com:SuperGintoki/SuperGintoki.github.io.git 中的用户名改为你的(即git@github.com:你的用户名/你的用户名.github.io.git)。

注意:

  1. 此处repo地址的填写网上有好几种版本,且大部分都填的是https://……,一般来说既然前面配置了ssh key,此处最好要用ssh的方式,否则会出现错误。
  2. 修改配置时,冒号后面一定要加空格!

发布第一篇博客

部署博客至github

输入如下命令:

1
2
npm install hexo-deployer-git --save  //在生成及部署文章之前,需要安装一个扩展
hexo d // 部署的命令

通过https://你的用户名.github.io即可访问你的博客了(可能要等上几分钟才会出现)。

发布博客

在根目录(就是你装hexo的文件夹)执行如下命令

1
hexo new post "article title"   //会在source\_posts下面生成一个名字为article-title的md文件

用mrakdown编辑器打开并编辑article-title.md,完毕后运行如下命令:

1
2
3
hexo clean   //首先清除以下public下的文件
hexo g //hexo generate的简写 //生成
hexo d //hexo deploy的简写 //部署

输入你博客的网址,就可以看到你发布的第一篇博客了。