MacOS下重建Hexo博客2.0全记录

admin 2021年9月1日11:42:25评论42 views字数 6785阅读22分37秒阅读模式

更换Mac环境后想着换一个好看的主题,并且鉴于今年8月份 GithubPage 国内不开全局不能访问以及博客访问速度的问题,准备先把博客搭到 GithubPage上用 CDN 加速看看效果,再考虑要不要搬到VPS上。


本地环境搭建

安装 Hexo 之前需要先安装 Node.js 和 Git,Mac 下使用 Homebrew 安装。

安装 Node.js

在终端运行

1
brew install node

安装成功后可用node -vnpm -v命令,查看 node 和 npm 版本,比如

1
2
3
4
5
➜  [/Users/lintstar] node -v
v14.11.0

➜ [/Users/lintstar] npm -v
6.14.8

安装 Git

在终端运行

1
brew install git

安装成功后可用git version命令,查看 git 版本

1
2
➜  [/Users/lintstar] git version
git version 2.24.3 (Apple Git-128)

安装 Hexo

Hexo 使用 npm 安装,在终端运行

1
sudo npm install -g hexo-cli

安装成功后显示路径

1
2
3
4
5
➜  [/Users/lintstar] sudo npm install -g hexo-cli
Password:
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo-cli/bin/hexo
+ [email protected]
added 61 packages from 318 contributors in 82.652s

Hexo初始化

创建存储博客的文件夹/Users/lintstar/Blog, 进入此文件夹

1
cd ~/Blog

执行命令初始化本地博客,下载一系列文件

1
hexo init

安装过程会出现警告:

image-20201005112341518

执行下述命令安装 npm

1
sudo npm install

生成静态文件

1
hexo g

开启 hexo 服务器

1
hexo s

通过http://localhost:4000即可在本地查看博客:

image-20201005112533010


图床配置

环境:Typora + Picgo + 七牛云

Typora

偏好设置

image-20201005110213180

Picgo

下载安装picgo

iShot2020-10-05 09.28.21

配置各项参数:

image-20201007133056751

注意访问网址不要漏写https://否则会遇到下面这个坑:

设置好后粘贴图片上传时,会发现上传的图片不能正确引用到markdown中:

image-20201005105853549

而正确引用的姿势是这样的:

image-20201007133126415

七牛云图床开启HTTPS

HTTPS证书申请

ohttps.com

  • 免费证书类型:DV 域名型
  • 免费证书品牌:Let’s Encrypt
  • 免费通配符证书:支持
  • 易操作性:简单
  • 证书有效期: 90天
  • 自动更新:支持
  • 自动部署: 支持

ohttps.com提供了类似于acme.sh的功能,不过提供了友好的管理界面,可申请Let’s Encrypt免费通配符类型证书,还提供了证书吊销、到期前提醒、自动更新、自动部署功能。另外比acme.sh增加了一些非常实用的功能,主要包括可自动部署至阿里云、腾讯云、七牛云的负载均衡、内容分发CDN、SSL证书列表等,并可自动部署至多个nginx容器中。如果有在证书更新后自动部署至多个不同节点的需求,强烈推荐大家使用ohttps.com申请和管理Let’s Encrypt颁发的免费HTTPS证书。

首先先通过DNS验证申请证书:

image-20201007122847907

成功后这两个文件是七牛云开启HTTPS需要用的

image-20201007134432783

证书部署到七牛云SSL

登录七牛云打开密钥管理页面:https://portal.qiniu.com/user/key

image-20201007133716854

将证书部署到七牛云SSL

image-20201007133311988

七牛云设置HTTPS证书

在这里开启HTTPS 导入本地证书内容和私钥文件即可

image-20201007132404866


Github 关联

关联后可以将博客推送到 Github 仓库,之后只需要更新文章后同步仓库。

GithubPage

登录 github 新建一个仓库

image-20201005155356844

这里仓库名一定要用用户名.github.io ,这样生成的 GithubPage 就是本来的仓库不需要加路径就可以直接访问,否则就会是:

1
https://lintstar.github.io/lintstar

仓库必须是公开的,否则不免费

image-20201005154934343

建错了可以直接在Settings中删除:

image-20201005155143801

GitHub中用于管理的默认分支为 master,为了避免联想奴隶制,2020年10月1日之后,新创建的仓库默认分支都将使用main。

image-20201005160235123

在仓库的 Settings 下面设置 GitHub Pages,并设置已经解析好的自定义域名

image-20201005162134250

解析设置如下:

image-20201005162311040

且点击lintstar.github.io即可重定向至lintstar.top.

通过 www.lintstar.top 访问成功:

image-20201005161722990

配置 SSH Key

为避免每次更新博客都需要输入 Github 用户名和密码,将 SSH key 添加到 GitHub 中。

检查本地是否包含 SSH Key

终端执行

1
ls -a ~/.ssh

检查 SSH key 是否存在:如果没有文件id_rsa.pubid_dsa.pub 需要生成一个。

生成新的 SSH Key

终端执行

1
ssh-keygen -t rsa -C "[email protected]"

注意将邮箱是注册 Github 时使用的邮箱地址。一路选择默认后会在路径~/.ssh下生成id_rsa.pubid_dsa.pub两个文件。

image-20201005165521825

将 SSH Key 添加到 Github 中

执行命令

1
cat ~/.ssh/id_rsa.pub

复制里面的 SSH key 信息. 浏览器打开 GitHub 网站,进入Github -> Settings -> SSH and GPG keys -> New SSH key

image-20201005170250426

验证连接是否成功:

1
ssh -T [email protected]

连接成功

image-20201005172012663

本地博客文件上传至 Github

首先在本地博客根目录 /Blog 下的 _config.yml 配置 deploy

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: 'git'
repository: https://github.com/lintstar/lintstar.github.io
branch: main

注意分支已经变成了 main ,repository 为仓库 lintstar.github.io 的URL

然后在 Blog 目录下安装 hexo 插件 hexo-deployer-git

1
sudo npm install hexo-deployer-git --save

接着需要配置一下身份标识

1
2
git config --global user.email "[email protected]"
git config --global user.name "lintstar"

否则会报错:

image-20201005235042861

最后在 Blog 目录运行

1
2
3
4
5
6
7
8
9
10
11
12
13
hexo clean
hexo generate
hexo deploy

# 简化后
hexo g
hexo d

# 可以一键生成静态文件并部署
hexo d -g

# 生成静态文件并本地预览
hexo s -g

访问 www.lintstar.top :

image-20201006000948513

如果出现 404 建议先检查一下 Github Page 的 Settings 自定义域名

此时仓库下是这样的:

image-20201006010126295

解决Hexo clean导致CNAME文件被删问题

执行 hexo clean 后发现页面404

image-20201006160439655

对比上面的图可以发现 CNAME文件被清除了

image-20201006155737275

原因

原因是整个public文件夹是执行 hexo g 后生成的,若执行 hexo clean 会把整个 public 连同 CNAME 文件夹删掉,在重新执行 hexo g 后生成的 public 文件夹里肯定没有我们手动添加的 CNAME 文件

解决办法

把 CNAME 文件放在 source 文件夹下,而不是 public 文件夹。在执行 hexo g 命令时,会把 source 文件夹下的 CNAME 文件原原本本地复制到 public 文件夹下,即使执行 hexo clean 后,下次重新编译还是会复制过去,这样就解决了问题。

CNAME 内容为自定义的域名:

image-20201006160635429

其实还有很多其他的文件如果想编译后放在 public 文件夹下,都可以先放 source 文件夹下,在 hexo g 编译后就会复制到 public 文件夹下。


博客个性化

hexo 有很多好看的主题 以及各种各样的插件可以用来丰富博客

另外一些基本配置可以在_config.yml中进行修改,如博客名、作者名等,另外如果采用了别的主题,在主题文件夹中也会有一个_config.yml文件,可以在里面进行主题的一些修改。

Hexo 官方配置DOC :https://hexo.io/zh-tw/docs/configuration.html

设置博客主题

主题配置 Butterfly 项目地址:https://github.com/jerryc127/hexo-theme-butterfly

安装 Butterfly

在博客根目录下运行:

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

应用主题

修改博客配置文件_config.yml,把主題改为butterfly

1
theme: butterfly

安装依赖插件

1
sudo npm install hexo-renderer-pug hexo-renderer-stylus --save

配置 _config.butterfly.yml

此方法只支持 Hexo 5.0.0 以上版本,建议使用。

如果已经在 source/_data/ 创建了 butterfly.yml,请记得删除掉。

把主题文件夹中的 _config.yml 复制到 Hexo 根目录下,同时重新命名为 _config.butterfly.yml

以后只需要在 _config.butterfly.yml进行配置就行。

Hexo会自动合并主题中的 _config.yml _config.butterfly.yml 里的配置,如果存在同名配置,会使用_config.butterfly.yml的配置,其优先度较高。


Butterfly 主题配置

主题美化相关

官方配置文档:https://demo.jerryc.me/posts/dc584b87

开启归档标签等顶部栏

博客根目录运行

1
2
3
4
5
6
7
8
# 标签页
hexo new page tags
# 分类页
hexo new page categories
# 友链
hexo new page link
# 关于
hexo new page about

效果:

image-20201006154754432

导航图标自定义

Butterfly 支持 font-awesome v5 图标

https://fontawesome.com/icons?d=gallery 获取图标名添加到相应位置即可:

1
2
3
4
5
6
7
8
9
10
menu:
首页: / || fas fa-home
时间轴: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heartbeat
JAY || fas fa-headphones-alt:
- Music || https://y.qq.com/n/yqq/singer/0025NhlN2yWrP4.html || fas fa-music
- Songs || /songs/ || far fa-calendar-alt

效果:

image-20201006202232586

更换站点图标 page favicon和背景图片头像

制作32x32尺寸的 favicon 后放到 /Blog/themes/butterfly/source/plogo 目录下

  • 不要把个人需要的文件/图片放在主题source文件夹里,因为在升级主题的过程中,可能会把文件覆盖删除了。
  • 在Hexo根目录的source文件夹里,创建一个文件夹来放置个人文件/图片。文件夹不能命名为css、js和img
  • 引用文件直接为/文件夹名称/文件名

image-20201006222742404

修改配置文件:_config.butterfly.yml

image-20201006222818931

效果:

image-20201006124029241

hexo clean 会清除缓存文件 db.json 和已生成的静态文件 public 所以不要放到 /public/img 目录下

image-20201006223105250

添加多个 subtitle 轮换打字效果

image-20201007003525438

效果:

image-20201007003648705

添加搜索功能

采用本地搜索,安装插件 hexo-generator-search

1
sudo npm install hexo-generator-search --save

在配置文件中设置:

image-20201007164534881

开启字数统计

安装插件 hexo-wordcount

1
sudo npm install hexo-wordcount --save

在配置文件中设置:

image-20201007164820310

效果:( 本地预览统计不准确呐 )

image-20201007164901945

开启Snackbar 弹窗

1
2
3
4
5
6
7
8
9
# Snackbar 弹窗
# https://github.com/polonel/SnackBar
# position 弹窗位置
# 可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
enable: true
position: bottom-left
bg_light: '#49b1f5' #light mode时弹窗背景
bg_dark: '#2d3035' #dark mode时弹窗背景

效果:( 引自官方文档 )

Snackbar

添加 RSS 订阅

安装插件 hexo-generator-feed

1
sudo npm install hexo-generator-feed --save

然后在_config.yml最下面添加:

1
2
3
4
5
6
7
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

设置主题配置文件_confog.butterfly.yml

image-20201008001939048

最后执行命令即可

1
hexo clean && hexo g && hexo s

底部添加备案信息

image-20201006204405021

底部开启背景图

image-20201006230235186

效果:

image-20201006230332547

底部修改By为小爱心

路径在:/Blog/themes/Butterfly/layout/includes/footer.pug

image-20201007163300256

将 By 替换成以下内容:

1
<i style="color:#FF6A6A" class="fa fa-heartbeat"></i>

#FF6A6A 颜色代码可以在 HTML颜色代码 这里替换哦

效果:

image-20201007163349422


文章相关

文章固定链接格式

Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改,URL 就会发生变化,之前文章地址也会变成 404,而且 URL 层级很深,不利于分享和搜索引擎收录。

先安装 hexo-abbrlink 插件:

1
sudo npm install hexo-abbrlink --save

修改配置文件:_config.yml

1
permalink: /:year/:month/:abbrlink.html

image-20201006104659071

效果:

image-20201006155126213

标题前添加闪电

1
2
3
4
5
6
# Beautify (美化頁面顯示)
beautify:
enable: true
field: post # site/post
title-prefix-icon: '\f0e7'
title-prefix-icon-color: '#FBE347'

#FBE347 颜色代码可以在 HTML颜色代码 这里替换哦

效果:

image-20201007224912221

文章内容加密

安装插件:hexo-blog-encrypt

1
npm install --save hexo-blog-encrypt

文章头加上 password 和 message (optional):

1
2
3
4
5
6
7
8
9
10
11
12
title: 打造专属 Cobalt Strike
tags:
- CobaltStrike
- 后渗透
- ServerChan
categories:
- Tools
cover: 'https://******.webp'
abbrlink: d200c39
password: ******
message: 您有新主机上线啦!请注意查收~ <br> 召唤神龙 Ladon 强化 Cobalt Strike
date: 2020-11-20 23:49:59

文章的头部如下图所示位置添加:

1
<meta name="referrer" content="no-referrer"/>

image-20201122015622584

这行 html 代码解决了加密后无法加载网络图片的问题

效果:

image-20201122015756461

主题更新

  1. 备份博客所有文件
  2. 进入博客主题目录
  3. 保存 layout/includes/footer.pugsource/css/_layout/footer.styl
  4. 执行 git pull 拉取更新
  5. 将第二步保存的两个配置文件覆盖到相应位置
  6. 依照主题目录下的 _config.yml 手动更新博客根目录的 _config.butterfly.yml
  7. 把备份文件中主题 /source 目录下的 /cover /img/plogo 覆盖到新的主题/source 目录下
  8. 重新 hexo clean && hexo g && hexo d

FROM : lintstar.top , Author: 离沫凌天๓

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2021年9月1日11:42:25
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   MacOS下重建Hexo博客2.0全记录http://cn-sec.com/archives/496677.html

发表评论

匿名网友 填写信息