使用Hexo搭建个人博客

Hexo.png

最近想搭建一个独立的个人博客,可以将自己在工作学习中的一些知识及经验记录下来。不断积累知识,不断总结经验,让自己可以不断的进步、成长。

目前搭建独立的个人博客有很多种方式,你可以选择购买主机搭建动态博客 - WordPress等,也可以使用Github Pages来搭建一个静态的个人博客。我选择了现在很热门的Github Pages + Hexo 的方式来搭建独立的个人博客。

一、前期准备

1.1 相关网站

在搭建个人博客的过程中,你可能会使用到下面几个网站。在这几个网站中都有相应的官方文档及教程。如果官方文档不能满足你,那么请Google

Github 官网
Github Pages
Hexo 官网
Node.js 官网
Git 官网

二、搭建Git环境

2.1 注册Github

进入Github 网站,按照提示进行注册,然后登录。

Github_signup.png

登录完成之后,在你的主页点击图标 New Repository 创建一个新的版本库,因为我们是使用 Github Pages 去搭建我们的静态博客,所以版本库的名称应该是你的用户名+.github.io。如:我的用户名是:dkylin,那么版本库的名字应该是: dkylin.github.io ,这个是一定不能出错的。因为之后你将要访问的你的博客地址就是: https://dkylin.github.io

Github_createRepo.png

至此,Github账号创建完成,GIthub Pages 所需要的版本库也创建好了。

2.2 本地安装Git

进入 Git 官网,下载相应的 Git 版本,下载完成之后按照引导安装 Git 。安装完成之后在开始菜单中会有一个 Git Bash 。这是一个类似于Liunx的终端,在里面可以模拟Linux下的终端进行操作。

2.3 配置SSH

打开 Git Bash ,执行下面的命令生成 SSH 访问私钥及公钥。

1
$ ssh-keygen -t rsa -C "email@email.com"

 ssh | 300*0

输入命令回车之后会提示你输入一些东西,不用管。一直回车到底就好了。然后你的 ~/.ssh 文件下就会生成两个文件 id_rsaid_rsa.pub

打开你的 Github -> setting -> SSH Keys 。然后点击 New SSH Key 创建一个新的SSH Key。Title 可以用你的计算机名,可以用以区分。将文件 id_rsa.pub 中的所以内容复制粘贴到 Key 下面。然后使用下面的命令测试是否可以连接上 Github 。

1
$ ssh -T git@github.com

如果出现下图所示内容则证明连接成功。

 ssh -T

三、安装Hexo

Hexo的安装在其官方文档中有很详细的说明。下面将简单介绍Hexo的安装。

3.1 安装前提

  • 安装 Node.js ,请进入Node.js 的官网下载安装。
  • 安装 Git ,前面已经说明,不再赘述。

3.2 安装Hexo

上面两个工具安装完整之后,打开 Git Bash ,只需要使用npm即可完成Hexo的安装。

1
$ npm install -g hexo-cli

安装Hexo完成之后,执行下面的命令,Hexo将会在你制定的文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后,文件夹下的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

  • _config.yml 文件是网站的配置文件,可以在其中配置网站的大部分参数。
  • package.json 文件是应用程序的信息。
  • source 是资源文件夹,是用来存放用户资源的地方。
  • themes主题文件夹,Hexo会根据主题来生成不同的静态页面。
  • scaffolds是模板件夹,当新建文章的时候,Hexo会根据模板来建立文件。

3.3 修改主题

我使用的是NexT主题,下面只介绍怎么安装这种主题,其他主题可以在Hexo Themes、github里面寻找。

先进入你的Hexo文件夹。然后使用下面的命令cloneNexT主题。

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

然后打开Hexo主文件夹下的_config.yml,修改其中的theme 属性。theme: 后面要加空格。

1
theme: next

3.4 本地查看调试

1
2
$ hexo g #生成静态页面,生成的内容在public文件夹下
$ hexo s #启动本地服务,进行文章预览调试。hexo s --debug 命令可以用来调试

3.5 部署到Github Pages

先使用下面的命令对Git进行初始配置。

1
2
$ git config --global user.name "your name"
$ git config --global user.email "email@email.com"

然后打开Hexo主文件夹下的_config.yml,设置其中的deploy 参数,详细请查看Hexo官方文档中部署部分

我的设置如下所示:

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

git地址建议使用SSH地址。在上面的参数设置好了之后,使用下面的命令安装 hexo-deployer-git 插件,只有安装了插件之后才可以部署到Github Pages。

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

安装完插件之后使用下面的命令进行部署:

1
2
$ hexo g #生成静态文件
$ hexo d #部署到github

还有一个更快捷的命令:

1
$ hexo d -g #在部署前先生成

3.6 NexT 主题拓展

NexT 文档 - NexT的详细配置可以在这里查看。

NexT Github 地址 - 想要二次开发,可以Fork一下。

四、Hexo常用命令

下面仅列出几种常用的命令。更详细的命令请查看Hexo官方文档

1
2
3
4
5
$ hexo clean #清理之前生成的内容,即public文件
$ hexo g #生成静态文件
$ hexo d #部署
$ hexo s #启动本地服务,可以通过http://localhost:4000查看
$ hexo s --debug #使用debug模式启动服务