Hexo+Github 搭建属于自己的博客

个人博客界面：

这里写图片描述

首先呢，先说一下吧，作为一个程序猿来说，大多的大牛都是使用的是msdn/github这些来交流技术，但是我后来发现csdn上面好多的大牛都已经摒弃csdn，自己搭建个人博客进行发表文章记录点滴了。

虽然说我不会放弃csdn，因为已经养成了习惯了，但是还是想拥有一个自己的博客，那是因为这是一种信仰。

今天呢，花了一天的时候，研究了一下，颇有收获。

搭建个人博客=域名(外网可访问的地址)+外网服务器(外网存储文件图片的地方)+解析(本地与服务器做映射)

也可以先看看我用Hexo搭的博客(不建议用IE浏览器打开)【虽然可能也不是特别好看…】

Hexo简介

　　相信点进来看的都是对 Hexo 已经有了一定了解的吧~简而言之，Hexo 是一个基于 Node.js 的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。其作者是来自台湾的tommy351大神。Hexo 因其界面简洁、美观且对各类人群（不只是程序猿）友好而广受欢迎

基础配置篇

1.安装 & 搭建

1
2
3
4
5
6
•安装Git：安装后，注册 Github 账号，配置 SSH（具体见下一步）,打开 Git Bash,接下来的命令均在Git Bash中执行
•安装Node.js
•安装 Hexo : $npm install -g hexo
•安装依赖包： $npm install
•新建博客文件夹：cd到该文件夹，执行$hexo init
•新建Github仓库：仓库名必须为你的Github名.github.io，要不然就不能使用Github Pages服务了。。。

2.配置 SSH

1
2
3
4
5
6
7
 关于什么是 SSH，请自行百度（我懒..）这里直接讲一下配置步骤。 
•本地生成公钥私钥 
 　$ssh-keygen -t rsa -C "你的邮件地址"
•添加公钥到 Github 
•根据上一步的提示，找到公钥文件（默认为id_rsa.pub），用记事本打开，全选并复制。(或许乱码，那就换一种打开方式吧！)
•登录 Github，右上角 头像 -> Settings —> SSH keys —> Add SSH key。把公钥粘贴到key中，填好title并点击 Add key。
•git bash中输入命令$ssh -T git@github.com，选yes，等待片刻可看到成功提示。(记得：git init.......)
  1. yilia主题下载
1
2
3
4
 yilia 主题是一款简洁美观不失逼格的主题。下载方法有以下两种： 
•进入博客根目录/themes/, 执行
 $git clone https://github.com/iissnan/hexo-theme-yilia.git
•直接进入上面的链接，在项目主页download zip文件，然后解压到博客根目录/themes/ 文件夹
  1. 发布

使用以下两条命令进行发布，发布成功后可在浏览器中使用你的github名.github.io进入你的博客

1
2
$hexo clean
$hexo d -g

Hexo日常使用篇

1.生成静态页面：

1
$hexo generate1

2.本地预览：

1
2
$hexo server//或 hexo s
//然后打开浏览器输入localhost:4000可以预览博客效果，用于调试

3.新建文章

1
2
$hexo new post "title"
//新文章位置：/source/_posts

4.新建页面

1
$hexo new page "title"

5.部署并生成

1
$hexo d -g

6.清除生成的文件和缓存

1
$hexo clean

_config文件配置篇

1.整站配置

直接贴一下我的配置文件吧【路径：博客根目录/_config.yml】

【友情提示：不要用系统自带记事本打开，容易出现编码不一致问题，最好用 Vim, Notepad++ 或 Sublime Text 之类的】

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Aimin-Wang
subtitle: Stay Hungry, Stay Foolish
description: 
keywords:
author: Aimin Wang
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:

# 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
  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
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yilia
plugin:
        -hexo-generator-feed
feed:
        type: atom
        path: atom.xml
        limit: 20

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
        type: git
        repo: git@github.com:aiminwang/aiminwang.github.io.git
        branch: master

jsonContent:
        meta: false
        pages: false
        posts:
                title: true
                date: true
                path: true
                text: false
                raw: false
                content: false
                slug: false
                updated: false
                comments: false
                link: false
                permalink: false
                excerpt: false
                categories: false
                tags: true

2.yilia主题配置

一样贴一下我的主题config文件吧，注意和上面的全局config文件区分。
【路径：博客根目录/themes/next/_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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
# Header

menu:
  主页: /
  分类: /categories
  归档: /archives
  #标签: /tags
  #随笔: /tags/随笔/

# SubNav
subnav:
  github: "https://github.com/aiminwang"
  weibo: "https://weibo.com/u/5839866284?topnav=1&wvr=6&topsug=1&is_hot=1"
  rss: "/atom.xml"
  #zhihu: "#"
  qq: "https://user.qzone.qq.com/751196078/main"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  mail: "mailto:751196078@qq.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content

# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

auto_excerpt:
        enable: true
        length: 130
# 文章太长，截断按钮文字
excerpt_link: more

# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: 
# 微信二维码图片地址
weixin: /img/weixin.jpg

# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 2
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar: /img/touxiang.jpg

#是否开启分享
share_jia: true

#评论：1、多说；2、网易云跟帖；3、畅言；4、Disqus；5、Gitment
#不需要使用某项，直接设置值为false，或注释掉
#具体请参考wiki：https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false

# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '搜索'
  friends: '友链'
  aboutme: '关于'

friends:
  一只IT小小鸟 CSDN: https://blog.csdn.net/qq_34777600
  Hdu oj: http://www.sogou.com/link?url=BluioFHAuoHd9n_SzD_VRWy70yUaL4Tl&query=hdu
  Pk oj: http://www.sogou.com/link?url=TiECA-reDTA2VFaXClSXEQ..&query=poj
  友情链接: http://localhost:4000/

aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家

再来一张界面：

这里写图片描述

修改全局配置文件

此段落引用自Hexo官方文档

您可以在 _config.yml 中修改大部份的配置。

网站

1
2
3
4
5
6
7
8
9

参数			 描述

title 		 网站标题 
subtitle 	 网站副标题 
description  网站描述 
author 		 您的名字 
language 	 网站使用的语言 
timezone 	 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

网址

1
2
3
4
5
参数				   描述					默认值
url 			    网址  
root 	  		    网站根目录  
permalink   	    文章的永久链接格式      :year/:month/:day/:title/ 
permalink_default   永久链接中各部分的默认值
1
如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

目录

1
2
3
4
5
6
7
8
9
10
11
参数 			    描述			                       	默认值


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

文章

1
2
3
4
5
6
7
8
9
10
11
12
13
参数					描述						默认值

new_post_name		 新文章的文件名称 			 :title.md 
default_layout		 预设布局 				    post 
auto_spacing 		 在中文和英文之间加入空格	   false 
titlecase 			 把标题转换为 			   title case false 
external_link 		 在新标签中打开链接			 true 
filename_case 		 把文件名称转换为1小写或2大写  0 
render_drafts 		 显示草稿 				    false 
post_asset_folder 	 启动 Asset 文件夹 		   false 
relative_link		 把链接改为与根目录的相对位址  false 
future 				 显示未来的文章			  true 
highlight 			 代码块的设置

分类 & 标签 

1
2
3
4
5
参数				  描述				默认值

default_category   默认分类           uncategorized 
category_map       分类别名  
tag_map            标签别名

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

1
2
3
参数			   描述			 默认值
date_format    日期格式 		MMM D YYYY 
time_format    时间格式 		H:mm:ss

分页

1
2
3
参数			      描述		         	   默认值
per_page 	    每页显示的文章量(0=关闭分页功能)   10 
pagination_dir  分页目录 						page

扩展

1
2
3
参数					描述
theme 			当前主题名称。值为false时禁用主题 
deploy 			部署部分的设置

配置Deployment

首先，你需要为自己配置身份信息，打开命令行，然后输入：

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

同样在_config.yml文件中，找到Deployment，然后按照如下修改：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

如果使用git方式进行部署，执行npm install hexo-deployer-git –save来安装所需的插件

然后在当前目录打开命令行，输入：

1
2
3
hexo clean
hexo g
hexo d

随后按照提示，分别输入自己的Github账号用户名和密码，开始上传。 然后通过http://yourname.github.io/来访问自己刚刚上传的网站。

添加新文章
打开Hexo目录下的source文件夹，所有的文章都会以md形式保存在_post文件夹中，只要在_post文件夹中新建md类型的文档，就能在执行hexo g的时候被渲染。 新建的文章头需要添加一些yml信息，如下所示：

1
2
3
4
title: hello-world         //在此处添加你的标题。
date: 2014-11-7 08:55:29   //在此处输入你编辑这篇文章的时间。
categories: Exercise       //在此处输入这篇文章的分类。
toc: true                  //在此处设定是否开启目录，需要主题支持。

github账户的注册和配置

第一步: Github注册

打开https://github.com/，在下图的框中，分别输入自己的用户名，邮箱，密码。
这里写图片描述
然后前往自己刚才填写的邮箱，点开Github发送给你的注册确认信，确认注册，结束注册流程。

一定要确认注册，否则无法使用gh-pages！

第二步: 创建代码库

登陆之后，点击页面右上角的加号，选择New repository：
这里写图片描述

新建代码库

进入代码库创建页面：

在Repository name下填写yourname.github.io，Description (optional)下填写一些简单的描述（不写也没有关系），如图所示：
这里写图片描述

注意：比如我的github名称是gdutxiaoxu ,这里你就填 gdutxiaoxu.github.io,如果你的名字是xujun，那你就填 xujun.github.io

第三步: . 代码库设置

正确创建之后，你将会看到如下界面：
这里写图片描述

接下来开启gh-pages功能，点击界面右侧的Settings，你将会打开这个库的setting页面，向下拖动，直到看见GitHub Pages，如图：

这里写图片描述

Github pages

这里写图片描述

点击Automatic page generator，Github将会自动替你创建出一个gh-pages的页面。如果你的配置没有问题，那么大约15分钟之后, yourname.github.io这个网址就可以正常访问了~ 如果yourname.github.io已经可以正常访问了，那么Github一侧的配置已经全部结束了。

将Hexo与github page 联系起来

大概分为以下几步

1
2
3
•配置git个人信息

•配置Deployment

配置Git个人信息

如果你之前已经配置好git个人信息，请跳过这一个 步骤，直接来到

1、设置Git的user name和email：(如果是第一次的话)

1
2
git config --global user.name "aiminwang"
git config --global user.email "751196078@qq.com"

2、生成密钥

1
ssh-keygen -t rsa -C "751196078@qq.com"

配置Deployment

同样在_config.yml文件中，找到Deployment，然后按照如下修改：

比如我的仓库的地址是git@github.com:aiminwang/aiminwang.github.io.git，所以配置如下

1
2
3
4
deploy:
  type: git
  repo: git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git
  branch: master

搭建过程中遇到很多问题，一步一步地解决，就会有Accept的喜悦，颇有收获。

赏

谢谢你请我吃糖果

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家