使用GitHub Pages + Hexo 搭建博客 | 张扎瓦的博客

使用GitHub Pages + Hexo 搭建博客

使用Github Pages + Hexo 自建博客的详细流程。包括创建GitHub账号,创建仓库,设置git客户端连接,ssh公钥,安装配置Hexo并部署,设置Hexo next主题,自定义域名。


折腾了近一个星期,终于将博客搭建成功了,现在将具体的过程写出来,以帮助需要自建博客的人。

GitHub部分

注册GitHub账号

要使用GitHub Pages,需要先注册GitHub账号,注册链接

GitHub注册页

注册流程就不细说了,相信大家都会注册的。

注册完成后,需要邮箱激活,请进入自己的注册邮箱,完成激活即可。

创建Git仓库

Git repository(仓库) 用于存放博客内容

点击创建仓库按钮

上面的按钮随便点击一个都可以跳转到创建仓库页面

创建仓库

私有仓库是收费的,公共仓库是免费的,这个根据情况自己选择即可。

仓库设置

仓库创建成功后,进入仓库主页

仓库主页

点击进入仓库设置

仓库设置1

仓库设置2

如果创建时仓库名字是 自己的用户名.github.io,则以上的选项默认是选中的。

至此,创建仓库就完成了,此时打开浏览器,输入 自己的用户名.github.io就能访问自己的主页了。

安装Git客户端

仓库创建完成后,需要安装Git客户端与Git仓库进行连接,方便我们在本地提交博客。

根据自己的操作系统,下载git客户端 ,完成安装。

设置git环境变量

打开git的安装目录,并复制安装路径。

复制git路径

桌面上找到我的电脑 – > 右键 –> 属性 –> 高级系统设置 –> 环境变量 –> 系统变量 –> Path

打开Path变量

新建变量值,将刚刚复制的路径填进去,并在末尾加上\cmd,保存即可

编辑Path变量

测试环境变量是否配置成功,打开命令行输入

1
git version

输出版本号,表示配置成功。

设置用户名和邮箱

鼠标点击右键,选择Git Bash Here,打开git bash客户端

1
2
git config --global user.name "zhangsan"
git config --global user.email "zhangsan@sina.com"

生成ssh密钥

1
ssh-keygen -t rsa -C "zhangsan@sina.com"

连续回车即可。

设置GitHub公钥

打开目录C:\Users\你自己的用户名\.ssh下,会有两个文件 id_rsa(私钥) id_rsa.pub(公钥) ,使用文本编辑器打开id_rsa.pub,复制里面的内容,登录GitHub,进入个人设置中心。

个人设置中心

开始设置ssh

开始ssh设置

新建ssh key

新建ssh

填入公钥

填入公钥

点击 Add SSH key就可以了。

在本地测试连接

1
ssh -T git@github.com

当输出以下内容时,表示连接成功。

github连接成功


Hexo部分

安装nodejs

根据自己的操作系统平台,下载nodejs,并安装。

nodejs环境变量安装好后,会自己添加到环境变量中,一般不需设置。

设置node环境变量

和git环境变量类似,请参考git环境变量的配置。

注意:此处编辑变量值时,不需要在后面加\cmd,直接复制路径即可。

配置完成后,命令行输入

1
node --version

输出版本号,表示配置成功。

安装Hexo

使用npm安装Hexo,npm是nodejs自带的包依赖管理工具,类似于Centos中的yum。

1
npm install -g hexo-cli

强烈建议浏览 Hexo官方文档,写的非常详细。

初始化博客

1
2
3
hexo init 自定义文件夹
cd 自定义文件夹
npm install

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

1
2
3
4
5
6
7
8
.
├── _config.yml #博客的全局配置文件
├── package.json #包含了应用程序的信息
├── scaffolds #模板文件夹
├── source #用户资源文件夹
| ├── _drafts #草稿箱
| └── _posts #写的文章放到这里
└── themes #主题文件夹

_config.yml文件详解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo #网站标题
subtitle: #网站副标题
description: #网站描述
keywords: #关键字
author: John Doe #网站作者
language: #网站所使用的语言 中文使用 zh-Hans 防止乱码
timezone: #网站时区 Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com #网址
root: / #网站根目录
permalink: :year/:month/:day/:title/ #文章的 永久链接 格式
permalink_defaults: #永久链接中各部分的默认值
# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 # http://yoursite.com/blog 并把 root 设为 /blog/。

# Directory
source_dir: source #资源文件夹,这个文件夹用来存放内容。
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #Include code 文件夹
i18n_dir: :lang #国际化(i18n)文件夹
skip_render: #跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。

# Writing
new_post_name: :title.md #新文章的文件名称
default_layout: post #预设布局
titlecase: false #把标题转换为 title case
external_link: true #在新标签中打开链接
filename_case: 0 #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: false #启动 Asset 文件夹
relative_link: false #把链接改为与根目录的相对位址
future: true #显示未来的文章
highlight: #代码块的设置
enable: true #是否开启代码块支持
line_number: true #显示行号
auto_detect: false
tab_replace: #设置用什么字符替代Tab,如tab_replace: aaa,在代码中将输入tab的地方替换为aaa

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# Category & Tag
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD #日期格式
time_format: HH:mm:ss #时间格式

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 #每页显示的文章条数
pagination_dir: page #分页目录

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape #当前所使用的主题名

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: #部署部分设置
type: #部署类型

根据需要更改配置文件,进行个性化配置

启动Hexo服务

初始化完成后,就可以启动Hexo服务了,进入博客目录,执行以下命令,即可启动服务

1
2
hexo g	#生成静态文件
hexo s #启动hexo服务

打开浏览器,输入http://localhost:4000/

初始化界面

配置了这么长时间,终于看到点效果了,有没有很激动O(∩_∩)O

Hexo基本命令

1
2
3
4
5
6
7
hexo generate	#生成静态文件,可以简写为 hexo g
hexo clean #清除生成的静态文件
hexo server #启动hexo服务进行预览,可以简写为 hexo s
hexo deploy #部署到服务器,可以简写为hexo d
hexo new "文件名" #创建新文章
hexo new draft "文件名" #创建草稿箱文章
hexo new page "页面名" #创建新页面

配置部署到GitHub

更改_config.yml配置文件的deploy部分。

1
2
3
4
deploy:
type: git
repo: https://github.com/xxx/xxx.github.io.git
branch: master #部署的分支

或者

1
2
3
4
deploy:
type: git
repo: git@github.com:xxx/xxx.github.io.git
branch: master #部署的分支

部署到GitHub

1
hexo d

自定义域名

首先要有注册好的域名,没有的话,可以先去注册。域名的注册这里不多介绍了,资料很多,大家可以自己选择域名注册商进行注册。

CNAME类型解析

注册好域名后,在博客的资源文件夹source下创建一个文件,CNAME,注意,这个文件没有后缀。使用文本编辑器打开,填入自己的域名,并保存。

登录自己的域名解析后台,添加一条解析记录。记录类型选择CNAME,记录值填入之前GItHub分配的访问路径xxx.github.io,保存后就可以用自己的域名访问博客了。

注意:CNAME文件一定要放在source路径下,否则下次部署的时候,CNAME就被删除了。

A类型解析

在自己的域名解析后台添加一条解析记录,记录类型选择A,记录值填写自己项目访问路径的IP地址。如果不清楚IP地址,可以通过ping 项目访问路径的方式获得,然后填入记录值中即可。

Hexo更换next主题

安装next主题

建议根据官方文档安装,遇到不明白的地方再找别的资料参考 next官方文档

Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下配置文件即可。

cd 到你的博客路径下,使用git下载主题文件

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

修改博客配置文件_config.yml,将theme: landscape修改为theme: next

启动服务即可。

博客首页

上面的界面是我美化后的效果,图片仅供参考。

如果我的文章对您有所帮助,不妨打赏一杯豆浆以资鼓励(○` 3′○)