在Mac OS上轻松搭建Hexo博客的完整教程

现在很多技术博客都是基于Hexo搭建，相信有不少小伙伴也想搭建一个属于自己的个人博客。

而Hexo搭建个人博客的教程内容都是在Windows下实现的，macOS的教程却少之又少。然而，macOS下完成搭建远比在Windows下更容易。下面就开始我们今天的主题吧。

准备工作

安装 Homebrew

Homebrew是一款社区驱动的包管理器，能方便我们在macOS上安装需要的环境。在国内，更推荐使用镜像源来安装homebrew，下面将以中科大的镜像源来演示。

  • 打开终端，设置环境变量。
1
2
3
4
export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.ustc.edu.cn/brew.git"
export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.ustc.edu.cn/homebrew-core.git"
export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.ustc.edu.cn/homebrew-bottles"
export HOMEBREW_API_DOMAIN="https://mirrors.ustc.edu.cn/homebrew-bottles/api"
  • 运行中科大的Homebrew安装脚本：
1
/bin/bash -c "$(curl -fsSL https://mirrors.ustc.edu.cn/misc/brew-install.sh)"
  • 如果你不在国内，可以略过设置环境变量的步骤并直接使用正常的安装脚本：
1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装 Git、Node.js

Homebrew安装完成后，安装Git和Node.js：

1
2
brew install git
brew install node

测试是否安装成功

依次在终端中输入下面的命令：

1
2
3
npm -v
node -v
git --version

如出现npm、Node.js和Git的版本号，代表已经安装成功。

安装 Hexo

使用npm命令安装Hexo：

1
sudo -s npm install -g hexo-cli

等待安装完成后再初始化博客：

1
hexo init blog

这条命令作用在你当前的目录下（默认是在home目录）新建一个名为blog的文件夹（你可以将这条命令中的blog替换成任何你想要的名字），并在其中初始化你的博客。注：之后的所有操作都在这个文件夹内进行！请确保在执行后续的操作前已经切换到这个文件夹目录（cd blog）。

初始化完成，即可切换至blog目录，生成和预览博客。

1
2
3
cd blog
hexo g #更新
hexo s #创建本地网络环境，访问http://localhost:4000

在执行完hexo s后，通过浏览器访问http://localhost:4000即可预览你的博客，预览功能会实时监测博客的文件变化，并实时反馈在浏览器上，在发布之前用来调试前端非常好用。

部署到GitHub

在执行上述命令后，博客的静态文件会生成在public文件夹下，只需要将这些文件上传到你的静态网站托管服务即可将站点发布在网上，本文用到的托管服务为Github Pages。

下文提到的用户名均指你自己的GitHub用户名。

添加SSH Key 到GitHub

配置GitHub用户名和账号

1
2
git config --global user.name "username"
git config --global user.email "[email protected]"

[!IMPORTANT]

其中 username 是你的用户名，[email protected]是你 Github 的登录邮箱。

之后通过终端命令生成SSH Key：

1
ssh-keygen -t rsa -C "[email protected]"

执行的过程中只需要三个回车键就好了，完成后会在~/.ssh/id_rsa.pub目录下生成需要使用的 key，也就是公钥。

输入下列命令即可在终端中查看：

1
cat ~/.ssh/id_rsa.pub

接着我们打开GitHub_Settings_keys 页面，新建New SSH Key，Title随意填，Key就把刚才复制的内容全都粘贴上去。然后点Add SSH Key即可。

完成这些工作以后可以通过以下命令测试是否配置成功：

1
ssh [email protected]

如上图，出现你的GitHub用户名代表配置成功。

上传至 GitHub Pages

在Github上新建一个仓库，Repository Name 填你的用户名.github.io，仓库状态设为 Public，点击 Create Repository 创建新的网站仓库。

接着，我们安装安装 Hexo 的扩展 hexo-deployer-git，注：一定要在你的博客文件夹下执行：

1
npm install hexo-deployer-git --save

打开博客安装目录下的_config.yml文件，翻到底部，修改deploy部分为：

1
2
3
4
deploy:
  type: git
  repo: [email protected]:你的用户名/你的用户名.github.io.git
  branch: main

修改好配置后，运行系列命令，将代码部署到GitHub上：

1
hexo cl; hexo g; hexo d

[!CAUTION]

  • hexo clean：删除之前生成的文件，可以用hexo cl缩写。
  • hexo generate：生成静态文章，可以用hexo g缩写
  • hexo deploy：部署文章，可以用hexo d缩写

注意：deploy时可能要你输入 username 和 password。

如果出现Deploy done，则说明部署成功了。

20240830204509

稍等两分钟，打开浏览器访问：https://你的名称.github.io)，这时候我们就可以看到博客内容了。

20240830205212

利用Cloudflare 加速 GitHub Pages

在 Workers 和 Pages 中选择 Pages 的 连接到 Git

20240830205555

440581264cb313ed77e75

然后登录你Blog仓库对应的GitHub帐号

20240830205754

20240830205913

点击保存并部署后等待部署完成即可。

20240830210045

提示成功！您的项目已部署到以下区域：全球后，浏览器访问给你的地址，这时候我们就可以看到博客内容了。

20240830210212

这时你也就可以将你的<用户名>.github.io的仓库设置为Private私库了

如果你有自己的域名，你可以在这里绑定你自己的自定义域，即可

20240830210336

如何使用

新建文章

1
hexo new 这是一篇新的博文

然后用文本编辑器去编辑_posts/这是一篇新的博文.md里的内容即可，注意要使用Markdown格式书写。
详细使用方法可以查阅 https://hexo.io/zh-cn/docs/writing

编辑完成后保存，可用以下命令生成本地页面，访问http://localhost:4000/ ，进行预览。

1
hexo cl && hexo s

确认无误后输入以下命令，即可将内容推送至GitHub仓库：

1
hexo cl && hexo g && hexo d

参考资料

参考资料1

参考资料2