使用Github和Hexo搭建博客

基础篇

一、Hexo的安装

1. 安装Node

2.安装Git

3. 安装Hexo

npm install -g hexo-cli

二、Hexo的基本使用

1. 创建博客文件的存放目录

hexo init <folder>

执行此命令之后,hexo-cli会自动创建一个名为\<folder>的文件夹。

我们进入这个文件夹,然后使用hexo自带的server命令看看当前博客的效果。

cd <folder>
hexo server

运行hexo server命令,hexo会启动一个web服务器,默认的运行端口是4000

之后,可以访问localhost:4000,查看当前运行效果。

2. 新建一篇博客

首先来看看hexo init产生的目录。

.
├── _config.yml # 配置文件
├── package.json
├── scaffolds
├── source # 源文件
| ├── _drafts
| └── _posts # 存放文章的目录
└── themes # 主题目录

我们以后要新建的博客文件都放在./source/_posts这个目录下。

然后,我们使用hexo new命令来新建一篇文章。

# 当前目录应当是hexo init的产生的目录
hexo new <post name>

此时,应当可以看到./source/_post/目录下新建了一个名为<post name>.md的markdown文件。编辑该文件即编辑此篇文章。我们可以尝试编辑这个文件后,再次使用hexo server命令访问查看效果。

二、Github仓库的创建

1. 新建一个Repository

注意这个仓库的名称必须是<用户名>.github.io,比如我Github的用户名是LeoB-O,那么我新建的仓库的名称就是LeoB-O.github.io。这样创建出来的项目仓库,Github会自动生成一个与仓库名称相同的URL指向这个仓库。

也就是说,这个仓库会被当作是<用户名>.github.io这个网址的根目录。

注意创建仓库的时候可以勾选同时创建README文件,方便我们下一步查看效果

2. 尝试通过URL访问该仓库

如果你在上一步中选择了创建README文件,此时你可以尝试访问<用户名>.github.io,例如我的网址就是leob-o.github.io,此时应当能够成功访问,并且会显示出你的README文件当中的内容。

三、将Hexo博客部署到GitHub

1. 创建公钥和私钥

一般来说,我们在电脑上将仓库push到GitHub上时,采用的是用户名➕口令的验证方式。其实我们还可以通过使用公钥和私钥对来进行验证。

也就是说,我们在本地生成一个公钥私钥对,然后将公钥上传至GitHub服务器,这时我们就可以让程序通过加解密来自动的进行身份验证而不需要手动输入用户名和口令。

我们使用ssh-keygen命令来生成公钥私钥对。

ssh-keygen -t rsa -C "你的GitHub邮箱"
# 接下来会询问你三个问题,一般默认直接回车即可
# 生成的密钥默认放在~/.ssh/id_rsa目录下

使用ssh-agent来帮助我们管理私钥。

eval "$(ssh-agent -s)"  # 启动ssh-agent

将私钥添加到ssh-agent

ssh-add ~/.ssh/id_rsa

2. 将公钥添加至GitHub

进入Setting,找到SSH and GPG keys,选择New SSH key,将id_rsa当中的内容复制到输入框中,title的名称自己随意取。

3. 测试使用ssh连接到Github

ssh git@github.com

如果看到:

Hi <username>, You've successfully authenticated, but GitHub does not provide shell access.

说明你验证成功了。

4. 配置Hexo,设置部署方式

使用文本编辑器,打开你的hexo init生成的文件夹中的_config.yml文件,末尾修改deploy。

deploy:
type: git
repository: <Github仓库地址> #注意是ssh地址,不是https地址
branch: master

保存。

5. 安装部署工具

我们使用hexo-deployer-git来帮助我们将博客部署到GitHub上。我们要安装这个拓展。

npm install hexo-deployer-git --save

之后我们就可以使用 hexo d -g 或者 hexo g -d 命令将我们写的markdown文件渲染为网页并部署至GitHub上。

hexo d -g # 完整命令其实是 hexo deploy -g,g选项代表先生成再部署

hexo g -d # 完整命令其实是 hexo generate -d,d选项代表生成后进行部署

# 以上两个命令效果是一样的

部署完成后,我们就可以访问<username>.github.io来查看我们的博客了。

进阶篇

一、主题的使用

默认的主题优点丑,hexo有许多优秀的主题可供选择。这里我以melody为例。

1. 下载melody主题至theme目录

# 进入你的hexo博客的文件夹
# 下载melody主题并保存至themes文件夹下
git clone -b master https://github.com/Molunerfinn/hexo-theme-melody themes/melody

2. 编辑_config.yml文件,配置主题

使用文本编辑器打开_config.yml 文件,做如下修改。

theme: melody

保存

3. 查看效果

可以运行hexo server命令查看效果。

二、主题的配置

主题有很多的配置选项,具体可以查看melody官方文档_theme-config

这里说一个,melody主题默认会在首页的文章列表显示整篇文章,这会造成首页内容显得非常凌乱。一般情况下,首页应该只显示一部分文章的内容,然后有一个阅读更多的选项。我们可以通过配置melody主题来实现这一点。

首先,我们要吧theme/melody/目录下的/_config.yml文件复制到source/_data目录下,并重命名为melody.yml,如果不存在这个目录就自己新建一个。

然后,我们使用文本编辑器打开melody.yml文件,找到auto_excerpt,取消注释。将其修改为如下内容。

auto_excerpt:
enable: true # 设置启用这个功能
length: 150 # 要显示的字符数,超过这个长度的字符全部隐藏

然后启动hexo server就应该可以看到效果了

二、Tag与Category

在hexo中,你可以为每篇文章指明所属的Category,也可以为文章打上Tag。

或许你已经注意到,你创建的每篇文章的最上方都有一块区域,类似于这样:

title: Hello World
date: 2013/7/13 20:46:25
---

这块区域被称作Front-matter,用来说明与这个文件有关的变量,例如这篇文章的标题、创建时间、所属的类别以及标签等信息。

1. 对文章进行分类

你只需要在Front-matter部分加上一个categories属性,并在后面跟上所属的类别的名称就可以了。例如:

title: Hello World
date: 2013/7/13 20:46:25
categories: Test
---

这样,这篇文章就属于Test这个类别了。

另外,如果需要多级类别,可以有两种方式实现:

title: Hello World
date: 2013/7/13 20:46:25
categories: [Test, TestSub]
---
title: Hello World
date: 2013/7/13 20:46:25
categories:
- Test
- TestSub
---

上面两种方法都会指明这篇文章属于Test类别下的SubTest这个子类别。

但是,Hexo不支持一篇文章同时属于多个类别。

如果您有过使用WordPress的经验,就很容易误解Hexo的分类方式。WordPress支持对一篇文章设置多个分类,而且这些分类可以是同级的,也可以是父子分类。但是Hexo不支持指定多个同级分类。下面的指定方法:

> categories:
> - Diary
> - Life
>

会使分类Life成为Diary的子分类,而不是并列分类。因此,有必要为您的文章选择尽可能准确的分类。

2. 为文章添加Tag

与添加category类似,只要在 Front-matter 部分添加tags属性就可以了。例如:

title: Hello World
date: 2013/7/13 20:46:25
categories: [Test, TestSub]
tags: TestTag

添加多个Tag的方式和category相同。

参考资料

Hexo官方文档:https://hexo.io/zh-cn/docs/

Melody官方文档:https://molunerfinn.com/hexo-theme-melody-doc/

Author: LeoB_O
Link: https://leob-o.github.io/2019/01/17/使用Github和Hexo搭建博客/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.