@WillireamAngel 2018-04-24T12:21:22.000000Z 字数 6297 阅读 1648

Hexo+GitHub搭建个人博客

Blog

前言

在网上找了很多教程，也尝试了很多，最后利用Hexo+GitHub搭建了个人博客，以此记录。

准备

系统环境：Windows/Linux/macOS（推荐Windows）
注册准备：GitHub
GitHub：https://github.com/
软件安装：Git + Node.js
Git：https://git-scm.com/
Node.js：http://nodejs.cn/

环境部署

下载安装Git
网址：https://git-scm.com/downloads
注意：以Windows环境为例，一直”下一步”到安装完成，可以右键看到Git Bash Here和Git GUI Here。
下载安装Node.js
网址：http://nodejs.cn/download/
注册GitHub
网址：https://github.com/join?source=header-home
注意：用户名和邮箱是常用的，需要以后各种链接都会建立在用户名和邮箱上，所以确定好后尽量不要修改。
新建项目库
网址：https://github.com/new
注意：每个帐号只能有一个仓库来存放个人主页，而且仓库的名字必须是[username]/[username].github.io（大小写变化无影响），这是特殊的命名约定，你可以通过http://[username].github.io 来访问你的个人主页。
生成SSH key
上传文件需要配置ssh key，不然无法上传，需要先查看本地是否含有SSH Key，若含有，则需要将本地的Key删除。
检查本地SSH key：

ls -al ~/.ssh

设置user name和email（设置常用即可，无需与GitHub信息相同）：

git config --global user.name "<your name>"
git config --global user.email "<your email>"

生成SSH key（一直Enter，可不设置密码，设置密码需记住）：

ssh-keygen -t rsa -C "<your GitHub email>"

生成后，可在~/.ssh/下生成了两个文件id_rsa 和 id_rsa.pub。

6.链接Git和GitHub
本地Git和远程GitHub通过SSH key链接，需要在GitHub上添加SSH key。
网址：https://github.com/settings/keys
查看本地SSH key：

cat ~/.ssh/id_rsa.pub

添加SSH Key（命名随意，语义化即可）

测试连接：

ssh git@github.com

结果大致如下格式：

$ ssh git@github.com
PTY allocation request failed on channel 0
Hi WillireamAngel! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

搭建博客

1.安装Hexo

npm install -g hexo-cli

2.初始化建站

hexo init <your blog folder>
cd <your blog folder>
npm install

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

查看应用程序如下（可按需移除，一般可不动）：

$ cat package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.4.2"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-deployer-git": "^0.3.1",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  }
}

3.配置_config.yml
网址：https://hexo.io/zh-cn/docs/configuration.html
编辑_config.yml如下：

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site  这下面的几项配置都很简单，你看我的博客就知道分别是什么意思
title: blog name    #博客名
subtitle: **********    #副标题
description: ******************* #用于搜索，没有直观表现
author: authorname  #作者
language: zh-Hans   #语言
timezone:   #时区，此处不填写，hexo会以你目前电脑的时区为默认值
# 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:
# 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
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
  tab_replace:
# 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: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
plugins:
- hexo-generator-feed
theme: next #使用的主题
feed:   #之后配置rss会用，此处先不配置这个
  type: atom
  path: atom.xml
  limit: 20  
# Deployment    用于部署到github，
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:ssh://git@github.com/[githubname]/[库名].github.io
  branch: master

4.调试
网址：https://hexo.io/zh-cn/docs/commands.html

hexo s --debug

命令行输出：

...
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时浏览器输入http://localhost:4000/可预览界面，按Ctrl+C可停止调试。

配置主题

HEXO开发者有很多主题可供选择，也有很多特效可以实现，具体可查看网址（本教程以安装next主题为例）。
网址：
- https://hexo.io/themes/
- http://theme-next.iissnan.com/
注：站点配置文件为./_config.yml，主题配置文件为./themes/next/_config.yml。
1.安装next

cd your-hexo-site #进入Blog文件夹
git clone https://github.com/iissnan/hexo-theme-next themes/next

2.站点配置文件启用主题（参见上述配置）

theme: next

3.调试验证

hexo s --debug

4.4.主题设定
Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme:
- Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
- Mist - Muse 的紧凑版本，整洁有序的单栏外观
- Pisces - 双栏 Scheme，小家碧玉似的清新
以选择 Pisces Scheme为例，修改如下：

#scheme: Muse
#scheme: Mist
scheme: Pisces

5.站点配置文件设定语言

language: zh-Hans

目前Hexo支持语言可参照官网：
http://theme-next.iissnan.com/getting-started.html
6.设置菜单
启用即可，更多说明参见官网。
示例：

menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

7.设置头像
将图片防置在主题目录下，或使用网络图片链接。修改avator，为站点内图片，如：

avatar: /images/avatar.png

也可为网络图片，如：

avatar: http://example.com/avatar.png

8.设置favicon
按要求上传图片到主题文件夹即可。

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

9.其他功能
设置评论区：next内置数个评论站点，按要求设置即可。
设置首页文章预览：

auto_excerpt:
  enable: true

其它参见官网和谷歌百度。
10.bug留意
- 在社区账号设置后会产生main.css生成错误，Social Links栏目按需开启（需处理bug）。

# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
#social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: youremail || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
social_icons:
  enable: false
  icons_only: false
  transition: false

常规使用

1.新建文章

hexo new [title]

此时会有新文章显示在[blog-path]\source\_posts
文章前缀信息如下：

---
title: HEXO
date: 2018-04-24 19:52:25
tags:
  - Hexo
  - Github
categories: Blog
---

hexo文章均采用markdown文件，可用atom等编辑器修改。
2.新建目录
博客中关于、标签和分类等栏目无文件，需要个人手动创建。
新建目录:

hexo new page categories[tags\about]

设置目录:
categories:

---
title: categories
date: 2018-04-23 20:23:17
type: "categories"
layout: "categories"
---

tags:

---
title: categories
date: 2018-04-23 20:23:17
type: "tags"
layout: "tags"
---

3.生成静态页面并push

hexo d -g

此时前台博客就可以看到文章信息更新了。

参考文章

· https://xuhaoblog.com/2016/05/06/hexo-github-pages/
· https://hexo.io/
· http://theme-next.iissnan.com/