Hexo个人博客搭建

发表于 更新于 分类于 阅读次数： 本文字数： 2k 阅读时长 ≈ 7 分钟

Hexo是一个快速、简洁且高效的开源博客框架，主题丰富，可以通过主题配置文件进行个性化定制。 GitHub Pages是一个静态网站托管服务，可以直接从GitHub仓库托管网站，支持自定义域名。 本篇文章介绍了如何使用Hexo搭建个人博客，并通过GitHub Pages进行托管。

写在前面

之前一直想着搭建一个个人博客，记录一些技术文章和折腾经验，但是觉得太复杂一直没有采取行动，最近又冒出了这个想法，而且愈发强烈，于是就开始了这个折腾之旅。在网上找了一些资料，最终选择了Hexo+GitHub Pages的方案，因为这个方案相对简单，更重要的是免费，白嫖使我快乐！！虽然使用个人服务器+WordPress方案也是不错的选择，但是相对来说成本较高，而且维护起来也比较麻烦。Hexo+GitHub Pages的方案相对来说更加轻量级，而且可以通过Git进行版本控制，非常方便。下面就开始记录一下搭建过程。

环境准备

在搭建之前，需要准备一些环境，主要包括Node.js、Git，如果已经安装了这两个环境，可以直接跳过这一步。

安装Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以用来开发服务器端程序。

1
sudo apt install nodejs

安装完成后，接着安装npm，Node.js的包管理工具：

1
sudo apt install npm

如果node版本过低，后续过程中可能会遇到EACCES错误，可以尝试使用以下命令进行更新：

1
2
3
4
5
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
source ~/.bashrc
nvm install 18

安装完成后，使用以下命令切换node到指定版本，查看node版本：

1
2
nvm use 18
node -v

如下图所示，便可进行下一步：

安装并配置Git

Git是一个分布式版本控制系统，可以用来进行版本控制。Hexo可以通过Git进行版本控制，而且GitHub Pages也是基于Git的。

1
2
3
sudo apt install git
#查看版本确认是否安装成功
git --version

没有账号的话，可以在GitHub上注册一个账号，然后配置Git的用户名和邮箱：

1
2
git config --global user.name “GitHub 用户名”
git config --global user.email “GitHub 邮箱”

创建SSH密匙

终端输入以下命令，一路回车，生成密匙对：

1
ssh-keygen -t rsa -C "GitHub 邮箱"

添加SSH密匙到GitHub

复制SSH公钥密匙到剪贴板：

1
cat ~/.ssh/id_rsa.pub

然后在GitHub上添加SSH密匙，点击右上角头像，选择Settings，然后选择SSH and GPG keys，点击New SSH key，将复制的密匙粘贴到Key中，点击Add SSH key即可。 如下图所示：

然后在终端输入以下命令，测试是否连接成功：

1
ssh -T  [email protected]

如果 “Hi xxx! You’ve successfully……”，说明连接成功：

创建GitHub Pages仓库

在GitHub上创建一个Public仓库，仓库名为用户名.github.io，例如我的用户名是xxxxx，那么仓库名就是xxxxx.github.io，这个仓库是用来存放博客的，所以仓库名必须是用户名.github.io，这样才能通过用户名.github.io访问到博客。勾选Add a README file，然后点击Create repository即可。

创建保存博客发布文件的分支

在仓库中创建一个名为publish的分支，用来保存博客发布文件，这样可以使源代码和发布文件分离，方便管理，也方便后续的自动化部署。

首先在本机打开想要存放博客的目录，并在此目录下运行终端，输入以下命令：

1
git clone https://github.com/用户名/用户名.github.io.git blog

然后cd blog进入到克隆的仓库目录，执行以下命令：

1
2
git checkout -b publish #创建并切换到publish分支
git branch -l           #查看分支,publish分支前面有*号，表示当前所在分支

安装Hexo

由于当前的blog目录存在.git文件夹和README.md文件，所以需要先转移这两个文件，安装完Hexo后再移回来，同时按下Ctrl+H显示隐藏文件，将.git文件夹和README.md文件移动到另一个目录下，然后执行以下命令：

1
npm install hexo-cli -g  #安装Hexo

安装完成后，可以使用hexo -v命令查看版本，结果如下：

hexo-cli: 4.3.1
os: linux 6.2.0-26-generic Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
node: 18.19.1
acorn: 8.10.0
ada: 2.7.2
ares: 1.20.1
base64: 0.5.0
brotli: 1.0.9
cjs_module_lexer: 1.2.2
......

初始化Hexo

在blog目录下执行以下命令：

1
2
hexo init                #初始化Hexo
             #安装依赖

安装完成后，将.git文件夹和README.md文件移动回来，然后执行以下命令：

1
2
3
git add .               #添加所有文件
git commit -m "init"    #提交
git push origin main #推送到远程仓库

这样就完成了Hexo的初始化。

配置Hexo

可通过编辑_config.yml文件，进行一些基础配置：

配置标题 title:
配置副标题 subtitle:
配置作者 author:
配置说明：description:
在后面直接输入内容即可，冒号后留一个空格。

本地预览

在blog目录下执行以下命令：

1
2
hexo generate  #生成静态文件，或者 hexo g
hexo server    #启动本地服务器，或者 hexo s

然后在浏览器中输入http://localhost:4000，即可看到Hexo的默认主题。

部署到GitHub Pages

本地测试通过后，就可以将博客部署到GitHub Pages了。首先需要安装hexo-deployer-git插件：

1
npm install hexo-deployer-git --save

然后在_config.yml文件中配置deploy：

1
2
3
4
deploy:
  type: git
  repository: [email protected]:用户名/用户名.github.io.git
  branch: publish

然后执行hexo g -d命令，即可将博客部署到GitHub Pages的publish分支上。 如果成功在浏览器中输入https://用户名.github.io，即可看到Hexo 默认页面。

配置主题

Hexo默认主题是landscape，但是这个主题比较简单，不够个性化，所以需要更换主题。这里我选择了Next主题，这是一个非常优秀的主题，支持多种语言，多种插件，而且还有很多个性化的配置。首先需要安装Next主题：

1
2
cd blog
npm install hexo-theme-next --save

将Next主题的配置文件复制到blog目录下cp themes/next/_config.yml _config.next.yml，然后在_config.yml文件中配置theme：

theme: next

然后执行hexo clean && hexo s命令，即可在浏览器中看到Next主题的页面:

发布博客

首先进入到blog目录下，然后执行以下命令创建一篇新的博客：

1
hexo new "FirstBlog"  #新建一篇博客

然后在source/_posts目录下会生成一个FirstBlog.md文件，编辑这个文件，写入博客内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
title: FirstBlog #标题
date: 2024-03-13 12:19:51
categories: #分类
    - 个人博客
tags: #标签
    - Markdown
    - Hexo-Next
mathjax:
    enable: true # 是否启用数学公式渲染
---

摘要
<!-- more -->

文章内容

内容编辑完成后，执行以下命令：

1
hexo g -d  #生成静态文件并部署到GitHub Pages

然后在浏览器中输入https://用户名.github.io，即可看到新发布的博客。

总结

至此，一个简单的个人博客就搭建完成了，接下来可以根据自己的需求进行个性化定制，例如修改主题、添加插件、添加评论等。 同时，可以使用hexo new命令新建博客，然后编辑博客内容，最后执行hexo g -d命令发布博客。这样就可以轻松地写博客了。 还可以通过Vs Code，利用图形化Git进行版本控制，非常方便。 然而到目前为止，博客只是初步搭建了起来，还没有进行美化和个性定制，后续会继续进行优化和完善。 希望这篇文章对你有所帮助，如果有任何问题，欢迎留言讨论。