从零开始搭建hexo博客

发表于 2022-01-05 更新于 2022-03-03 分类于教程阅读次数： Waline：本文字数： 4.6k 阅读时长 ≈ 4 分钟

用Hexo 快速搭建属于自己的博客

环境准备（安装方法自行查阅网上资料）

git
node
npm

命令行里验证是否安装成功

$ git --version
git version 2.30.1 (Apple Git-130)

$ node --version
v16.4.2

$ npm -v
7.18.1

配置SSH Key

如果第一次用git工具，记得配置一下SSH key，为部署本地博客到 Github 做准备。

如果之前没有创建，则执行以下命令全局配置一下本地账户：

git config --global user.name "GitHub用户名"
git config --global user.email "注册GitHub邮箱地址"

生成密钥SSK key

ssh-keygen -t rsa -C '上面的邮箱地址'

输入上面的命令之后，按下三次回车，即可生成ssh key。.ssh目录下有两个文件，id_rsa和id_rsa.pub，这两个就是ssh key的密钥对，id_rsa是私钥，id_rsa.pub是公钥

cat获取你的ssh

cat ~/.ssh/id_rsa.pub

复制输出内容

登录github，settings -> SSH and GPG keys -> New SSH key

Title随便写

Key填写刚才复制的内容，确认完成。

安装Hexo

执行命令

$ npm install -g hexo-cli	# -g 代表着全局安装

完成后建立自己的个人博客

$ hexo init blogName
$ cd blogName
$ npm install

创建你的第一篇博文

新建一篇博文：

$ hexo new 'blogName'

在 /source/_posts文件夹下找到你的博文，使用typora（推荐）打开并编辑。

保存后运行：

$ hexo generate # 生成静态文件，可简写为 hexo g
$ hexo server # 启动服务器。默认情况下，访问网址为：http://localhost:4000/。可以简写为 hexo s

此时已经可以在public文件夹下看到完整的静态文件。
在浏览器中输入http://localhost:4000/就可以看到预览效果了。

// 如果写的文章太长的话，想要在Home页显示文章的前一小部分的话，可以在想要显示部分的后面加上<!--more-->，就可以实现文章折叠。

以上是本地部署，下面讲博客部署到Github page上

部署到Github page

登录github，新建仓库，仓库名为username.github.io，注意：username应该是你github的用户名

本地和github都完成之后，现在需要把这两者连接在一起

修改被指

在项目根目录下的_config.yml修改配置参数（如果这里命令行显示连接不了GitHub，那就用仓库的ssh链接代替https链接，因为GitHub现在增强了安全性，用户名和密码登录不能保证安全性）
```
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
    github: https://github.com/你的用户名/你的用户名.github.io.git
  branch: master
```
安装部署插件
```
npm install hexo-deployer-git --save
```
部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现对站点的更改无论如何也不生效，可能需要运行该命令。
部署上线
```
hexo g -d
```

用浏览器输入，https://你的用户名.github.io，就可以看到你的博客了。

配置主题及语言

个人用的是NexT主题

进入项目根目录，下载NexT主题

$ git clone https://github.com/next-theme/hexo-theme-next themes/next

修改项目根目录下的_config.yml的配置

注意：_config.yml配置文件有两个，一个在项目根目录，一个在/themes/next中，大部分配置在主题里面改。

## Themes: https://hexo.io/themes/
theme: next

修改语言：

# Site
title: 博客的名字
subtitle: ''
description: ''
keywords:
author: 
language: zh-CN
timezone: ''

NexT配置

以下均在/blogName/themes/next/_config.yml文件中修改

修改主题的时候，可以使用hexo s现在本地预览，然后再部署上线。部署上线的效果可能有几分钟的延迟，耐心等待就好

修改NexT风格

NexT主题有四个风格，想要的取消注释

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

暗黑模式

# Dark Mode
darkmode: true

改变网页标签icon

把你想要用的图片放在/themes/next/source/images中

favicon:
  small: /images/图片名字
  medium: /images/图片名字

增加或删除博客页面功能

想用的取消注释，

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

添加标签页面

在项目根目录

hexo new page tags
cd ./source/tags

打开index.md文件，增加一个type字段

---
title: tags
type: "tags"
comments: false
date: 2022-01-04 13:29:07
---

添加分类页面

在项目根目录

hexo new page categories
cd ./source/categories

打开index.md文件，增加一个type字段

---
title: categories
type: "categories"
date: 2022-01-04 13:55:58
---

添加about页面

在项目根目录

hexo new page about
cd ./source/about

打开index.md文件，可以在里面写自己的个人介绍。

调整侧边栏位置

sidebar:
  # Sidebar Position.
  #position: left
  position: right

添加侧边栏头像图片

# Sidebar Avatar
avatar:
  # 把要展示的图片放在images中
  url: /images/avatar.jpg
  # If true, the avatar will be displayed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

启用不蒜子统计

不蒜子是用于统计文章的阅读次数

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye