Hexo＋GitHub搭建个人博客

前言

博客，Blog，是使用特定的软件，在网络上出版、发表和张贴个人文章的人，或者是一种通常由个人管理、不定期张贴新的文章的网站。

目前国内外有非常多的博客站点和社区，比如CSDN和Blogger。本文利用Hexo和GitHub构建个人博客，希望对大家有帮助。

准备

系统环境：

Windows/Linux/macOS（推荐Windows）

注册准备：

GitHub

GitHub：

https://github.com/

软件安装：

Git + Node.js

Git：

https://git-scm.com/

Node.js：

http://nodejs.cn/

环境部署

1. 下载安装Git

网址：https://git-scm.com/downloads

注意：以Windows环境为例，一直”下一步”到安装完成，可以右键看到Git Bash Here和Git GUI Here。

2. 下载安装Node.js

网址：http://nodejs.cn/download/

3. 注册GitHub

网址：https://github.com/join?source=header-home

注意：用户名和邮箱是常用的，需要以后各种链接都会建立在用户名和邮箱上，所以确定好后尽量不要修改。

4. 新建项目库

网址：https://github.com/new

注意：每个帐号只能有一个仓库来存放个人主页，而且仓库的名字必须是

[username]/[username].github.io（大小写变化无影响），这是特殊的命名约定，你可以通过http://[username].github.io 来访问你的个人主页。

5. 生成SSH key

上传文件需要配置ssh key，不然无法上传，需要先查看本地是否含有SSH Key，若含有，则需要将本地的Key删除。

检查本地SSH key：

ls -al ~/.ssh

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

git config --global user.name ""

git config --global user.email ""

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

ssh-keygen -t rsa -C ""

生成后，可在~/.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 Key

SSH Key测试连接：

结果大致如下格式：

搭建博客

1. 安装Hexo

npm install -g hexo-cli

2. 初始化建站

hexo init

cd

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. 调试

hexo s --debug

命令行输出：

...

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

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

初始页

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

配置主题

Hexo开发者有很多主题可供选择，也有很多特效可以实现，具体可查看网址（本教程以安装next主题为例）。

网址：

https://hexo.io/themes/

注：站点配置文件为./_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.主题设定

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支持语言可参照官网：

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

#FBPage: 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文件，可用Sublime等编辑器修改。

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到github

hexo d -g

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

博客首页

参考文章

1.https://xuhaoblog.com/2016/05/06/hexo-github-pages/

3.https://hexo.io/