搭建hexo个人博客

发表于 更新于 分类于 Valine： 本文字数： 4.4k 阅读时长 ≈ 4 分钟

介绍

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页，这边就教大家怎么搭建Hexo并配置。大家可以参考Hexo官方文档配合使用。

安装前提

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git

随着大前端的快速发展，node版本更新很快，我们在工作中，可以会有老版本的node的项目需要维护，也可能有新版本的node的项目需要开发，如果我们只有一个node版本的话将会很麻烦，nvm 应运而生，nvm 是 Mac 下的 node 管理工具，有点类似管理 Ruby 的 rvm，如果需要管理 Windows 下的 node，官方推荐使用 nvmw 或 nvm-windows。不过，nvm-windows 并不是 nvm 的简单移植，他们也没有任何关系。但下面介绍的所有命令，都可以在 nvm-windows 中运行，nvm是node的版本管理器，可以方便地安装&切换不同版本的node

安装NVM

进入NVM-Windows项目发布地址： https://github.com/coreybutler/nvm-windows/releases ，选择最新发行版本nvm-setup.zip下载：

20210531232213538

安装需要注意两点

1、 把电脑上面的node环境先卸载干净（C:\Users\用户名\AppData\Roaming\node下面的文件也要解决干净）

2、 安装时，建议选择手动安装版，然后疯狂下一步就行，不要尝试改变安装目录。

如果不想放在C盘，例如放在D盘，安装路径是这样的：

第一步：D:/你想放的文件夹名

第二步：D:/你想放的文件夹名(最好不要中文名)/nodejs

检查安装是否成功

在搜索栏查找poweshell,选中x86的powershell鼠标右击选择以管理员身份运行。image-20221127134846193

在Powershell下，输入NVM，即可发现安装完成：

配置国内源

到你NVM安装路径，*打开setting.txt文件（如果没有，则创建即可），更改为：

1
2
3
4
5
6
root: D:\NVM
path: D:\NVM\nodejs
arch: 64
proxy: none
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

解释参数：

  • root：NVM的安装地址。即上文的%NVM_HOME%
  • path：激活node.js时的存储路径，即上文的%NVM_SYMLINK%
  • arch：系统架构，如果你的Windwos不是x64，则填32
  • proxy：是否走代理
  • node_mirror：node.js的下载源，这里使用的是淘宝源
  • npm_mirror：npm的下载源，这里使用的是淘宝源

image-20230331220734968

使用NVM

在cmd或pwoershell使用命令

1
nvm list available

image-20220710002047715

1
2
3
4
5
6
7
8
9
10
2、安装方式 nvm install 版本号
current：当前最新的版本
LTS：稳定版本

nvm install 19.8.1 （当前稳定的最新版）

我安装了两个
nvm install 18.13.0
nvm install 16.15.1
使用nvm ls 或者 nvm list可以查看安装的不同node版本，*指向的就是当前版本

激活Node.js版本

我们安装好Node.js以后，需要激活它

1
2

nvm use 16.15.1

安装Git

无脑下一步！！！Git的官网地址

安装hexo

先在NVM安装目录内建立2个目录node_cache和node_global

image-20230331224443212

输入下面命令

1
2
npm config set prefix "D:\NVM\node_global"
npm config set cache "D:\NVM\node_cache"

更换源

1
npm config set registry=http://registry.npm.taobao.org

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

使用Npm安装Hexo

1
npm install -g hexo-cli

如报错，更新一下npm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
npm install -g npm-windows-upgrade


set-ExecutionPolicy RemoteSigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): y


npm-windows-upgrade
npm-windows-upgrade v6.0.1
? Which version do you want to install? 8.13.2
Checked system for npm installation:
According to PowerShell: D:\nodejs
According to npm:        D:\nodejs
Decided that npm is installed in D:\nodejs
Upgrading npm... |

Upgrade finished. Your new npm version is 8.13.2. Have a nice day!

安装好以后，测试一下：

1
hexo

没有出现未知命令，说明安装成功。可以接下来操作了。

如果出现hexo : 无法加载文件 C:\Program Files\nodejs\hexo.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1。

那是因为你用的是win11系统，你需要在设置->隐私和安全性->开发者选项->允许本地powershell脚本在为签名的情况下运行image-20230308210045396

应用之后，重新打开新的powershell，再次输入hexo即可。

创建hexo

创建你的博客的空白文件夹，然后打开文件夹,我们已经安装好Git，所以我们直接是由鼠标右键的Git Bash Here

image-20220710233249939

在博客目录内初始化博客

初始化目录：

1
2
# 进目录之后，在Git bash里面输入下面目录初始化
hexo init

初始化后回生成许多文件

image-20230331230347045

输入命令后，它会自动爬取hexo的初始化目录，在国内网络是非常不好的，如果出错需要删除目录内容重新执行命令直到成功。

构建hexo

初始化Hexo后，其实Hexo就可以使用了；构建Hexo：

1
2

hexo g

启动Hexo内建服务器

其实，整个public文件就是一个博客了，但是我们还要部署Nginx等网络环境或者使用HBuilderX等根据，启动Web服务器才能用浏览器本地IP(即：127.0.0.1或localhost)加端口进行访问；为了减少麻烦，可以使用Hexo内建服务器：

1
2

hexo s

image-20220710234306097

我们可以去127.0.0.1:4000网址看看初始化页面的样子image-20220710234335015

部署Hexo到github

上述操作，我们已经把Hexo部署在本地；接下来，我们来看看怎么部署到远程平台，部署到远程平台后，公网用户就可以访问了（也就是可以让你小伙伴通过浏览器访问到你的博客）。

创建github仓库

image-20230407151939650

需要注意的是作为网站访问的这个仓库，仓库名称一定是，拥有者名+github.io

生成ssh keys

在博客文件夹根目录下，右键，调用git bash here功能

输入命令，本地生成ssh keys ，有回车按回车，有（y/n）？就输入y

1
ssh-keygen -t ed25519 -C "your_email@example.com"

注意：如果你使用的是不支持 Ed25519 算法的旧系统，请使用以下命令：

1
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

出现这个则生成成功

image-20230407152653491

在电脑打开生成公钥的文件夹

路径：C:/用户/你的用户名/.ssh

找到后打开id_rsa.pub（默认记事本打开），复制公钥（ctrl+A全选， ctrl+C复制）

打开github，头像箭头，下拉选项setting（设置）-SSH与GPG keys -new ssh keys（新建ssh秘钥）

tilte随便起，然后ctrl+V粘贴到key里面

image-20230416135608274

测试是否绑定成功

1
ssh -T git@github.com

image-20230416134842427

yes，然后按回车

出现successfully字样则绑定成功

上传博客到github仓库

修改配置文件

在创建博客文件夹的根目录下修改-config.yml文件

image-20230407163241369

输入时注意冒号后面有空格，然后保存退出

安装hexo-deployer-git

1
2
3
#注意这些插件是安装在博客目录内的，所以是跟随博客内容一起走的
#这个插件是提供上传git能力
npm install hexo-deployer-git --save

因为github在国外，有些时候推送会出现ssl出错，其实就是网络差，我们在Git Bash里面输入下面这行命令，不验证ssl：

1
git config --global http.sslVerify "false"

博客推送

在博客目录下命令窗口/终端输入

1
2
3
4
5
6
7
8
9
#配置git push的信息
git config --global user.email "your_email"
git config --global user.name "your_name"

#查看和检查配置的信息
git config --list

# hexo d就是推送博客到指定的地方(本博客推送的地方是Github)
hexo cl && hexo g && hexo d

博客主题

打开hexo的主题网站

image-20230508003429447

比如打开Ayer这款主题，打开后能看到主题的效果

image-20230508003515559

一般在博客主题内会有github的项目链接或者安装和使用的指南

image-20230508003741044

打开github项目有下面有个README.md的安装教程，其安装步骤我就不一一展示了，按教程来有手就行[doge]

image-20230508003943456

解决图片不显示问题

更改hexo配置文件

1
vim _config.yml #配置_config.yml里面的post_asset_folder:false 设置为 true 如图

031161b88a660fd50ecc872d942c43fa

安装npm插件

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

修改Typora设置

打开文件菜单的偏好设置

image-20240514232927394

打开图像选项，设置如下图

image-20240514233130356