搭建Hexo博客

当年看着Zippera写的Hexo系列教程，不明所以、莫名其妙地花了三小时左右的时间搭建好Hexo博客后，就一直将就着用到了今天，这次二度玩起Hexo，心想着自己还是需要记录一下的，不好为人师，就只为己用也好啊。好了，废话不能讲太多，切入正题。

基础安装

  • Git
  • Node.js
    注：
    （1）Git和Node.js的安装和普通的桌面应用程序，如QQ的安装没什么两样，无非就是下一步，下一步。
    （2）可能需要科学上网一下，才能下载到Git和Node.js的安装包 安装Hexo
    安装好Git和Node.js后，可以使用Node.js自带的包管理工具npm安装Hexo，命令如下：
    1
    npm install -g hexo-cli

PS:当年Hexo 2.x的时候，安装命令是

npm install -g hexo
不知道为什么现在的3.x版本为什么要变成
npm install -g hexo-cli

初始化Hexo

1
2
3
hexo init <yourfolder>
cd <yourfolder>
npm install

安装Hexo部署git环境

1
npm install hexo-deployer-git --save

这一步是Hexo 3.x才出现的。
修改博客的配置文件_config.yml

1
2
3
deploy:
  type: git
  repo: https://github.com/gitusername/gitusername.github.io.git

这里的type以前是github，3.x版本变成git了，所以多出了上面那个npm install hexo-deployer-git –save的命令repo就是你Github的仓库地址，后面会介绍的。

至此，博客的基础环境搭建完毕！赶快看一下你的博客站点长什么样吧，输入一下命令：


hexo generate //以后可以简写成hexo g

生成完成后，输入：


hexo server //以后可以简写成 hexo s

命令窗口会提示你通过http://localhost:4000 进行预览。

博客写作

写在前面的话：常言道：“工欲善其事，必先利其器”，在开始写博客文章之前，先介绍一下Markdown编辑器吧。如果你是Windows派系的，那么个人认为MarkdownPad是首选，如果用的其他操作系统，那么可以戳这里。另外，简书也是一个很不错的地方，如果你懒得搭建自己的博客，那么简书也是一个很好的选择呢！

新建文章：

1
hexo new [layout] <title>

Hexo 有三种自带布局：post、page 和 draft，默认post，title即你博客文章的标题，新建成功后，命令提示窗口会告诉你你的文章所在位置，一般都在目录/source/_posts/下面，然后用MarkdownPad打开你的新建的文章，开始编写吧。

文章写完后，可以使用

1
2
hexo g
hexo s

然后在浏览器打开localhost:4000预览一下吧！
很简单，有木有！但是，到目前为止，你只能自己在本地访问和查看自己的博客，如果希望别人也可以看到，请继续往下看。

托管到GitHub

注册Github
这个就不介绍了吧，主页在这里。
创建repository
这个也不介绍了，需要注意的是，repository的名字要和Github账号对应，比如我的GitHub账号是deliazhi，那么，我的repository的名字应该为deliazhi.github.io
设置ssh
偷个懒，大家看官方教程吧。
然后执行以下命令：

1
hexo deploy #以后可以简写成 hexo d

然后在浏览器输入你repository的名字看看，比如我的就输入deliazhi.github.io

这部分内容我有些偷懒了，很多都没有详细介绍，不过大家也不用太担心，因为Hexo有庞大的用户群，不管你遇到什么样的问题都能找到解决方案的，放心哈！

个性化你的博客

Hexo有两个配置文件，一个是博客的配置，即 _config.yml文件，还有一个是主题的配置，即/themes/light_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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Delia #博客的标题
subtitle: 用文字书影岁月的痕迹 #博客的副标题
description: 用文字书影岁月的痕迹 #对博客的描述，
author: Delia #博客的作者
email: #
language: zh-cmn-Hans #中文
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://deliazhi.github.io/ #如果你购买了自己的域名，这里可以直接写你的域名地址
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:
# 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
# RSS
plugin: hexo-generator-feed
#Feed Atom
feed:     
type: atom
path: atom.xml
limit: 20
## Themes: https://hexo.io/themes/
theme: yilia
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/deliazhi/deliazhi.github.io.git
#书影
image_stream:
  #jquery: //cdn.bootcss.com/jquery/2.1.0/jquery.min.js
  jquery: false
  jquery_lazyload: //cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.min.js
  img_placeholder: http://ww4.sinaimg.cn/large/e724cbefgw1etyppy7bgwg2001001017.gif
#打赏
donate:
  enable: true
  text: Enjoy it ? Donate me !  欣赏此文？求鼓励，求支持！
  wechat: /img/common/wechat.jpg
  alipay: /img/common/alipay.jpg

在介绍主题配置文件之前，我们先说一说Hexo的主题吧。
Hexo的默认主题是landscape，不过貌似留用这个主题的人很少，大家会选择自己喜欢的主题，或者大神都是自己开发主题的哈！
更换主题
跟换主题只需两步走：
（1）下载主题

1
git clone 主题的github地址

（2）配置主题
找到博客的配置文件，找到里面的theme，在其后写上你喜欢的主题名称。

注：Hexo的主题有很多，我就简单介绍两个，一是next，有非常全面的说明文档，也比较简洁。还有一个就是我一眼看中的yilia啦，没有为什么，就是第一眼就喜欢它了。

（话说Python很强大啊，也想学习一下怎么用python爬一下Hexo主题，并给出star排名啊!）

主题的配置文件如下：

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
# Header
menu:
  文字: /
  书影: /favourite
  岁月: /favourite/photoes.html
  #友链: /favourite/links.html
  #随笔: /tags/随笔
# SubNav
subnav:
  github: #
  weibo: #
  #rss: /atom.xml
  #zhihu: "#"
  douban: #
  #mail: #
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"
rss: /atom.xml
# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: 
# Content
excerpt_link: 阅读全文
fancybox: true
mathjax: false
#top: true
# 是否开启动画效果
animate: true
# 是否在新窗口打开链接
open_in_new: false
# Miscellaneous
google_analytics: ''
favicon: img/common/favicon.png
#你的头像url
avatar: /img/common/touxiang.jpg
#是否开启分享
share_jia: true
share_addthis: false
#是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论
duoshuo: deliazhi
# 如不需要，将该项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  tagcloud: '标签'
  #friends: '友链'
  aboutme: '关于我'
#friends:
  #友情链接1: http://localhost:4000/
  #友情链接2: http://localhost:4000/
  #友情链接3: http://localhost:4000/
  #友情链接4: http://localhost:4000/
  #友情链接5: http://localhost:4000/
  #友情链接6: http://localhost:4000/
aboutme: Delia,<br>天秤座，程序媛。<br><br>喜文字<br>爱拍照<br>亲自然

差不多就这样吧，这篇文章有些长了，后面我再写一篇文章，专门介绍如何给Hexo博客增加一些小功能吧。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

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

Delia,<br>天秤座，程序媛。<br><br>喜文字<br>爱拍照<br>亲自然