0%

使用 hexo + github 搭建个人博客

环境配置

安装 Node.js

下载并安装 Node.js
根据提示安装完成以后,使用如下命令进行测试 nodenpm是否安装成功

1
node -v
1
npm -v

安装 git

如果是 Mac 用户,安装 Xcode 以后自带 Git
非 Mac 用户,或用不到 Xcode 开发,可以单独下载并安装 Git
安装完成后,测试查看版本号

1
git --version

安装 Hexo

Nodejs 和 Git 都安装完成以后,开始全局安装 Hexo。注意权限问题

1
sudo npm install -g hexo

创建存放博客的文件夹,并进入到该文件夹中

1
2
mkdir MyBlog
cd MyBlog

初始化本地博客,该命令会下载博客的模板文件

1
hexo init

将本地博客生成网页文件,并开启本地服务器,然后可以通过 http://localhost:4000/ 进行预览

1
2
hexo g
hexo s

初始化的Hexo博客

部署到 github

注册并登录 Github,新建一个仓库,名称必须是 username.github.io。其中 username 为注册的 github 账户名称(下同),例如:xiaolong-jin.github.io

编辑本地博客的 _config.yml 文件,按照如下修改 deploy 配置

1
2
3
4
deploy:
type: git
repository: https://github.com/username/username.github.io
branch: master

⚠️注意:type:repository:branch:后均有空格

生成静态文件,并部署到 github

1
2
hexo g
hexo d

第一次部署的时候,如果报错,请先安装 deplyer 插件

1
npm install hexo-deployer-git --save

部署完成之后,就可以通过 username.github.io 来访问自己的博客了。

绑定个人域名

购买域名

通过阿里云购买域名,根据网站提示完成实名认证并付款。
例如,我购买的域名为 jinxiaolong.com

解析域名

在终端中输入以下命令

1
ping username.github.io

例如:ping xiaolong-jin.github.io
之后会看到以下信息:

1
2
3
PING xiaolong-jin.github.io (185.199.110.153): 56 data bytes
64 bytes from 185.199.111.153: icmp_seq=0 ttl=48 time=90.801 ms
64 bytes from 185.199.111.153: icmp_seq=1 ttl=48 time=92.653 ms

这样就获得了 Github Pages 的 IP

之后,在阿里云后台添加一条解析
添加解析

添加 CNAME 文件

进入本地博客目录下的 source 文件夹,新建名为 CNAME 的文件,并写入购买的个人域名。

1
2
cd source
echo jinxiaolong.com >> CNAME

再次生成静态文件并部署后,就能通过个人域名访问自己的博客了。

1
2
hexo g
hexo d

更换主题

Hexo 主题

安装主题

选择喜欢的主题,clone 到 themes 文件夹下

1
2
cd themes
git clone https://github.com/Siricee/hexo-theme-Chic.git

更改配置文件 _config.yml 中的 theme 配置

1
theme: hexo-theme-Chic

配置主题

参考主题文件的 git 仓库,在主题文件夹下的 _config.yml 中进行相关配置的更改

在博客中插入图片

启动 asset 文件夹

_config.yml 中找到 post_asset_folder 字段,配置成 post_asset_folder: true

这样,在创建文章时候,hexo会自动建立一个与文章同名的资源文件夹。可以把与文章相关的所有资源文件放到该文件夹中。

测试:运行 hexo new post 'get-started',可以看到博客的 /source/_posts 目录下,多了一个和 get-started.md 同名的 get-started 文件夹。

1
2
3
_posts
⊢ get-started
⊢ get-started.md

文章内的引用

将资源文件放入 get-started 文件夹中

1
2
3
4
_posts
⊢ get-started
⊢ hello_hexo.png
⊢ get-started.md

get-started.md 中引用

1
![hello_hexo](get-started/hello_hexo.png)

安装 Github 插件

以上,我们可以在本地通过 hexo s 预览到我们的图片了,但是推送到 Github 上以后缺无法显示。

我们需要安装一个让 Github 识别资源文件路径的插件
在博客根目录运行:

1
npm install https://github.com/xcodebuild/hexo-asset-image --save

使用命令再次推送到 Github,即可正常预览文章中的图片啦。

1
2
3
hexo clean
hexo g
hexo d

添加标签和分类

创建文件夹

1
2
hexo new page "tags"
hexo new page "categories"

找到 source/tags/index.md 并编辑,category 同理

1
2
3
4
5
6
---
title: Tags
date: 2019-09-01 15:45:03
type: tags
layout: "tag"
---

⚠️注意:这里的 layout 选项,查看主题文件夹下 layout 文件夹中的名字(具体文件名称和路径可能会因主题而有所不同)。例如,我的 Chic 主题下的是 layout/tag.ejslayout/category.ejs。如果名字不对应,则访问 Tags 的时候不会显示任何内容。

编辑主题文件夹下的配置文件,注意名称要和 source 目录下的文件夹同名

1
2
3
4
5
nav:
Posts: /archives
Categories: /categories
Tags: /tags
About: /about

编辑 hexo 配置文件

1
2
tag_dir: tags
category_dir: categories

在编辑文章的时候,可以在tags:后添加标签了(分类categories:同理)。如果有多个标签的话,可以用下面两种办法来设置

1
tags: [tag1,tag2,...]
1
2
3
tags:
- tag1
- tag2