免费搭建个人博客——hexo搭建教程

暗暗那

已于 2024-12-12 22:22:10 修改

阅读量1.6k

点赞数 25

文章标签： github node.js bash 经验分享笔记

于 2024-12-12 00:47:45 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41944775/article/details/144413486

版权

最近在学习一些算法课程，学习的过程中写了一些笔记，想找个地方放一下。之前看到过一些大佬创建了样式丰富、干货满满的个人博客，感到非常羡慕，于是也萌生了我也搭建一个个人博客的念头。
一番搜索后，在知乎上找到了一个hexo个人博客建立教程，非常详细地介绍了如何从0到1搭建hexo博客，就动手跟着这位博主的教程做了。做的过程中踩了一些坑，也阅读了网上其他博主写的hexo教程，花了5、6天总算是搭建起来了。在此记录一下我的搭建过程和参考过的教程，希望也能像网上各位大佬一样对同为新手的网友们有所帮助。

以下是我在mac电脑搭建hexo博客的过程：

文章目录

安装brew

Brew（Homebrew）是一个包管理器，用于在macOS上安装和管理各种开源软件。它提供了简单的命令行界面，可以方便地安装、更新和卸载软件包。

brew的安装指令为：/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

以下引用部份是我遇到的报错，可以不看。
我电脑没翻墙，安装报错了：curl: (7) Failed to connect to raw.githubusercontent.com port 443: 拒绝连接

我参考网上的方法尝试了修改host的方法
sudo vim /etc/hosts
host中加入一行
185.199.108.133 raw.githubusercontent.com
:wq
但不知为何还是不行，又搜索了“无法安装brew”的解决方法，获得切换到清华大学镜像源的操作步骤：

设置环境变量：
export HOMEBREW_INSTALL_FROM_API=1
export HOMEBREW_API_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles/api"
export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles"
export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git"
使用清华大学镜像源的安装命令：
/bin/bash -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
这次成功了。

安装git

在终端运行brew install git，安装完成。
也可以在官网下载，见：https://zhuanlan.zhihu.com/p/103325381

安装npm，pnpm和node

在终端运行brew install npm，brew install pnpm和brew install node，安装完成。
也可以在官网下载，见：https://zhuanlan.zhihu.com/p/105715224

绑定GitHub并提交文件

为了提交文件到GitHub，我们利用SSH来完成GitHub的绑定并提交文件，这样很方便快捷。
终端运行ssh-keygen -t rsa，回车四次，再运行open ./.ssh，即可看到隐藏文件id_rsa和id_rsa.pub。
复制id_rsa.pub的内容，打开 https://github.com/settings/keys ，添加ssh key。
终端运行 ssh -T git@github.com，输入yes，当看到Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access.就说明成功了。

安装hexo

新建一个Blog文件夹，在该目录的终端下运行npm install -g hexo-cli，失败。
我尝试通过npm（Node包管理器）从一个指定的源（在这个案例中是淘宝的npm镜像，https://registry.npm.taobao.org/ ）安装hexo-cli，又遇到错误信息:
npm error code ETIMEDOUT
npm error code CERT_HAS_EXPIRED

于是我通过npm命令行工具设置npm的registry地址npm --registry https://registry.npmjs.org install -g hexo-cli，解决了问题。

npm常用的源包括：

默认官方源：https://registry.npmjs.org/
镜像源：https://registry.npmmirror.com/
淘宝的npm镜像服务器：https://registry.npm.taobao.org/
华为云镜像源：https://mirrors.huaweicloud.com/repository/npm/

常用的registry相关操作：

查看npm全局的registry地址：npm config get registry
设置npm全局的registry地址：npm config set registry https://registry.npm.taobao.org/
设置本次指令临时使用的registry地址：npm --registry https://registry.npmjs.org install -g hexo-cli
设置某项目中运行npm install时使用的registry地址：在项目根目录添加.npmrc文件中，文件内容为registry=https://registry.npm.taobao.org
设置运行cnpm install时使用镜像源：npm install -g cnpm --registry=https://registry.npmmirror.com

hexo初始化完成后，在仓库根目录新建.gitignore文件，内容如下：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

然后运行 hexo init和 hexo g 来初始化和静态部署，最后hexo s查看。

hexo init
hexo g
hexo s

当终端出现Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.，就可以打开 http://localhost:4000/ 查看效果了，不想看了就在终端输入Ctrl+C退出查看模式。

本地仓库上传到GitHub仓库

注册github

首先注册或登录github，并记住你的github用户名，之后会多次用到。

ssh公钥

如果之前没有设置过GitHub的ssh公钥，现在设置一下。

首先设置user.name和user.email：

git config --global user.name "你的github用户名"   git config --global user.email "你的邮箱"

或查看之前的设置

git config --global --list

设好以后，终端运行ssh-keygen -t rsa，打开~/.ssh/id_rsa.pub，复制其内容。进入github网站，点击头像，点击Setting，粘贴并添加到ssh key里。
运行ssh -T git@github.com，成功了就说明公钥设置好了。

绑定仓库

在github上新建一个仓库，用于部署博客，仓库名叫你的github用户名.github.io。

为了远程操作github仓库，需要在本地仓库的终端把它与远程仓库绑定一下：

git remote add origin git@github.com:你的github用户名/你的github用户名.github.io.git

这样就绑定好本地与远程仓库了。

将Hexo部署到GitHub

接下来有三种部署方法，分别是从分支进行发布、使用 GitHub Actions 部署 GitHub Pages和使用自定义 GitHub Actions 工作流进行发布。由于我只做成了第一种，我将先讲讲按照第一种方法的话可以怎么做。

从分支进行发布

主要参考了GitHub 文档——从分支进行发布。
具体步骤：

新建并切换到分支hexo
用git push把整个hexo仓库存在hexo分支，以便将来换设备了还能继续更新博客。
在终端运行pnpm install hexo-deployer-git --save装一下依赖。

以下引用部份是我遇到的报错，可以不看。
我在这里出现了错误信息：GET https://registry.npmjs.org/hexo-deployer-git error (ERR_SOCKET_TIMEOUT).
百度一下解决方法：

可能是由于网络不稳定、代理配置不当或官方npm源连接问题导致。解决方法包括将npm的registry设置为淘宝镜像源

于是我改成pnpm install hexo-deployer-git --save --registry https://registry.npm.taobao.org/，又遇到报错：GET https://registry.npm.taobao.org/hexo-deployer-git error (CERT_HAS_EXPIRED).
百度一下，找到教程

遇到CERT_HAS_EXPIRED错误通常意味着尝试连接的服务器的SSL证书已过期。这个问题可能出现在你使用的npm镜像(在这个案例中是淘宝的npm镜像)上

尝试了npm cache clean --force清空缓存，没什么变化。换成了华为源，运行pnpm install hexo-deployer-git --save --registry https://mirrors.huaweicloud.com/repository/npm/，成功了。

打开根目录下的_config.yml文件，底部添加：

deploy:
  type: git
  repo: https://github.com/你的github用户名/你的github用户名.github.io.git // github仓库的链接
  branch: main // 仓库的主分支

如果之后报错npm error Cannot read properties of null (reading 'matches')，可能就是这里出了问题。
5. 在hexo分支运行hexo cl & hexo g & hexo d。其中运行hexo d命令时会自动生成网站静态文件，并把静态文件部署到仓库的main分支。

hexo clean / hexo cl
#清除缓存文件 db.json 和已生成的静态文件 public

hexo generate / hexo g
#生成网站静态文件到默认设置的 public 文件夹

hexo deploy / hexo d
#自动生成网站静态文件，并部署到设定的仓库

具体怎么部署呢？
我的理解是它会生成静态文件，存入/.deploy_git文件夹，并自动commit一次。再把/.deploy_git里的内容推送到远程仓库，至于推到哪里就要看_config.yml里的deploy属性里设置的仓库和分支是什么了。比如按照本文的设置，它会推送到你的github仓库的main分支。
deploy:
 type: git
 repo: https://github.com/github名字/github名字.github.io.git
 branch: main
也就是说，main分支里存的不是整个仓库，而是/.deploy_git文件夹里的内容，它不包括package.json、md文件等与博客样式无关的内容，而是存放着构成一个静态网站所需的html、css等文件。
比如main分支的根目录处有一个index.html文件，在GitHub Pages部署好后，打开https://github名字.github.io，看到的就是它。

实现了hexo d能把部署网站所需的文件推送到main分支后，下一步是检查一下GitHub Pages有没有被这次推送行为触发部署操作。打开你的github仓库——Setting——pages，里面有GitHub Pages模块和Build and deployment模块。
先看看GitHub Pages模块里有没有刚刚提交时触发了网站部署的记录，如果有就可以点开看了。
如果没有，就检查一下Build and deployment模块，确保Source选的是Deploy from a branch，Branch选的是main + /root（意思是将以main分支的根目录变动为基准来部署Github Page），然后再回到本地仓库hexo分支运行hexo d试试。

当打开博客链接xxx.github.io能看到想要的博客展示后，从分支进行发布就算成功了。之后每次在本地hexo分支更新博客后，只要hexo d一下，就能把更新自动部署到网站了。

GitHub Actions

接下来讲一下另一个部署方法，也是网上主流的选择，GitHub Actions部署。这个方法和从分支进行发布主要的区别是GitHub中触发部署的方式不同，其它是一样的。虽然我还没找到我没成功的问题出在哪里，但是我的步骤和网上大多教程应该差不多。
主要参考了

具体步骤：

新建并切换到分支hexo
用git push把整个hexo仓库存在hexo分支
在终端运行pnpm install hexo-deployer-git --save
编辑根目录下的_config.yml文件，底部添加：

deploy:
  type: git
  repo: https://github.com/你的github用户名/你的github用户名.github.io.git // github仓库的链接
  branch: main // 仓库的主分支

打开github仓库——Setting——pages——Build and deployment，修改Source为Github Actions。
在hexo分支运行hexo cl & hexo g & hexo d
检查一下main远程分支有没有收到新的push，GitHub Pages有没有被这次推送行为触发部署操作。

hexo d成功后，我可以看到main分支的文件确实改变了，但是GitHub Pages没有触发部署，打开博客网址也看不到效果。我尝试了把_config.yml中的repo从https链接改为ssh链接，尝试了从头再来，始终无法触发GitHub Pages部署。但是如果直接push文件到main分支，就能触发部署了。我没找到问题，所以放弃了这个方案。

此外，Hexo官网也有Github Page部署教程，而且和上面这种不太一样。它要求在储存库中建立 .github/workflows/pages.yml，并在里面自定义deployed设置。我也按照这个教程走了一遍，一样出现了无法触发部署的问题，也没找到原因。如果需要的话也可以跟着官网教程试试。

设置主题

如果你想更换更有意思的主题，可以在hexo Themes中浏览各个hexo主题，挑选你喜欢的主题。
选好以后，设置主题的步骤如下（以next主题的Gemini为例）：

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

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

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 主题换成next

在与hexo的_config.yml文件平级的地方新建一个_config.next.yml文件。复制themes/next/_config.yml中的配置，粘贴到_config.next.yml中。
之后要修改关于主题的设置时，都在_config.next.yml里改，不要在themes/next/_config.yml里改。因为themes/next本身是一个git仓库，里面的修改无法push到你自己的hexo仓库里。
当然你可以把themes/next里的.git文件夹删掉，git就会把themes/next也当作hexo仓库的一部份，但是这样的话以后就不方便更新next主题了。如果保留它的.git文件夹的话，更新next主题只需要进入themes/next文件夹，并运行git pull就行了。
修改_config.next.yml中的Schemes属性为Gemini

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

新增菜单和菜单图标：以新增相册页为例，运行hexo n page photos，然后在themes/next/_config.yml的menu:下加一行photos: /photos/ || fa fa-camera

更换设备

如果你换了一台电脑，该怎么继续更新博客呢？
首先打开github仓库，把仓库clone到本地，此时你在主分支，可以看到你的博客已部署的静态文件。然后你需要切换分支到存放完整hexo项目的仓库（本文中是hexo分支），在这里更新和部署博客。
如果你使用的不是hexo默认的样式，而是自己设置了主题，在更新博客之前要把主题的仓库也下载下来。以你之前使用了next主题为例，首先新建themes/next文件夹，然后运行

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

准备好主题之后，就可以更新博客并查看效果了。

hexo new new-blog
hexo g
hexo s

达到你满意的效果后，就可以部署了。

hexo d

购买域名

我们把仓库托管到github以后，就可以免费使用xxx.github.io来查看博客了。如果还是想在自己喜欢的域名上看，就得租域名了。
阿里云上有很多域名，只要是目前没人占用的域名，你就可以占用，然后按年缴纳占用费。不同后缀的域名，使用的效果应该是一样的，但.com等常见的域名会贵很多。对个人来说，如果想节约一点而且准备长期用的话，建议买.top或.fun，之后几年的续签比较便宜。