使用GitHub Pages + Hexo搭建博客

发表于 | 分类于 | | 阅读次数: |
字数统计: 2,313 | 阅读时长 ≈ 9

本篇博客CV自张扎瓦的博客，本人只在此处充当一下搬运工，大家可以点击神奇传送门前往原文博客的说。

GitHub部分

创建Git仓库

Git repository用于存放博客内容

点击之后会跳转到创建仓库页面

私有仓库收费，公共仓库免费，可以根据自己的情况选择。

仓库设置

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

点击Settings进入仓库设置

如果创建时仓库的名字是xxx.github.io，则以上的选项默认是选中的。

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

安装Git客户端

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

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

设置Git环境变量

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

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

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

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

1
git version

如果输出版本号，表示配置成功。

设置用户名和邮箱

点击鼠标右键，选择Git Bash Here，打开git bash客户端。输入下面的命令

1
2
git config --global user.name "lishuai"
git config --global user.email"xxxx@xxx.com"

生成ssh密钥

1
ssh-keygen -t rsa -C "xxxx@xxx.com"

连续回车即可。

设置GitHub公钥

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

开始设置ssh

新建ssh key

填入公钥

点击 Add SSH key就可以了。

在本地测试链接

1
ssh -T git@github.com

当输出以下内容是，表示连接成功。

Hexo部分

安装nodejs

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

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

手动设置环境变量

安装完成后在命令中输入如下命令

1
node --version

如果输出版本号，则表示配置成功。如果没有输出，我们可以自己手动的配置一下环境变量。

配置过程与git的环境变量一致，只不过不需要添加cmd。

安装Hexo

使用npm安装Hexo,npm是node自带的宝以来管理工具，类似于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
9
> .
> ├── _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服务

打开浏览器，输入localhost:4000

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

首先要下载Git的插件

1
npm install hexo-deployer-git --save

更改_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，保存后就可以用自己的域名访问博客了。

A类型解析

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

修改GitHub仓库中的GitHub Pages

在图中圈中地方输入自己的域名，然后点击save。

Hexo更换NexT主题

安装next主题

其实可以使用的主题很多，但这里只介绍使用频率最多NexT的主题，因为网上有很多前辈的攻略博客，解决问题比较方便，如果有兴趣的话也可以自己取尝试一下其它主题。

建议根据官方文档安装，写的十分详细，遇到不明白的地方再找别的资料参考 NexT官方文档，安装完成之后将

_config.yml 文件中的theme字段，将值改为next。

美化

美化因为个人审美不同，就不在此处介绍了了，大家可以上网自行搜索，美化是个无休止的东西，建议够用就好

此处贴几个链接，方便大家使用。

hexo的next主题个性化教程：打造炫酷网站

Hexo+Pages静态博客-Next主题篇

基于Hexo+Next主题的个人博客搭建定制优化