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的终端,在里面可以使用命令进行一些操作。

需要区分的是:Git ≠ Github。Git是一个版本控制工具(软件);Github是一个用Git做版本控制的项目托管平台(平台)。

2.3 配置SSH

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

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

ssh.png

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

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

ssh-key.png

然后使用下面的命令测试是否可以连接上 Github 。

1
$ ssh -T git@github.com

如果出现下图所示You've successfully authenticated内容则证明通过验证,连接成功。

ssh-T.png

三、安装Hexo

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

3.1 安装前提

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

3.2 安装Hexo

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

PS:如果在操作过程中,出现错误或者Error,请检查网络,然后使用管理员权限打开Git Bash。

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文件夹。然后使用下面的命令clone下载NexT主题。

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 同步Hexo

如果你想在不同的机器上使用你的Hexo进行博客更新,比如公司电脑、家庭电脑、笔记本。那么也许你需要将你配置好的Hexo同步到Github上,这样你每次更换电脑时,只需要进行简单的配置,然后同步Github上的Hexo配置即可使用,可以节省大量的时间。

但是此时我们需要注意的是,我们的主题是单独的版本库,所以我们需要在git的忽略文件中将themes文件夹添加进去,避免在提交Hexo文件配置时上传Theme主题文件。

打开Hexo主目录下的.gitignore文件,添加一行themes/内容,文件的最终内容如下:

1
2
3
4
5
6
7
8
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
themes/

这样你就可以放心的提交你的Hexo更新的内容而不会将Theme文件提交上去。

3.6 部署到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.7 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模式启动服务
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!