Hexo使用总结

发表于 | 分类于

前言

利用Hexo搭建个人blog有段时间了，Hexo是一个基于Node.js的静态博客程序，而作为一个后端代码狗对于js的了解实在太少，所以有必要在这对Hexo做一个简单的总结，顺便记录下搭建过程中遇到的一些蛋疼的问题。

Hexo简介

这里引用下Hexo官网的说法：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo安装

Hexo的安装过程可以参考Hexo官网文档，这里不在详细的列出，需要注意的是现在Hexo已经升级到3.0，而网上搜到的安装过程大多是hexo2.0时的，3.0和2.0有些差异。

Hexo文件夹目录结构

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

站点_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
# Hexo Configuration## Docs: http://zespia.tw/hexo/docs/configure.html## Source: https://github.com/tommy351/hexo/

# Site 这里的配置，哪项配置反映在哪里，可以参考我的博客
title: Zippera's blog #站点名，站点左上角
subtitle: Walk steps step by step #副标题，站点左上角
description: Walk steps step by step #给搜索引擎看的，对站点的描述，可以自定义
author: zippera #在站点左下角可以看到
email: #你的联系邮箱
language: zh-CN #中国人嘛，用中文

# URL #这项暂不配置，绑定域名后，欲创建sitemap.xml需要配置该项## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://zipperary.com
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories

# Writing 文章布局、写作格式的定义，不修改
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
max_open_file: 100
filename_case: 0
highlight:
  enable: true
  backtick_code_block: true
  line_number: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives 默认值为2，这里都修改为1，相应页面就只会列出标题，而非全文## 2: Enable pagination## 1: Disable pagination## 0: Fully Disable
archive: 1
category: 1
tag: 1

# Server 不修改## Hexo uses Connect as a server## You can customize the logger format as defined in## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: false
logger_format:

# 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: MMM D YYYY
time_format: H:mm:ss

# Pagination 每页显示文章数，可以自定义，我将10改成了5## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: page

# Disqus Disqus插件，我们会替换成“多说”，不修改
disqus_shortname:

# Extensions 这里配置站点所用主题和插件，暂默认，后面会介绍怎么修改## Plugins: https://github.com/tommy351/hexo/wiki/Plugins## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: light
exclude_generator:
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

# Deployment 站点部署到github要配置，上一节中已经讲过## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
  type: git
  repository: https://github.com/zippera/zippera.github.io.git
  branch: master

主题_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
# Header
menu:#站点右上角导航栏，暂时默认，后面介绍修改
  首页: /
  归档: /archives
  旅行: /travel
  关于: /about

# Content
excerpt_link: 阅读更多
fancybox: true

# Sidebar#网站右边框
sidebar: right
widgets:
- recent_posts
- category
#- tag
- tagcloud
#- archive
thumbnail: true

# Contacts#网站左边个人信息栏
contacts:
  github: http://github.com/hellochensq
  weibo: http://www.weibo.com/sqchen
  linkedin: https://cn.linkedin.com/pub/仕强-陈/58/72a/909
  csdn: http://blog.csdn.net/chen820655096
  rss: /atom.xml

# Links#外链
links:
  Hexo: http://hexo.io

# Miscellaneous
google_analytics:
favicon: /favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:

# CNZZ id#cnzz统计网站访问
cnzz: 1255239496

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds

模板文件

source

存放源文件比如文章的markdown

themes

主题

构建站点中遇到的问题

  1. icarus主题默认的markdwon引用方式是英文的，显示中文非常不和谐，这个就需要自己去改css样式中的blockquote，路径为icarus\source\css_partial\article.styl
  2. 代码块显示行号字体过小，可以在icarus\source\css_partial\highlight.styl中修改
  3. icarus默认是没有目录的，这个可以参考网上的教程

  4. icarus的归档样式不是很好，我参考了@jamspan的代码进行了修改,具体修改可见归档样式修改和分类展示具体列表，另外还需要注意修改主站点配置文件_config.yml中的这段

    1
    2
    3
    4
    5
    6
    7
    # Archives 默认值为2，这里都修改为1，相应页面就只会列出标题，而非全文
    ## 2: Enable pagination
    ## 1: Disable pagination
    ## 0: Fully Disable
    archive: 1
    category: 1
    tag: 1

  5. 向百度和google提交站点地图，提交过程中关键点在于网站权限认证，我用的是添加meta标签的方式，meta标签需要添加在Hexo\themes\jacman\layout_partial\head.ejs中 之间具体过程可参考

  6. 在首页不全部显示文章内容只显示摘要，可以在文章中添加只显示摘要需要在文章中添加
  7. 对Hexo进行修改和扩展可以参考Hexo官方给出的api和各种函数

Hexo个人站点可以考虑的功能

  • 双部署在github和gitcafe上，这样可以加快国内的访问速度，可参考1和2,另外要注意

    • GitCafe需要在项目设置中添加自定义域名，而且如果DNSPOD的解析方式是CNAME则记录值应填gitcafe.io
    • 在完成双部署设置之后，hexo d -g后有可能会出现文章没有更新的情况，可以尝试把hexo目录下的.deploy_git目录删除，然后hexo clean最后再hexo d -g

  • 相册功能,可参考