Hexo+Github搭建个人博客

前言

本文主要介绍了在Mac环境下,通过Hexo+Github搭建个人博客的完整操作流程,笔者参考了部分现有的文章,通过实践,排除了一些坑,并多次尝试后,整理出本文。

步骤

1.安装Node.js

通过Homebrew安装,会很便捷,但是事后遇到了重启终端,执行nvm命令,报-bash: npm: command not found错误,只好重头做起,在Node.js官网下载包安装,也很方便。
5分钟 搭建免费个人博客一文中提到的,使用Homebrew安装Node.js的命令如下,请注意其中的注释:

1
2
3
4
5
$ brew install nvm
$ mkdir ~/.nvm
$ export NVM_DIR=~/.nvm
$ . $(brew --prefix nvm)/nvm.sh
$ nvm install 4 //这里是大坑,这个指定了安装的版本,截止到本文书写时,node的版本已经到8.x了

个人建议还是直接去官网下载包安装。

2.安装Git

这个是提交之后的内容必备的,Mac自带了git,就不再赘述。

3.安装Hexo

终端命令如下(Hexo官网上的安装命令是$ npm install -g hexo-cli,安装时要在前面加上sudo,否则会因为权限问题报错):

1
$ sudo npm install -g hexo

4.初始化Hexo

终端cd到自己选定的一个文件夹(之后所有的hexo相关的文件都将安装在文件夹中)的上一层级目录(选定的文件夹包含于该层级下),执行hexo init命令:

1
2
$ cd /Users/...
$ hexo init XXX //XXX是对应的自己建立的文件夹的名字,用于存放之后关于hexo的所有文件

cd到XXX文件夹下,安装npm:

1
2
$ cd XXX
$ npm install

5.测试hexo

执行命令,开启hexo:

1
$ hexo s

执行命令后,在浏览器中访问:http://localhost:4000/
看到下面的页面,说明本地访问成功,hexo的初始化工作结束:

Hexo-Github搭建个人博客-测试hexo

执行下面的命令可以停止测试。

1
$ Ctrl+C

6.建立Github关联的仓库

在github新建一个仓库,仓库名固定为github用户名.github.io

例如笔者的就是:kukumaluCN.github.io

获取到仓库的地址和git地址,后面使用。

7.配置_config.yml文件

在之前的XXX文件夹下,有_config.yml文件,该文件是hexo的配置信息,因为不同版本,该文件的信息会有变化,所以网上的很多教程都不太适用,需要自己综合参考修改,下面的是根据笔者当前的配置列出的示例。

需要修改的基本信息如下,如果有其他需要,可以参考官网Hexo配置自行修改(注意冒号后面必须有空格):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Site
title: 霖溦之境 #Hexo 博客标题
subtitle: 霖溦的个人博客 #博客副标题
description: 霖溦的个人博客
author: 霖溦 #作者名
language: zh-Hans #中文

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://github.com/kukumaluCN/kukumaluCN.github.io #github仓库的地址
root: /

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/kukumaluCN/kukumaluCN.github.io.git #github仓库的git地址
branch: master

8.安装hexo-deployer-git自动部署发布工具

执行命令:

1
$ npm install hexo-deployer-git --save

9.发布hexo

修改完上述配置后,可以再次hexo s执行一次测试,看看修改后的效果。没有问题就可以发布了。

在XXX文件夹下生成静态页面,执行:

1
$ hexo clean && hexo g && hexo d

这是三个命令,clean是清理缓存,g就是generate生成静态文件,d是deploy也就是最终的部署。

具体的命令参考官网:Hexo指令

执行上述命令时,可能因为没有关联github提示输入github的用户名和密码(参考第10条,可能是deploy中repo的设置问题,改成ssh就不会遇到该提示了,前提是你的github绑定了ssh key)。

10.发布文章

cd到XXX目录下,执行命令:

1
$ hexo new "title" //title是要发布的文章的标题

title是要发布的文章的标题,具体规范参考Hexo指令中关于new的一项。

执行之后,会在/XXX/source/_posts路径下生成“title.md”文件,具体的书写就是标准的markdown语法了,可以自行使用习惯的md编辑器书写。

文章编辑完之后执行如下命令发布:

1
$ hexo clean && hexo g && hexo d

期间遇到了如下错误:

1
2
3
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/kukumaluCN/kukumaluCN.github.io.git/'
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html

本以为是SSH key的问题,结果发现设置过了,经过实验,发现是配置文件的问题:

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
#repo: https://github.com/kukumaluCN/kukumaluCN.github.io.git #github仓库的git地址
repo: git@github.com:kukumaluCN/kukumaluCN.github.io.git #改成ssh地址
branch: master

11.更换主题

Hexo的主题有很多,具体参考:Thems
这里以maupassant主题为例:
cd XXX到刚才的目录。
执行如下命令:

1
2
3
$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save

再次修改配置文件_config.yml,将theme的值改为maupassant。
编辑完之后执行如下命令发布:

1
$ hexo clean && hexo g && hexo d

参考

  1. 5分钟 搭建免费个人博客
  2. Mac上搭建基于GitHub的Hexo博客
  3. 如何搭建自己的博客

本文作者: 霖溦
本文链接: https://kukumalucn.github.io/blog/2018/07/30/Hexo-Github搭建个人博客/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!