Hexo 安装配置指南(一) -- 基础篇

安装指南

1.前言

以前一直有写博客的心，但是一直就是折腾折腾就不搞，最早的时候是见到同学自己搞域名在上面写自己的ACM题解，感觉好酷啊，自己也想在上面写点东西，后来就自己折腾了一个域名，在HawkHost买了一个虚拟服务器，但是搭建好了WordPress后就懒得折腾了，富文本编辑器写起东西总感觉怪怪的。套用的主题虽然好看，但是发现如果想要像主题一样的效果，自己还是要重新配置的。。。

然后就懒得折腾了，后续不少的技术笔记和文章都是直接写在有道云笔记上了，后来突然发现了Hexo这个博客框架，感觉非常符合自己对博客的要求，简单明了，对于主题和内容都不需要折腾，上手直接用MarkDown写就好了，倍感欣慰。

如果你也是不想折腾，就像整理下自己的技术笔记或者想写点东西给其他人看的话，我推荐你也试试用Hexo这个博客框架，他的文档非常的详细，非常适合想写文章的人。(如果比较喜欢折腾的话，也可以试一下Keystonejs这个内容管理框架，开发起来非常的方便好用)

好啦，废话不多说，下面就是详细的Hexo安装详情了。

2.准备工作

在安装Hexo前请先确认准备工作是否到位(已经做好准备的小伙伴可以直接跳过本章节)

  • Ubuntu

    • npm
    • node.js
    • npm或者cnpm(由于墙的缘故，国内推荐使用cnpm)

  • Windows

    • gitbash
    • node.js
    • npm或者cnpm(由于墙的缘故，国内推荐使用cnpm)

2.1 Ubuntu 配置安装环境

Ubuntu系统安装Nodejs有很多种方法，但是一般像apt-get等方法安装的nodejs往往不是最新版本，在这里我推荐一种简单的方法确保你的nodejs版本是最新的发布版(推荐在较好网络环境下使用)

1
2
3
4
5
6
7
8
# 如果还没有npm的小伙伴需要先安装npm
$ sudo apt-get install npm
# node有一个模块叫n，是专门用来管理node.js的版本的，我们可以通过npm来安装这个模块
$ sudo npm install -g n
# 然后安装或者更新node.js到最新稳定版
$ sudo n stable
# 测试是否安装成功
$ node -v

2.2 Windows平台 配置安装环境

waiting for next

3. Hexo 基础安装配置

在已经进行完准备工作后我们就可以开始进行Hexo的安装配置了，Windows请在GitBash环境下进行安装，Ubuntu则直接在terminal中进行安装操作，接下来所有使用cnpm的地方，你都可以用npm代替．

1
2
3
4
5
6
7
8
9
10
11
12
13
# 首先我们需要在全局安装hexo的命令
$ sudo cnpm install hexo-cli -g
# 在安装完成后,就可以创建hexo的项目了
$ hexo init blog   # blog 是存放博客的文件夹名
# 打开创建的文件夹
$ cd blog
# 通过cnpm安装相关的依赖
$ sudo cnpm install
# 运行hexo的服务
$　hexo server
# ----------------------------
# INFO  Start processing
# INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

打开浏览器访问http://localhost:4000/

4. Hexo 主题配置

虽然我们的网站已经运行起来了,看起来也不错,但是如果我们希望使用其他人的主题怎么办呢?

在blog文件夹上有一个配置用的文件,他的名字叫做_config.yml这就是Hexo中用来配置网站的文件,在里面你可以配置这个网站的站点信息,也可以配置静态页面发布的地址.

4.1 Hexo 主题推荐

在进行网站配置前,我先给大家推荐几个主题好了.(我个人选用的是yilia,这个博客比较简介,而且主题配置文件非常的清晰)

4.2 Hexo 主题配置

那么接下来进入正题,首先是如何进行主题的安装,上述Hexo的主题中一般已经表明了如何安装他们的主题,除了他们表明的方法外,直接从github下载主题放在blog/themes中即可

下面我将用yilia作为演示更换Hexo的主题和配置

  • Step one: 下载主题
1
2
# 直接在blog文件夹下用git命令克隆yilia的主题
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
  • Step Two: 安装主题

下图是Hexo主页的_config.yml,在里面你能找到theme这个字段

如果需要替换成yilia这个主题的话,你只需要将landscape这个字段换成yilia,其他主题也是一样的

结果展示

  • Step Three 配置主题

在更换完配置后,你是不是发现还有很多地方感觉怪怪的?没错,这是因为你现在用的还是主题默认的配置,从文字的显示到头像的内容,都需要你进行重新配置,这个配置文件就存在与/blog/themes/yilia中的_config.yml中(其他主题会有不同的配置方法,但是都是在主题下的_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
# 主题默认配置
menu:
  主页: /
  随笔: /tags/随笔/
# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:litten225@qq.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"
rss: /atom.xml
# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: 
# Content
# 文章太长，截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false
# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: 
# 微信二维码图片地址
weixin: 
# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'
# 是否有快速回到顶部的按钮
top: true
# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png
#你的头像url
avatar:
#是否开启分享
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:
  友情链接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: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家
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
# 个人定制后的配置
# Header
menu:
  My Blog: https://michaeljiang.me
  GitPage: https://michaeljiangplus.github.io
  主页: /
  技术笔记: /tags/技术笔记/
  项目日志: /tags/项目日志/
# SubNav
subnav:
  github: "https://github.com/MichaelJiangPlus"
  zhihu: "https://www.zhihu.com/people/jiang-zhan-xiang/activities"
  jianshu: http://www.jianshu.com/u/b4a9d5c2f31d  
  rss: "#"
rss: /atom.xml
# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root:
# 文章太长，截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: true
# 是否在新窗口打开链接
open_in_new: false
# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 1
# 打赏wording
reward_wording: '谢谢'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: /assets/img/alipay.png
# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'
# 是否有快速回到顶部的按钮
top: true
# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /assets/img/favicon.png
#你的头像url
avatar: /assets/img/icon.png
#是否开启分享
share_jia: true
#Gitment
gitment_owner: secrecy       #你的 GitHub ID
gitment_repo: secrecy          #存储评论的 repo
gitment_oauth:
  client_id: secrecy           #client ID
  client_secret: secrecy       #client secret
# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false
# 智能菜单
smart_menu:
  innerArchive: '所有文章'
  aboutme: '关于我'
aboutme: 还在迷茫阶段<br>目前正在探索:<br><br>前端<br>Tensorflow

5. Hexo 使用

  • Step one : 新建文章

现在既然已经成功运行我们的hexo了,那我们要怎么创建一篇新的文章呢?有两种方法,第一种是直接将Markdown的文件直接拷贝到/blog/source/_posts下,在Markdown的页首输入下列字段

1
2
3
4
5
---
title: Hexo 安装配置指南(一) -- 基础篇
date: 2017-09-30 14:40:01
tags: [Hexo,技术笔记]
---

或者用hexo的自动创建命令创建一篇新的文章,在里面进行修改

1
2
3
4
# 请注意要在我们blog的根目录下进行新建
$ hexo new '新建的文章'
# -------------------------------
# Created: ~/Project/blog/source/_posts/新建的文章.md

打开文件后你会发现这样的参考内容

剩下的内容你就可以直接使用Markdown进行书写啦

  • Step two : 生成新的文章

如果希望生成新的文章,一般我们会直接在命令行中进行操作

1
2
3
4
5
6
# 清空原有的文章和内容
$ hexo clean
# 新建文章和新的内容
$ hexo g
# 从新运行hexo的服务
$ hexo server

下图就是最新的运行结果啦

附录

附录1 : 常用命令

1
2
3
4
5
6
7
8
# hexo的常用命令
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
$ hexo generate #生成静态页面至public目录
$ hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
$ hexo deploy #将.deploy目录部署到GitHub
$ hexo help  #查看帮助
$ hexo version  #查看Hexo的版本

附录2 : 参考文献

扫一扫，分享到微信

微信分享二维码

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>前端<br>Tensorflow