hexo

从零开始开发一个hexo博客 😋

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

为什么要做博客?

提升自我

不管是自己开发还是使用开源博客，从申请网站、申请域名、网站发布等过程中你会受益良多，当博客搭建好以后你就不再是一个只会复制粘贴的码农了。

写博客会巩固自己掌握的知识点，并且提升归纳总结与表达能力。

还有，好的博客是面试要用。。。

获取动力

当你一篇博客获赞成千上万时，你会更有动力写下去的。

尤其是一个系列或者一个项目，完整的分享出来，那种感觉真的是成就满满。

传播知识

当我们还是小白的时候，看各位大神博客学知识，当我们遇到问题的时候，一个好的博客能瞬间解决我们的问题。

现如今我们也掌握了更高级的知识与技能，是时候分享出来造福他人了。

为什么选择 hexo

快速、简洁且高效的博客框架

  • 基础搭配：Git + Github Pages + Hexo

    • 优点
    • 免费 - GitHub
    • 快速 - Node 运行环境、前端个人站点首选
    • 简洁 - MarkDown
    • 轻量 - 全部静态文件
    • 支持导入 WordPress 等博客

  • 不足

    • 多媒体管理较难

配置环境/初始化项目

1.安装 nodejs

2.创建项目

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

编写文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 创建文章

hexo n '我的第一篇博客文章'
hexo new '我的第一篇博客文章'

# 清理缓存

hexo cl
hexo clean

# 打包

hexo g
hexo generate

# 发布

hexo d
hexo deploy

# 运行

hexo s
hexo server -p 80

发布到 github

在 github 创建仓库 名称为：cxvh.github.io

创建成功后的 git 地址：https://github.com/cxvh/cxvh.github.io

1
npm install --save hexo-deployer-git

打开 _config.yml 文件

  • 找到
1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''
  • 改为
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git,
  repo:https://github.com/cxvh/cxvh.github.io,
  branch:main

部署到 git

hexo d

更新仓库

hexo g

hexo d

评论

申请 OAuth

1
2
3
4
5
6
7
8
9
10
11
Application name
blog

Homepage URL
https://cxvh.github.io/

Application description
BARAN的博客

Authorization callback URL
https://cxvh.github.io/

使用皮肤

把皮肤克隆到 themes 文件夹下面

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

安装皮肤需要的依赖包

npm install hexo-renderer-less hexo-generator-feed hexo-helper-qrcode hexo-generator-json-content lodash install --save

开启标签页

hexo new page tags

修改 hexo/source/tags/index.md 的元数据

1
2
3
layout: tags
comments: false
---

开启分类页

hexo new page categories

修改 hexo/source/categories/index.md 的元数据

1
2
3
layout: categories
comments: false
---

处理高版本移除全局变量 lodash 出现的 bug

themes\indigo\scripts\plugins.js

1
2
const _ = require('lodash')
hexo.extend.helper.register('_', ()=> _)

启用皮肤

_config.yml

theme: landscape 改为 theme: indigo

常见 问题

标题规范

正确的示例（三级标题前面必须是二级标题，五级标题前面必须是四级标题）

# 一级标题

## 二级标题

### 三级标题

### 三级标题

#### 四级标题

##### 五级标题

错误示例

toc 渲染的时候会多出二级标题的 ol，就会导致样式错位

# 一级标题

### 三级标题

toc 渲染的时候会多出三级标题的 ol，就会导致样式错位

## 二级标题

#### 四级标题

修改本地样式不生效？

因为主题默认引用 cdn 样式，只有主题更新时，cdn 中的样式才会变化。 如果想使用自己修改的样式，需要把修改配置中的 cdn: false。这样就不在引用 cdn 资源，使用本地资源了。

打开 themes\indigo*config.yml

查找 cdn: true *替换_ cdn: false

使用 ‘# 中文标题’ 可能会报错

打开 \themes\indigo\source\js\main.js

查找 toc.querySelector('a[href="#' + titles[0].id + '"]')

替换 (toc.querySelector('a[href="#' + titles[0].id + '"]')||toc.querySelector('a[href="#' + encodeURIComponent(titles[0].id) + '"]'))

查找 toc.querySelector('a[href="#' + titles[i].id + '"]')

替换 (toc.querySelector('a[href="#' + titles[i].id + '"]')||toc.querySelector('a[href="#' + encodeURIComponent(titles[i].id) + '"]'))

themes\indigo\layout_partial\post\copyright.ejs 报错

查找 _.template(theme.postMessage)(locals)

替换 theme.postMessage.replace(/#href#/g,page.permalink.replace(/index\.html$/, ''))

\themes\indigo_config.yml 配置

postMessage: 原始链接：<a href="#href#" target="_blank" rel="external">#href#</a>

如何设置文章摘要

在 Markdown 中加 <!-- more -->

文章如何添加多个标签

1
tags: [a, b, c]
1
2
3
4
tags:
- a
- b
- c

修改 brand 图片（菜单上方背景图）

替换 themes\indigo\source\img\brand.jpg，保持原文件名不变。

如何在文章中使用图标

先到 fontawesome 找到你需要的图标名，比如：book，按以下格式使用：

1
<i class="icon icon-book"></i>

图标样式前缀均为 icon，此外还有 5 个图标大小调节类和 1 个间距类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 1.3倍大小 -->
<i class="icon icon-book icon-lg"></i>
<!-- 2倍大小 -->
<i class="icon icon-book icon-2x"></i>
<!-- 3倍大小 -->
<i class="icon icon-book icon-3x"></i>
<!-- 4倍大小 -->
<i class="icon icon-book icon-4x"></i>
<!-- 5倍大小 -->
<i class="icon icon-book icon-5x"></i>
<!-- 5px右边距 -->
<i class="icon icon-book icon-pr"></i>
<!-- 5px左边距 -->
<i class="icon icon-book icon-pl"></i>

个别图标无法显示

如果你的浏览器安装了 ADBlock，它会屏蔽 SNS 相关的内容，比如：Github。

解决办法：可配置 ADBlock 不在你的站点运行。

生成站点后没有样式

1
npm install hexo-renderer-less --save

更改样式后网站没有生效

确认非缓存问题后，执行 hexo clean 再进行生成上传。

更改站点配色

编辑 themes\indigo\source\css\_partial\variable.less，更改对应的颜色变量。

配色参考：material design palette

注意：使用自定义配色时需把主题配置中的 cdn 关闭，cdn: false。

添加 404 页面

在 hexo/source 目录内新建 404.html。

设置元数据信息，如果不想套用主题布局可设置 layout 为 false。

1
2
3
layout: false
title: "My Blog Name | 404"
---

在博客中使用 Emoji

在文章中输入 搜狗等输入法 或其他输入法自带的 Emoji 会自动显示出来

站点地图/方便收录

查看是否被收录

site:cxvh.github.io

进入：百度搜索提交入口

验证个人网站 提交 url 地址

增加站点地图

npm install hexo-generator-sitemap hexo-generator-baidu-sitemap --save

目录下找到 sitemap.xml 以及 baidusitemap.xml 这两个文件已经生成了。

hexo g

hexo d

配置

站点配置

编辑站点配置文件，hexo/_config.yml。

启用主题

1
theme: indigo

基本配置

为了得到更好的使用体验，以下内容请务必填写完整，因为这些内容会在主题中得到展示。更多

1
2
3
4
5
6
7
title: your title
subtitle: your subtitle
description: your description
keywords: your keywords
author: your name
email: your email
url: your site url

feed 配置

参考 hexo-generator-feed

1
2
3
4
feed:
  type: atom
  path: atom.xml
  limit: 0

jsonContent 配置

为了节约资源，可以对 jsonContent 插件生成的数据字段进行配置，减少数据文件大小。参考 hexo-generator-json-content

主题配置

编辑主题配置文件，themes/indigo/_config.yml。

左侧菜单

默认配置如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
menu:
  home:
    text: 主页
    url: /
  archives:
    url: /archives
  tags:
    url: /tags
  github:
    url: https://github.com/cxvh
    target: _blank
  qq:
    url: tencent://message/?uin=630749264&Site=Senlon.Net&Menu=yes
    target: _blank
  link:
    text: 测试
    url: /

添加新菜单项时，在 menu 下增加子属性即可。属性说明如下：

1
2
3
4
5
menu:
 link:               # fontawesome图标，省略前缀，本主题前缀为 icon-，必须
   text: About       # 菜单显示的文字，如果省略即默认与图标一致，首字母会转大写
   url: /about       # 链接，绝对或相对路径，必须
   target: _blank    # 是否跳出，省略则在当前页面打开

fontawesome 图标已集成到主题中，你可以到 这个页面 挑选合适的图标。

favicon

站点 logo，显示在浏览器当前标签页左上角。

1
favicon: /favicon.ico

头像

位于左侧菜单上方

1
avatar: /img/logo.jpg

email

1
email: 630749264@qq.com

color

设置 Android L Chrome 浏览器状态栏颜色，不需要可去除此项或设为 false。

1
color: '#3F51B5'

页面标题 (card theme)

自定义归档、标签、分类页的大标题。

1
2
3
tags_title: Tags
archives_title: Archives
categories_title: Categories

文章摘要

可以在 Markdown 文件中加 <!--more-->以分割摘要与文章正文。未设置时，按 excerpt_length 设置截取。

1
2
3
4
5
6
# 文章摘要渲染方式: 为 true 时将渲染为 html，否则为文本
excerpt_render: false
# 截断长度
excerpt_length: 200
# 文字正文页链接文字
excerpt_link: 阅读全文...

mathjax

开启后，使你的站点支持公式渲染，by mathjax。 请按需开启，因为此项需要加载额外的 js 文件。

1
mathjax: false

分享

文章分享开关，by jiathis-api。

1
share: true

文章打赏

默认开启

1
2
3
4
reward:
  title: 谢谢大爷~             #显示的文字
  wechat: /img/wechat.jpg     #微信，关闭设为 false
  alipay: /img/alipay.jpg     #支付宝，关闭设为 false

在 crad theme 中，可以通过在 markdown 头部添加 reward: false 来控制某些不想开启打赏的页面。

关闭

1
reward: false

二维码请自行从微信、支付宝中下载。当两个二维码同时存在时，为保持显示效果的一致性，注意截图时的边框留白保持一致。必要时可借助 PS 等图片处理工具进行图片大小裁剪、压缩等。

站内搜索

是否开启搜索

1
search: true

布局

开启后，文章页在大屏下会隐藏左侧菜单，专注阅读。

1
hideMenu: true

Toc

开启文章内容导航。

1
2
3
#toc: false  #关闭
toc:
  list_number: false  # 决定导航使用的标签， true 为 ol， false 为 ul。

copyright (card theme)

文章页版权声明内容，hexo 中所有变量及辅助函数等均可调用。

copyright: 这里写留言或版权声明：#href#

less

设置 less 编译时的入口文件路径，hexo-renderer-less。

1
2
3
4
less:
  compress: true    # 是否压缩css
  paths:
    - source/css/style.less

评论

集成了 disqus、友言、gitment 和 valine，开启其一即可。

数据统计

集成的有谷歌、腾讯、百度和 CNZZ，请填写你的站点标识。

1
2
3
4
google_analytics: key
tajs: 站点id
baidu_tongji: 站点id
cnzz: 站点id

谷歌站点验证 (card theme)

1
google_site_verification: false

规范网址 (card theme)

让搜索引擎重定向你的不同域名、不同子域、同域不同目录的站点到你期望的路径。使用规范网址

1
canonical: https://cxvh.github.io

版权起始年份

1
since_year: 2006

自定义页面关于

用户页面中作者相关的描述性文字，如不需要设为 false

1
about: 用户页面中作者相关的描述性文字，如不需要设为 false

cdn

开启后将使用 unpkg cdn 最新的主题样式，如果想让你的自定义样式生效，把此项设为 false。

1
cdn: true

ICP 备案号

ICP_license: 陕 ICP 备 1123456 号-1

自定义页面

创建自定义页面

1
hexo new page custom

执行命令后会在你的 Hexo 根目录 source/ 目录下生成一个与你刚才输入的 custom 一样的文件夹，里面只有一个 index.md。

1
2
3
4
---
title: custom
date: 2020-10-25 22:49:30
---

页面配置

1
2
3
4
5
6
layout: page      # 必须
title: pageTitle  # 必须，页面名称
description: 用户自定义页面功能演示       # 页面二级标题，描述性文字
comments: false     # 禁用评论，可选，默认开启
reward: false       # 禁用打赏，可选，默认开启
----