Anthony-Dong

Anthony-Dong技术博客

0%

使用Hexo+Next搭建个人博客

发表于 更新于 分类于
本文字数： 10k 阅读时长 ≈ 9 分钟

分享一下个人博客搭建，本人是有一个个人的私有仓库，然后呢私有仓库内有些感觉写的可以文章会分享到自己的博客上，但是用Hexo+Next主题吧，发现哇使用起来比较麻烦，还需要copy来copy去的，所以自己写了一些脚本方便使用和操作！主要是为了傻瓜式的使用！同时帮助换个工作电脑可能就跑不起来了，所以写一篇文章记录下！同时本文也会分享一些Hexo的插件，比如支持流程图和UML，以及一些优化，比如使用gulp压缩代码！

1. 环境

  1. 环境： Linux or Mac （后期会增加Windows环境，主要是不会写windows的脚本！）
  2. 创建一个账号：GitHub 个人账号，例如我的个人账号是 Anthony-Dong
  3. 创建一个仓库：GitHub仓库，例如我的仓库名是 anthony-dong.github.io，格式就是{个人账号名称}.github.io，注意都要小写，仓库地址 https://github.com/Anthony-Dong/anthony-dong.github.io
  4. 下载我的博客模版到本地，项目地址: https://github.com/Anthony-Dong/blog_template
1
2
wget https://github.com/Anthony-Dong/blog_template/archive/refs/heads/master.zip
unzip master.zip
  1. 启动项目
  • 配置参数( 如果你本地有docker且已经启动起来了，直接 make init run 起来了，下面可以不看了！)

image-20220317214651317

如果你的环境依赖本地都有，只需要把 EXEC_TYPE := docker 改成 EXEC_TYPE :=即可

注意: 如果你用环境依赖指的是 node+hexo环境，需要注意的是你需要安装 node.js 16.3 版本 + hexo 4.3.0 版本，可以参考下面的安装方式！

1
2
3
4
5
6
7
8
9
# 安装 node.js，如果你是mac环境完全可以下面这样安装
brew install node@16
# 其他环境，需要下载 https://nodejs.org/dist/v16.3.0/ 源码进行安装！

# 安装 hexo, 这里配置taobao的源，比较快！
npm config set registry https://registry.npm.taobao.org
npm install hexo-cli@4.3.0 -g
# 安装gulp 压缩html/js/css
npm install gulp-cli -g  # cli-version: 2.3.0, local-version: 4.0.2
  • 初始化环境: 执行 make init run 即可！
  • 具体帮助命令
1
2
3
4
5
6
7
8
➜  note-master git:(master) ✗ make
 push                  push项目到远程
 create                创建博客文件的头部信息
 init                  初始化整个项目[第一次执行会比较慢]
 build                 重新构建网站
 run                   启动网站
 deploy                发布到个人网站
 help                  帮助

2. 快速修改配置

  1. 修改配置文件hexo-home/_config.yml， 只需要修改我下面标注的！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Site
title: 技术小白  # 网站标题
subtitle: '技术小白的技术博客' # 网站介绍
keywords: # 网站关键词
  - Hexo
  - Node.js
  - Flink
description: '每天进步一点点!' # 个性签名
author: xiao-bai # 作者名称

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://xiao-bai.github.io/ # 你的博客地址，一般你部署在github的话

## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:xiao-bai/xiao-bai.github.io.git # 你仓库的地址
  branch: master
  1. 修改配置文件 hexo-home/themes/next/_config.yml, 简单使用只需要替换以下的配置文件，高级使用请看官方文档: https://github.com/iissnan/hexo-theme-next
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 下面的联系地址可以改成你的！你也可以根据配置文件添加
social:
  GitHub: https://github.com/anthony-dong || fab fa-github
  E-Mail: mailto:fanhaodong516@gmail.com || fa fa-envelope
  掘金: https://juejin.cn/user/4248168663101320 || fas fa-book
  国内邮箱: mailto:fanhaodong516@163.com || fa fa-envelope
  
# 这个替换成的话术就行了，不需要的话可以 enable: false 关闭
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: false
  comment: 本人坚持原创技术分享，如果你觉得文章对您有用，请随意打赏! 如果有需要咨询的请发送到我的邮箱! 

# 你的收款码，不需要的话可以注释掉！
reward:
  wechatpay: /images/wechatpay.png
  alipay: /images/alipay.png

# 这个替换成你的github就行了，不需要的话可以  enable: false 关闭
github_banner:
  enable: true
  permalink: https://github.com/Anthony-Dong
  title: Follow me on GitHub
  1. 修改以下路径的图片，替换成你的图片
1
2
3
4
hexo-home/themes/next/source/images/alipay.png   你的支付宝收款码
hexo-home/themes/next/source/images/wechatpay.png  你的微信收款码
hexo-home/themes/next/source/images/avatar.png  你的头像
hexo-home/themes/next/source/images/favicon.ico 你网站的icon
  1. 修改个人简介，可以修改此文件: hexo-home/source/about/index.md 即可！
  2. 如果开启百度统计，只需要修改hexo-home/themes/next/_config.yml此文件即可! appid是hm.src = "https://hm.baidu.com/hm.js?{app_id}"; 最后那个ID！
1
2
# Baidu Analytics
baidu_analytics: # <app_id>

3. 添加评论插件

  1. 首先前往链接: Register a new OAuth application 创建一个 Auth APP , 申请页面如下，可以根据我的注释进行填写

image-20220321134405318

  1. 申请完成后可以在页面上查看 client-id 和 secret-id

image-20220321134800315

  1. 然后修改hexo-home/themes/next/_config.yml添加 gitalk 评论系统
1
2
3
4
5
6
7
8
9
10
11
# Gitalk
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: true  # 是否开启
  github_id: xiao-bai # 你的GitHub用户名
  repo: xiao-bai.github.io # 你仓库的地址
  client_id: xxxx # 上面申请拿到的 client-id
  client_secret: xxxxxx  # 上面申请拿到的 secret-id
  admin_user: xiao-bai  # 你的GitHub名称，注意大小写
  distraction_free_mode: true # 设置为true
  language: #不用动！

同时注意一下看一下是否存在hexo-home/themes/next/layout/_custom/sidebar.swig以下内容，不存在可以复制一下

1
2
3
4
5
6
{% if page.comments and config.gitalk.enable %}




{% endif %}
  1. 搞完以后记得重新build下 make build 下，然后 make run 启动就行了
  2. 打开页面会遇到这种情况 Related Issues not found , 这时候你其实已经成功了，make deploy发布就行了！

image-20220321135120501

这时候需要你登陆你的GitHub账号，然后他就会自动帮你初始化issues!

注意：

  • 你每发布一篇文章都需要你打开页面初始化下一Issues！
  • 你本地http://localhost:4000 访问无法创建Issues的！
  1. 打开你的仓库的Issues页面就可以看到创建 issues 了！

image-20220321135550263

4. 支持mermain(流程图)

  1. 在目录 hexo-home 执行 npm install hexo-filter-mermaid-diagrams --save ， 我安装的是1.0.5^版本
  2. 修改配置文件hexo-home/themes/next/_config.yml
1
2
3
4
5
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

注意更多配置可以参考: mermaid-js 文档 , 需要配合一起修改 hexo-home/themes/next/layout/_third-party/tags/mermaid.swig 文件！

  1. 修改css样式，在文件 hexo-home/themes/next/source/css/_colors.styl 末尾添加
1
2
3
4
.mermaid {
 background: transparent;
 text-align: center;
}
  1. 切记一定要关闭 pjax, 需要修改配置文件hexo-home/themes/next/_config.yml，原因是切换页面需要重新渲染流程图，如果开启切换页面的时候不会帮你渲染！！
1
2
3
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: false

5. 支持flowchart (流程图)

  1. 在目录hexo-home 执行 npm install --save hexo-filter-flowchart ，我安装的版本是1.0.4！
  2. 修改配置文件hexo-home/_config.yml , 默认的sdk版本过低，可能支持不太好，所以需要更换一下！
1
2
3
4
5
6
7
8
9
10
# flowchart使用 hexo-filter-flowchart https://github.com/bubkoo/hexo-filter-flowchart
flowchart:
  raphael: "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"  # optional, the source url of raphael.js
  flowchart: "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.17.1/flowchart.min.js" # optional, the source url of flowchart.js
  options: # options used for `drawSVG`
    scale: 1
    line-width: 2
    line-length: 50
    text-margin: 10
    font-size: 12
  1. 具体更多配置可以参考文档: hexo-filter-flowchart

6. 压缩HTML、JS、CSS

目前hexo生成的代码，全部都是未压缩，目前前端主流的方式都是使用webpack和gulp进行压缩，但是webpack这块本人也未搜索到相关资料，所以用的gulp进行压缩！

  1. 安装 gulp，执行 npm install --global gulp-cli
  2. 安装其他插件
  1. 安装依赖
1
npm install gulp gulp-clean-css gulp-uglify-es gulp-html-minifier-terser
  1. 配置文件
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
var gulp = require('gulp')
var minifycss = require('gulp-clean-css');
const uglify = require('gulp-uglify-es').default;
const htmlmin = require('gulp-html-minifier-terser');

gulp.task('compress_css', function () {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({ compatibility: 'ie8' })) // 兼容到IE8
        .pipe(gulp.dest('./public'));
});

gulp.task('compress_js', function () {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'))
})

// 注意报错可以排出目录！防止生成失败！
// 可接受参数的文档：https://github.com/terser/html-minifier-terser#options-quick-reference
gulp.task('compress_html', function () {
    return gulp.src(['./public/**/*.html', '!./public/2022/03/27/583186f06a088dc9967a483e3876b2a2/index.html'])
        .pipe(htmlmin(
            {
                removeComments: true, // 移除注释
                removeEmptyAttributes: true, // 移除值为空的参数
                removeRedundantAttributes: true, // 移除值跟默认值匹配的属性
                collapseBooleanAttributes: true, // 省略布尔属性的值
                collapseWhitespace: true, // 移除空格和空行                
                minifyJS: true, // 压缩HTML中的JS
                minifyCSS: true, // 压缩HTML中的CSS
                minifyURLs: true, // 压缩HTML中的链接
            }
        ))
        .pipe(gulp.dest('./public'))
})


// 默认任务，不带任务名运行gulp时执行的任务
gulp.task('default', gulp.parallel(
    'compress_css', 'compress_js', 'compress_html'
));
  1. 参考文章

https://blog.inkuang.com/2021/405/

7. 其他BUG修复

1. 图片设置 style="zoom: 50%;" 导致图片放大展示失败

背景：目前typora其实可以缩放图片，导致使用 medium-zoom 可能出现bug，参考 issues#164 我大概改了一版本！

  1. 修改文件: hexo-home/themes/next/source/js/next-boot.js
1
2
3
4
5
// 修改此行代码
// CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img');

// 为这个
CONFIG.mediumzoom && NexT.utils.mediumZoomFunc();
  1. 修改文件: hexo-home/themes/next/source/js/utils.js , 添加mediumZoomFunc 方法！
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
mediumZoomFunc: function () {
  const zoom = mediumZoom('.post-body :not(a) > img, .post-body > img');
  // 开启的时候取消掉 style.zoom
  zoom.on('open', event => {
    var curentNodeAlt = event.target.alt;
    document.querySelectorAll('.medium-zoom-image').forEach(elem => {
      if (elem.style.zoom == '') {
        return;
      }
      if (elem.alt != curentNodeAlt) {
        return;
      }
      elem.alt = elem.alt + '|' + elem.style.zoom
      elem.style.zoom = ''
    });
  })
  // 关闭的时候 重新set style.zoom
  zoom.on('closed', event => {
    var curentNodeAlt = event.target.alt;
    document.querySelectorAll('.medium-zoom-image').forEach(elem => {
      if (elem.alt != curentNodeAlt) {
        return;
      }
      var elemAltLastIndex = elem.alt.lastIndexOf('|')
      if (elemAltLastIndex == -1) {
        return;
      }
      elem.style.zoom = elem.alt.substring(elemAltLastIndex + 1)
      elem.alt = elem.alt.substring(0, elemAltLastIndex)
    });
  })
}

8. 配置 Tool 一起使用

1. 创建一篇文章 or 标注一篇文章

  1. 执行下面命令make create，会生成一个页眉，你只需要把这个东西 copy 到你的文章中去！

image-20220317231939995

  1. 找到你的文章，写一些描述信息，例如我这篇文章就是这么写的！

image-20220317232038063

2. 发布到网站上

  1. 本地构建一下make run，看看详情信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
➜  note-master git:(master) ✗ make run
bin/go-tool hexo --dir ./ --target_dir ./hexo-home/source/_posts
2022/03/17 21:53:00.668245 api.go:63: [INFO] [hexo] command load config:
....


13:53:40.106 DEBUG Processed: layout/_third-party/search/localsearch.swig
13:53:40.366 DEBUG Generator: page
13:53:40.367 DEBUG Generator: post
13:53:40.367 DEBUG Generator: category
13:53:40.367 DEBUG Generator: archive
13:53:40.367 DEBUG Generator: json
13:53:40.368 DEBUG Generator: index
13:53:40.368 DEBUG Generator: tag
13:53:40.371 DEBUG Generator: asset
13:53:40.403 INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
13:53:40.425 DEBUG Database saved
13:53:59.402 DEBUG Rendering HTML index: index.html
  1. 然后访问 http://localhost:4000 即可！看到网页

image-20220317220607897

  1. 最后没问题，执行make deploy 即可发布到远程网站了！
1
make deploy

3. 高级功能

1. 敏感关键字过滤

这个我们都知道，公司会有安全团队扫描开源仓库，假如你涉及到公司敏感字眼也比较恶心，比如把你个人信息暴露了！但是要知道不能发布公司内部的文章上传出去，或者公司内部的代码，这个是任何公司的红线！切记，这个插件主要就是过滤一些公司的名字而已！

配置文件在: 你只需要列出敏感词即可！在KeyWord地方！

1
2
3
4
5
6
Hexo:
  KeyWord:
    - "敏感词"
    - "敏感词2"
  Ignore:
    - hexo-home

2. 图片上传

目前我使用的是我自己写的工具上传图片，主要是用的阿里云的OSS，基本上一年花个不到几块钱就可以搞定！

具体可以参考 Upload 插件

你在你本地的 .config/.go-tool.yaml 文件，配置一下配置即可！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Upload:
  Bucket:
    default:
      AccessKeyId: xxxx
      AccessKeySecret: ihDP2HkiTQGYwMY1udCtq8cBQNKP5N
      Endpoint: oss-accelerate.aliyuncs.com
      UrlEndpoint: xxx.oss-accelerate.aliyuncs.com
      Bucket: xxxx
      PathPrefix: image
    pdf:
      AccessKeyId: xxxxx
      AccessKeySecret: xxxxx
      Endpoint: oss-accelerate.aliyuncs.com
      UrlEndpoint: xxxx.oss-accelerate.aliyuncs.com
      Bucket: xxxx
      PathPrefix: pdf

然后Typora配置下:

image-20220317221335377

3. 修改个人主页

修改本地文件hexo-home/source/about/index.md 即可

本人坚持原创技术分享，如果你觉得文章对您有用，请随意打赏! 如果有需要咨询的请发送到我的邮箱!