搭建个人网站 - 如何从零开始基于 hexo + github pages 搭建个人网站

1. 前言

本文提供了从零开始，基于 hexo 和 github pages 搭建个人静态网站的步骤。

由于网上已经有很多资源了，所以对于一些基础的准备工作下面直接用链接替代。同时下面的操作假设用户已经熟悉 git 并且已经有 github 账号。

2. 准备工作

下面操作仅针对 Mac 测试。

1. 安装配置 Homebrew，参考：

• https://zhuanlan.zhihu.com/p/372576355
• https://blog.csdn.net/weixin_41317840/article/details/128751211

2. 安装配置 Node.js 和 npm，参考：

• https://blog.csdn.net/weixin_41317840/article/details/128756634

输入 node -v 和 npm -v 查看是否安装成功。

3. 安装并创建 hexo 项目

安装教程参考 hexo 官网。

采用 npm 安装 hexo：

npm install -g hexo-cli

如果遇到 npm 安装慢的问题，可以修改 npm 的源，参考 国内npm源镜像。

安装完成后，输入 hexo -v 查看是否安装成功。

成功安装 hexo 后，即可创建 hexo 项目：

hexo init <blog_name>
cd <blog_name>
npm install

上面的 <blog_name> 为博客所在的文件夹名。

上面完成配置后，可以通过，即可在本地查看静态网站：

# 生成静态文件
hexo generate
# 或者简写为 hexo g

# 启动本地服务
hexo server
# 或者简写为 hexo s

4. github pages 配置

完成上述配置只是可以在本地查看静态网站，接下来需要将静态网站部署到 github pages 上，从而可以通过域名访问。

假设已经有了 github 账号，接下来创建一个新的 repository，名字为 <username>.github.io，其中 <username> 为 github 用户名。

下面开始配置 hexo 项目，这里采用最简单的 一键部署：

一键部署不会将源文件上传到 github，只会将生成的静态页面文件上传到 github。

首先安装 hexo-deployer-git：

npm install hexo-deployer-git --save

然后在路径下的 _config.yml 文件中配置：

deploy:
    type: git
    repo: <repository url> # 仓库地址
    branch: [branch]
    message: [message]

其中 <repository url> 为 <username>.github.io 的仓库地址。这里的地址可以是 http url 或者 ssh url：

• 如果是 http url：deploy 时会要求输入 github 用户名和密码。
• 如果是 ssh url：可以先在 github 中添加本机的 ssh key，实现免密 deploy。