hexo介绍

  • 超快速度

    Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。

  • 支持 Markdown

    Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。

  • 一键部署

    只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。

  • 插件和可扩展性

    强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

安装10以上版本的nodejs

略...

然后选择个非中文文件夹,按照如下步骤进行安装测试

1
2
3
4
5
- npm install hexo-cli -g
- hexo init {blog路径}
- cd {blog路径}
- npm install
- hexo server

测试成功, 按照如下步骤进行

首先准备一个好用的工具,这里我用typora,然后进行如下配置,将图片复制位置改变一下(也可以选择用图床)

修改插入图片方式

hexo普通插入图片的方式只能用url,如果用本地路径的方式有问题,所以我们这里使用一个依赖

hexo-asset-image: 一定要用下面的这个包,不要使用npm install hexo-asset-image –save这个命令安装,这个安装完引用的图片路径不对

  • npm install https://github.com/CodeFalling/hexo-asset-image --save
  • 修改_config.yml文件的post_asset_folder:选项为true
  • 在md文档中使用相对路径,且方式必须是: {% asset_img "xxx.xxx" "" %}

问题

如果hexo-asset-image依赖在结合gulp-terser使用的时候会报错, 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
[14:12:34] 'compress' errored after 591 ms
[14:12:34] SyntaxError in plugin "terser"
Message:
    Unexpected token: eof (undefined)
Details:
    filename: 0
    line: 39
    col: 58
    pos: 1364
    domainEmitter: [object Object]
    domainThrown: false

[14:12:34] 'default' errored after 594 ms

解决

使用npm install hexo-image-link --save依赖替换得以解决

修改主题(我这里使用的是lx, 以其举例,更多主题见https://hexo.io/themes/)

克隆项目到本地

  • 在博客根目录执行:
1
git clone https://github.com/blleng/hexo-theme-lx themes/lx

启用本主题

  • 更改站点设置文件_config.yml:
1
theme: lx
  • 主题的配置将在themes/lx/_config.yml中进行。

本地搜索

  • 先下载插件hexo-generator-searchdb:
1
npm install hexo-generator-searchdb -s
  • 在themes/lx/_config.yml中配置:
1
2
local_search:
  enable: true

评论: comment(appid和appkey在leancloud创建应用后即可获取。)

1
2
3
4
5
6
7
8
9
10
11
comment:
  enable: true # true:启用 | false:停用
  appid: ... #leancloud appid
  appkey: ... #leancloud appkey
  notify: false
  verify: false
  placeholder: 此处留言 #评论框文字
  avatar: identicon #游客默认头像
  guest_info: nick,mail,link #评论时需填写的内容（均为选填）
  pageSize: 10 #一次性展示的评论数
  language: zh-cn
  • 在文章头填入comments: false即可在该页面启用评论:
1
2
3
4
5
6
7
8
9
10
11
---
date: xxxx-xx-xx
title: ...
updated: xxxx-xx-xx xx:xx:xx
categories: 
- xxx
tags: 
- xxx
comments: false //启用评论
mathjax: ...
---

Social Links

  • 社交媒体链接，在themes/lx/_config.yml配置:
1
2
3
4
5
6
social:
  enable: true
  links:
    GitHub:
      icon: github
      link: https://github.com/wang-xiaowu

修改头像

  • 修改在source目录下的favicon.ico
  • 修改在source/image目录下的avatar.jpeg
1
2
# avatar
avatar: images/avatar.jpeg

开启分类

1
2
menu:
  category: true #category

百度统计

1
2
# Analytics
baidu_analytics: xxx
1
2
3
4
5
6
百度统计ID（代码）如何获取？
1.登录您的百度统计帐户。
2.选择“管理”标签。
3.在左侧导航中选择“代码管理->代码获取”。
4.从右上角的“站点选择”的下拉菜单中选择目标站点。
5.复制代码后，按照安装说明将代码添加到网站中。

谷歌分析

1
2
# Analytics
google_analytics: xxx
  • 网站地址, 一步一步创建之后获取下图标记的ID值

修改主配置(_config.yml)

修改title

1
2
3
4
5
6
7
8
# Site
title: 小五的个人博客
subtitle: 'Tomorrow will be better,Everything will be fine'
description: 'Tomorrow will be better,Everything will be fine'
keywords:
author: 小五
language: zh
timezone: Asia/Shanghai

修改部署地址

  • 安装部署工具
1
npm install hexo-deployer-git --save
  • 修改如下配置
1
2
# git仓库地址
url: https://github.com/wang-xiaowu/blog  - 注意: 这里配成访问域名的地址
1
2
3
4
5
deploy:
  type: git
  # 注，目前仅支持这种方式：git@github.com:wang-xiaowu/wang-xiaowu.github.io.git
  repo: https://github.com/wang-xiaowu/blog.git
  branch: master

github方式

  • 新建repo - repository 直接命名为 <GitHub仓库账户名>.github.io

  • 进入repo setting, 进入pages

  • 创建好为如下图片
  • 查看本地私钥
  • 使用上一步中的公钥，添加一个密匙

gitee方式(点此查看gitee博客地址)

  • 新建repo - repository 直接命名为 <你的 GitHub 用户名>.github.io
  • 进入pages

部署测试

  • hexo提供了以下四个script,都可简写为只用第一个字母(除了clean)
1
2
3
4
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
  • 本地运行测试: hexo clean && hexo g && hexo s
  • 远端部署: hexo clean && hexo g && hexo d
  • 如果是码云, 还需要再手动点击重新部署

同步到vercel

因为github page本身在国内网络环境并不好，所以可以通过vercel+dns解析来解决境内网络访问问题

如何部署

  • 首先注册一个账号
  • 注册成功后进入页面，点击 News Project
  • 然后通过绑定的 github 或者 gitlab 导入需要部署的项目
  • 如果导入的项目是打包好的静态页，在 Build and Output Settings 的 override 都勾上，表示不执行它的默认命令。
  • 点击 deployed 进行部署，如果部署失败可以查看报错信息是不是上一步的某些选项没有覆盖。部署成功后会进入如图所示的界面

如何自定义域名

当我们的这个静态页面库代码变动的时候，vercel会实时更新同步。所以此步不需要额外处理！

  • 下面演示如何自定义域名，默认情况下部署成功后 vercel 会给你生成一个默认的域名，如果想要修改成自己的域名可将域名名称修改成自己的。
  • 当选择修改成自己的域名名称后，vercel 会检查域名指向的 DNS 对不对，如果不对的话会提示你域名的 DNS 应该如何配置，按照 vercel 提示的 DNS 信息 在自己的域名的 DNS 配置中进行配置，如图

提交前自动更新 date 和 updated 字段

配合hexo-update-time, lint-staged, husky 插件自动在提交前自动更新 date 和 updated 字段

安装依赖

1
npm install hexo-update-time lint-staged husky

执行

1
npx husky install

确保 git 钩子生效

执行

1
npx husky add .husky/pre-commit "npm run lint-staged"

添加 pre-commit 钩子

package.json 中添加 lint-staged 的 script 和相应配置

1
2
3
4
5
6
7
8
9
10
{
  // ...
  "script": {
    // ...
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "source/_posts/**/*.md": "hexo-update-time"
  }
}

如果为第一次提交，那么 date 和 updated 会统一更新到当前时间

否则只有 updated 会更新到当前时间