GitHub+hexo折腾记

前言

趁着项目期过去，手头活不多，把自己近期学到的东西记录一下，于是就想到了博客。Github+Hexo还算是挺简单的建站方法，有一些前端经验的话会更快，即使没有经验网上也有大把的教程，不过大多都需要东拼西凑才能完整的搞下来。

趁着休息时间摸爬滚打一个星期做完了，在此记录一下建站时的步骤以及遇到的问题、解决方法等。

我的电脑是Mac，windows环境大同小异。

Hexo简介

GitHub就不做过多解释了，Hexo是一个基于Node.js的静态博客程序（如果你不了解Node.js也没关系，在此处用到的的只有基于它的模块），可以方便的生成静态页面托管在GitHub上。其因美观、简介且使用方便而受广大人群喜好（不止是程序猿），本次我使用的是next主题，贴出一张next主题的截图！

Hexo next theme

提前准备

安装Node.js
注册GitHub账号
安装git
markDown写作语法

git

如果你使用过git命令行，那么可以跳过此步骤，非则点击下载链接。

注：听说Mac上自带git，可以使用命令行输入git –version看是否出现版本号(此处为两个-)。

nodejs

hexo是基于nodejs的，并且里面还会使用到nodejs的其他模块。使用方法很简单，直接安装nodejs就可以（下载传送门)。

GitHub账号

先打开GitHub，有账号的话直接登录，无账号的话进行注册。

GitHub注册

登录上去后，点击New repository创建一个仓库。

创建仓库

输入完信息后点击Create repository

markDown

markDown的语法其实很简单，如果你要写作、做笔记等都可以使用，如果不了解的话可以在这里看一下（我也是直接百度的-. -）。

安装

安装Hexo，语句为:
1
$npm install -g hexo
创建博客文件夹，建议不要随意命名，这个里面放的就是子集博客的文件，语句为：
1
$hexo init blogs(blgos是你的博客文件夹，名称随意)
进入blogs文件夹，安装所需模块，执行语句：
1
$npm install

查看博客页面

这个时候，已经可以通过命令行：

1
2
3

$hexo server
或者
$hexo s

来访问页面了，浏览器输入http://localhost:4000即可看到。

hexo默认端口为4000，如果想要更改，可输入：

$hexo server -p 你想改的端口号
或
$hexo s -p 你想改的端口号
比如：
$hexo s -p 4001

来启动hexo。

配置SSH

如果使用过GitHub提交过代码，可忽略此步骤

如果想了解SSH是什么东西的话，可以在阮一峰SSH原理与运用中了解。

生成SSH，命令行语句为：

1	$ssh-keygen -t rsa -C 你的GitHub邮箱

可能会需要输入密码，这时直接摁回车就可以，不输入密码也行，摁三下回车键。接下来继续执行命令行语句:

1
2
3

$cd ~/.ssh        进入.ssh文件夹
$ls               查看当前文件夹内所有文件,查看是否有名为id_rsa.pub的文件
$vim id_rsa.pub   打开公钥文件，拷贝其中的东西

然后打开GitHub-点击右上角头像-Settings-SSH and GPG keys-New SSH key，把复制的SSH秘钥粘贴进Key处，名称最好写自己的电脑，点击Add SSH key，这就保存成功了（因为此处我在很久以前就已经配置完成了，所以不太确定操作是否正确。如果有什么问题可以联系我或者参考一些大佬的文章，很多解决办法）。

Next主题安装

克隆next主题：

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

将克隆下载的主题拷贝到blogs/themes文件夹下，并将文件夹更名为next。

修改根目录下的_config.yml配置文件，搜索theme:，将值改为next。注意：冒号后面要加一个空格，否则不会生效。

这时重启Hexo服务器，即可看到Hexo主题界面。

此处附上Next主题使用文档，更多配置可在Next主题文档内查看，超详细的！

部署设置

打开blogs根目录下的_config.yml文件，搜索deploy:，设置type为git，给它下面增加两行属性：

1 2	repository: git@*.github.com:/**.github.io.git // 此处填写你的GitHub提交地址 branch: master

此处注意缩进哦。

常用命令

$hexo clean 		// 清除静态资源，如果页面显示不正常的话就执行它，然后重新生成
$hexo g 或 $hexo generate 	// 生成静态资源
$hexo d 或 $hexo deploy 	// 提交代码到GitHub
$hexo s 或 $hexo server 	// 启动Hexo服务器，相当于上线前预览项目

如果不需要预览项目，可直接使用简写：

1	$hexo d -g

进行提交项目。

1 2	$npm update hexo -g // 升级Hexo $hexo init // 初始化Hexo仓库

创建文章

使用:

1	$hexo new "文章名"

命令来创建一个新文章。

此处推荐MarkDown编写工具Typora，此工具完全免费，使用方便。

在/blogs/source/_posts下打开刚才创建的文章，输入”Hello Hexo”保存，刷新博客页面即可看到刚才创建的文章。

创建标签页

使用：

1	$hexo new page "newPage"

来创建新页面。

然后在主题配置_config.yml中搜索menu:，在这个下面按照home等配置的格式添加。

如：新文章: /newPage || icone。

刷新页面即可在导航看到新创建的标签页。

报错

1	ERROR Deployer not found: git

解决方法

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

我的配置

根目录_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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site  # 站点设置
title:  # 标题
subtitle:  # 副标题
description:  # 描述
keywords:   # 关键字
author:  # 作者
language:  # 语言
timezone: # 时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
## 这里是用于收录百度和谷歌生成的sitemap中的URL
url: https://www.jiabeih.cn # 用于绑定域名，其余不用设置
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory  # 目录
source_dir: source # 源文件
public_dir: public # 生成网页的文件
tag_dir: tags # 标签
archive_dir: archives # 归档
category_dir: categories # 分类
code_dir: downloads/code 
i18n_dir: :lang # 国际化
skip_render: 

# Writing  # 写作
new_post_name: :title.md # File name of new posts  # 新文章标题
default_layout: post # 默认模板 ( post page photo draft)
titlecase: false # Transform title into titlecase  # 标题转换成大写
external_link: true # Open external links in new tab   # 新标签页里打开链接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: # 语法高亮
  enable: true
  line_number: true # 显示行号
  auto_detect: false
  tab_replace:
  
# 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 # 每页文章数，0则不分页
pagination_dir: page

# Extensions # 插件和主题
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment # 部署，发布在github上
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: # 此处写自己的GitHub提交地址
  branch: master
message: '站点更新: {{ now("YYYY-MM-DD HH:mm:ss") }}'

feed: # RSS订阅插件
  type: atom
  path: atom.xml
  limit: 0

plugins: hexo-generate-feed

## 看板娘
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: tororo
  display:
    position: left
    width: 100
    height: 200
  mobile:
    show: false

# 自动生成sitemap(站点地图)
sitemap: 
  path: sitemap.xml
baidusitemap: 
  path: baidusitemap.xml

主题_config.yml：