Hexo搭建Github博客教程

  1. 1. 环境配置
  2. 2. 本地博客搭建
  3. 3. 部署至Github
  4. 4. 博客主题设置
  5. 5. 博客备份

使用 Hexo 搭建我的 Github 个人网站:My Github Blog

1. 环境配置

(1)安装 Git Bash:Windows 安装配置 Git 教程

(2)安装 NodeJS:NodeJS 的安装及配置

(3)修改 npm 镜像源:

1
npm config set registry https://registry.npm.taobao.org

(4)安装 Hexo:

1
npm install hexo-cli -g

(5)安装部署插件:

1
npm install hexo-deployer-git --save

此处如果出现 npm ERR! Error: EPERM: operation not permitted, mkdir 'E:\NodeJS\node_modules\.corepack-xTCBGLKh 之类的错误需要以管理员身份打开 cmd,然后在 cmd 中安装。

2. 本地博客搭建

首先创建文件夹 Hexo,然后进入该文件夹,创建文件夹 blog,使用管理员身份打开 cmd,进入 blog 文件夹,初始化 Hexo 博客:

1
hexo init

然后在本地启动一下看看效果:

1
hexo s

然后打开链接:http://localhost:4000/ 查看一下页面内容,之后我们进行页面调试都是在这个本地链接进行的。

使用 VS Code 打开 blog 文件夹,其中,source/_posts 文件夹下存放我们写的文章,themes 文件夹存放博客的主题,_config.yml 是博客的全局配置文件,_config.landscape.yml 是博客的主题配置文件。

3. 部署至Github

在 Github 创建一个名为 用户名.github.io 的仓库,例如:AsanoSaki.github.io

在 VS Code 中打开 blog 文件夹,找到 _config.yml 文件,找到 deploy,按照以下格式进行修改:

1
2
3
4
deploy:
type: git
repo: git@github.com:你的用户名/你的用户名.github.io.git
branch: master

最后执行以下命令:

1
2
3
hexo clean  # 清除缓存
hexo g # 生成静态网页
hexo d # 部署到Github,注意需要在Git Bash中部署

在部署的时候如果出现警告:LF will be replaced by CRLF the next time Git touches it,可以用以下指令禁用将 LF 自动转换为 CRLF:

1
git config --global core.autocrlf false

然后访问域名:https://用户名.github.io/ 即可进入自己的博客啦。

4. 博客主题设置

Hexo 主题官网:Hexo Themes

将下载好的主题放到 blog/themes 文件夹中,然后将根目录下的 _config.yml 中的主题修改为下载的主题即可,例如:

1
theme: shoka

然后进入主题的文件夹,该文件夹下也有一个 _config.yml 文件,修改这个文件的内容即可修改当前博客主页的样式。

5. 博客备份

在 Github 新建一个名为 blog 的私有仓库,然后在 Hexo/blog 目录下打开 Git Bash,执行以下命令:

1
2
3
4
5
6
7
git init  # 初始化仓库
git add . # 添加文件到暂存区
git commit -m "initial blog" # 将暂存区内容添加到仓库
git branch -M main # 重命名分支为main,和博客的分支master区分开
git remote add origin git@github.com:你的ID/blog.git # 添加到远程版本库
git push -u origin main # 提交到Github,注意只有第一次提交需要用这个指令
git push # 之后提交用这个指令

如果在执行 git add . 时出现警告:You've added another git repository inside your current repository.,可以将 blog 目录中的 .deploy_git 文件夹删除。