SongHang's Blog
0%

Hexo 搭建博客教程

Posted on In Views:

前言

本文主要是介绍在Mac上如何使用Hexo+GitHub搭建个人博客。

目录

一、什么是 Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

二、配置环境

申请GitHub

Github注册账号，用作博客的远程仓库和部署服务器。

安装Node.js

官网下载并安装，安装完成后可用node -v查看版本号。

安装Git

Mac 安装 Xcode 自带有 Git，也可去官网下载，安装完成后可用git --version查看版本号。

需要设置你 Github 的用户名密码和email，在命令行输入：

1
2
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"
安装 Hexo

所有必备的应用程序安装完成后，即可使用 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
9
10
.
├── _config.yml  // 配置信息，你可以在此配置大部分的参数
├── package.json // 应用程序的信息
├── public       // 执行 hexo generate 命令，输出的静态网页内容目录
├── scaffolds    // 模板文件夹。当你新建文章时，Hexo会根据scaffold来建立文件 
├── scripts      // 存放自定义 javascript 脚本
├── source       // 存放用户资源的地方
|   ├── _drafts  // 草稿文章
|   └── _posts   // 发布文章
└── themes       // 存放博客的主题，Hexo会根据主题来生成静态页面

执行下列命令，会生成静态页面。

1
$ hexo generate  # 或者 hexo g

启动本地服务，打开浏览器输入 http://localhost:4000/ 即可访问。

1
$ hexo server # 或者 hexo s

三、部署到Github

配置 SSH Key，将本地目录与 Github 关联

配置SSH Key是让本地 git 项目与远程仓库建立联系。SSH Keys不配置的话每次项目有改动提交的时候就要手动输入账号密码，配置了就不需要了。

首先检查是否已经有SSH Key，执行：

1
cd ~/.ssh

如果没有目录.ssh，则要生成一个新的SSH Key，执行：

1
ssh-keygen -t rsa -C "your e-mail"

接下来几步都直接按回车键，然后系统会要你输入密码。这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。

成功后进入到.shh文件夹中再输入ls，查看是否有id_rsa.pub文件，执行：

1
2
cd ~/.ssh
ls

打开id_rsa.pub文件，执行：

1
cat id_rsa.pub

复制SSH Key后，登录GitHub账号，在Setting->SSH keys->add SSH key，将其添加到Add SSH Key里。

测试 SSH Key 是否配置成功

执行：

1
ssh -T git@github.com

如配置了密码则要输入密码，输完按回车。如果显示以下内容，则说明Github中的 ssh 配置成功。

1
2
Hi username! You have successfully authenticated, but GitHub does not
provide shell access.
创建仓库 Github Pages

登录GitHub账号后，新建 New repository，建立与你github用户名对应的仓库，名称必须为username.github.io，如prsuit.github.io。

修改Hexo的_config.yml文件

根目录_config.yml是博客的配置文件，用文本编辑器打开此文件，在文件最后部分，修改deploy配置：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/yourname/yourname.github.io.git #yourname替换成你的Github账户名
  branch: master

注意：在.yml文件中，冒号后面都是要带空格的。

将博客项目上传到仓库

安装 hexo-deployer-git，执行：

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

然后执行命令：

1
2
3
4
$ hexo clean
$ hexo g #生成静态网页
$ hexo d #部署到远程仓库
# 或者 $ hexo g -d

此时，通过访问 https://yourname.github.io 可以看到默认的 Hexo 首页。

一些常用命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
hexo new "postName" # 新建文章

hexo new page "pageName" # 新建页面

hexo generate # 生成静态页面至public目录，markdown转html

hexo server # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）

hexo deploy # 将.deploy目录部署到GitHub

hexo clean # 清除public文件夹和db.json，清除缓存数据

hexo help # 查看帮助

hexo version # 查看Hexo的版本

hexo n == hexo new

hexo g == hexo generate

hexo s == hexo server

hexo d == hexo deploy

四、更换Hexo主题

Hexo 中有很多主题，可以在官网查看。 推荐使用hexo-theme-next，更换主题步骤：

下载主题资源

终端cd到初始化博客文件夹目录下，执行命令：

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
配置使用下载的主题

修改博客目录下_config.yml里的theme的名称landscape更改为next。

1
theme: next
主题的其他配置

可在/theme/{theme}/_config.yml 主题的配置文件下进行主题的配置。

添加分类

新建一个页面，命名为 categories，执行：

1
$ hexo new page categories

在 source 目录下会生成 categories 目录，修改 source/categories 目录的 index.md 如下:

1
2
3
4
5
6
---
title: categories
date: 2020-07-19 20:24:49
type: "categories"
comments: false
---

在主题/theme/{theme}/_config.yml 中将menu的catagories取消注释，把前面的#去掉即可。

1
2
3
4
5
6
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

给模板添加分类属性，打开scarffolds文件夹里的post.md文件，给它的头部加上categories:，这样我们创建的所有新的文章都会自带这个属性，我们只需要往里填分类，就可以自动在网站上形成分类了。

1
2
3
4
5
6
7
8
---
title: {{ title }}
date: {{ date }}
categories: 分类名 # 多个分类，数组形式[分类名1，分类名2]
# 短横线形式
# - 分类名1
# - 分类名2
---
添加标签

新建一个页面，命名为 tags，执行：

1
$ hexo new page tags

在 source 目录下会生成 tags 目录，修改 source/tags 目录的 index.md如下 :

1
2
3
4
5
6
---
title: tags
date: 2020-07-19 20:28:30
type: "tags"
comments: false
---

同样，在主题/theme/{theme}/_config.yml 中将menu的tags取消注释，同上。

以后写文章时，在要分类的文章顶部加入 tags 属性，值为标签名:

1
2
3
4
5
6
7
8
9
---
title: {{ title }}
date: {{ date }}
categories: 分类名
tags: [标签a,标签b] # 数组形式，添加a和b两个标签
# 短横线形式
# - 标签a
# - 标签b
---

至此，完成以上配置，可以执行调试命令查看效果。以后就可以使用Hexo发布文章了，当然还可以添加其他配置如文章阅读统计、评论等，可自行探索。

总结

万事开头难，但总算开头了💔，从此开启自己的博客生涯。第一次写Blog，写作思路不是很清晰流畅，花费了比较多的时间，希望以后会越来越好，Fighting！！！