github+hexo+ayer+插件免费搭建个人博客教程

2023-07-07

字数统计: 1.4k | 阅读时长≈ 6 分钟

准备工作
命令行步骤
安装主题
注册gitee或github
github 与hexo配置
写一个bat命令用于运行写好的博客(可以不写)
必备插件
- 1.hexo-generator-searchdb 搜索
- 2.hexo-generator-index-pin-top
其他页面
- 分类
- 标签
- 相册
- 文章目录
  - 补充
- 友情链接
可选插件
- gitalk
hexo-blog-encrypt(博客加密)
hexo-helper-live2d
- 进阶
问题:本地图片引用
修改新建文件(博客)提示词
用vscode写markdown
- 用vscode写markdown必备插件：
- markdown
yare 主题
文章太长怎么办?
- 添加这个即可
新建文件夹或文件格式
hexo多平台同步
- Git 基本操作
ayer
- 基本插件

准备工作

安装GIT 和 node.js
安装HExo

命令行步骤

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server 或者 hexo s

出现博客地址打开

安装主题

git clone https://gitee.com/mirrors/ayer.git themes/ayer

修改config文件 theme: ayer

hexo g -s

修改主题配置文件之前一定要复制一份(防止出错)

注册gitee或github

~~(这里以github为例)~~
首先新建仓库为 zh3g.github.io

github 与hexo配置

git config --global user.name "zh3g"
git config --global user.email "zhang1zhengzheng@outlook.com"

ssh-keygen -t rsa -C "zhang1zhengzheng@outlook.com"
(输入三次回车

cat ~/.ssh/id_rsa.pub

复制显示的密钥到ssh公钥

ssh -T git@github.com

找到config文件
最后输入
例如:

deploy:
  type: 'git'
  repository: git@github.com:zh3g/zh3g.github.io.git
  branch: master

1
2
3

npm install hexo-deployer-git --save
hexo g
hexo d

写一个bat命令用于运行写好的博客(可以不写)

Echo start cmd /c "hexo clean&&hexo g&&hexo d "   

@Echo Off

Echo 请选择 Y. 启动三件套            N. 退出
Echo.
Set /p var=请选择:
If /i %var%==Y (start cmd /k "hexo clean&&hexo g&&hexo d ") else (Exit)
Pause
%0

必备插件

1. 搜索

1 npm install hexo-generator-searchdb --save

然后将以下配置复制到你博客根目录下的 _config.yml 里（注意不是ayer目录下的）:

# hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html

2.

1 2	npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

在需要的页面顶部输入top: true

其他页面

分类

hexo new page categories
然后将以下复制到_posts/categories/index.md文件

---
title: categories
type: "categories"
layout: "categories"
---

相册

hexo new page photos
然后将以下复制到 /source/photos/index.md 文件， img_url 替换成图片路径， caption 替换成图片名称

---
title: Gallery

albums: [
        ["img_url","img_caption"],
        ["img_url","img_caption"]
        ]
---

~~实际不起作用~~

文章目录

用Tocbot解析文章标题并生成目录

将以下配置复制到你ayer目录下的 _config.yml 里：

# Toc
 toc: true

当然你可能并不想所有文章都生成悬浮目录，你可以在文章顶部的配置中加一行来进行关闭：

---
toc: false
---

补充

~~hexo安装toc插件~~
~~一、安装(这里是hexo的路径下，也就是博客根目录下)~~
~~cnpm install hexo-toc --save~~
~~二、配置博客根目录下的_config.yml文件：~~

~~toc:~~
~~maxdepth: 3~~

~~三、在markdown里使用在Markdown中需要显示文章目录的地方添加~~

友情链接

hexo new page friends
然后将以下复制到 /source/friends/index.md 文件

---
title: friends
type: friends
layout: "friends"
---

然后在 ayer 主题目录下的 _config.yml 中自定义 friends_link 配置项即可

可选插件

配置gitalk
首先进入主题的配置文件_config.yml(注意是主题的配置文件，不是博客根目录下的配置文件)，添加gitalk配置(一定要仔细，缺一不可)。

gitalk:
enable: true 开启gitalk评论，不需要配置
owner: github用户名
admin: github用户名
repo: 博客的仓库名称(注意不是地址)
ClientID: 上面生成的Client ID
ClientSecret: 上面生成的Client Secret
labels: 'gitalk' github issue 对应的issue标签（新建一个）
distractionFreeMode: true  无干扰模式，不需要更改

例如

gitalk:
enable: true #开启gitalk评论，不需要配置
owner: zh3g
admin: zh3g
repo: zh3g.github.io
ClientID: d186f3f35180f1d7ea10
ClientSecret: 4e853408d31eaf16451af58d490d816a8ed985a5
labels: 'gitalk' #github issue 对应的issue标签（新建一个）
distractionFreeMode: true  #无干扰模式，不需要更改

随后修好主题里的config文件确保gitalk为true
例如

# 2、Gitalk(https://github.com/gitalk/gitalk)
gitalk:
  enable: true # true
  clientID: d186f3f35180f1d7ea10 # GitHub Application Client ID
  clientSecret: 4e853408d31eaf16451af58d490d816a8ed985a5 # Client Secret
  repo: zh3g.github.io # Repository name
  owner: zh3g # GitHub ID
  admin: zh3g # GitHub ID

hexo-blog-encrypt(博客加密)

---
title: Hello World
date: 2016-03-30 21:18:02
password: hello
---

hexo-helper-live2d

helper-live2d

进阶

问题:本地图片引用

安装插件

1	npm install https://github.com/CodeFalling/hexo-asset-image -- save

将 config.yml 文件中的 post_asset_folder 选项设为 true
在文档需要插图片的地方

(实测不行)

改为 ![图片](图片名)
~~hexo修改文章路径~~
~~hexo默认文章路径为年/月/日/文件名，目录层次过长不利于收录，所以在根目录的config.yml文件中，修改默认路径~~
~~permalink:~~ ~~:year/:month/:day/:title/~~
为
~~permalink:~~ ~~archives/:title.html~~
千万别改(改完图片就失效了30min摸索的经验)