使用 Hexo 搭建个人博客

20 年 4 月 12 日 星期日
2779 字
14 分钟

长文警告⚠️❗❗❗

如有疏漏请大佬指正🌚🌞

下图是总体的部署思路

来自酷安@rainy_king_solo

Quick Start

准备阶段

安装 Node.js

2025.3.26 注:

当前可通过工具 nvmfnm 快速安装 NodeJS 并切换版本

下载地址:传送门 去 NodeJS 官网下载相应版本,进行安装。 可在命令行通过 node -v 测试 NodeJS 是否安装成功

shell
node -v

安装 Git

下载地址:传送门 去 Git 官网下载相应版本,进行安装。(无脑 next 即可)可在命令行测试 git 是否安装成功

shell
git --version

配置 SSH key

在 C:\Users\【当前用户名】目录下右键单击选择 Git Bash Here,在命令行中输入

shell
ssh-keygen -t rsa -C "your_email@example.com"

也可以使用最新的

shell
ssh-keygen -t ed25519 -C "your_email@example.com"

成功后会在 .ssh 文件夹生成 id_rsa 以及 id_rsa.pub,打开 id_rsa.pub(可以使用任意文本编辑器打开),将文件里的所有字符复制

添加 SSH Key

GitHub

登陆 GitHub 在任意界面右上角,点击你的头像,选择 Settings-> SSH keys->New SSH key,Title 是给密钥起的名字,然后在 Key 中粘贴刚刚复制的 SSH Key,点击 Add SSH Key 即可

Coding(腾讯码市)

登陆 Coding 在任意界面右上角,点击你的头像,选择 个人设置->SSH公钥->新增公钥,在公钥内容中粘贴刚刚复制的内容点击添加即可

Gitee(阿里码云)

登陆 Gitee 在任意界面右上角,点击你的头像,选择 设置->安全设置->SSH公钥,在公钥内容中粘贴刚刚复制的内容点击确定即可

安装 Hexo

安装

在用户目录(C:\Users\【当前用户名】)新建一个文件夹并右键,选择 Git Bash Here,在命令行输入以下代码

shell
npm install -g hexo

等安装完毕,通过输入 hexo 的命令来测试 Hexo 是否安装成功,成功输出如下:

shell
zry:~$ hexo
Usage: hexo <command>

Commands:
  help     Get help on a command.
  init     Create a new Hexo folder.
  version  Display version information.

Global Options:
  --config  Specify config file instead of using _config.yml
  --cwd     Specify the CWD
  --debug   Display all verbose messages in the terminal
  --draft   Display draft posts
  --safe    Disable all plugins and scripts
  --silent  Hide output on console

For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: https://hexo.io/docs/
初始化 Hexo
shell
hexo init hexo

初始化成功后,会显示 Start blogging with Hexo!

这时在文件夹里会多出一个 hexo 文件夹

安装依赖文件以及部署形成文件

先输入

shell
cd hexo

安装依赖文件,输入

shell
npm install

部署形成文件,输入

shell
hexo generate

本地测试 Hexo

输入

shell
hexo server

或者

shell
hexo s

此时提示 Hexo is running at [http://loalhost:4000/](http://loalhost:4000/).

接着我们打开浏览器,输入 http://localhost

/ 即可看到博客

此时 Hexo 已经安装完了


创建代码仓库

GitHub

配置 githubPage

登录 Github,点击 New repository 来新建一个代码库

输入仓库名:(你的 Github 名称).github.io,然后点击 Create repository

注意:创建的仓库名字必须用的 github 的用户名,因为 Github Pages 仅当你的用户名作为仓库名才能激活

启用 GitHub Page

点击右边的 Setting 菜单进入设置,点击 Launch automatic page generator

进入之后点击底部的 Continue to layouts

试着打开自己在 github 的静态网址,比如 https://zryyyy.github.io

将本地 hexo 项目托管到 Github

打开 hexo 根目录下的配置文件 _config.yml

编辑最后面的 deploy 属性,加入代码:

yaml
deploy:
  type: git
  repository: git@github.com:zryyyy/zryyyy.github.io.git
  branch: master

注:

type 使用是 git repository 属性改成你的刚才创建仓库 git 地址 分支 branch 填写 master

Coding

配置 Coding Page

登陆 Coding,点击 所有项目 然后点击 新建项目

点击 DevOps 项目

项目名称项目标识都填自己的用户名

勾选 启用README.md 文件初始化项目

点击 完成创建 后进入创建的仓库

点击 持续部署->静态网站->新建静态网站->保存

注:如果没有实名认证应该需要先实名认证一下

将本地 hexo 项目托管到 Coding

打开 hexo 根目录下的配置文件 _config.yml

编辑最后面的 deploy 属性,加入代码:

yaml
deploy:
  type: git
  repository: git@e.coding.net:zryyyy/zryyyy.git
  branch: master

注:

type 使用是 git repository 属性改成你的刚才创建仓库 git 地址 分支 branch 填写 master

Gitee

配置 Gitee Page

登陆 Gitee,点击上方的+->新建仓库

输入项目名称

归属路径使用账号

最后点击创建

将本地 hexo 项目托管到 Gitee

打开 hexo 根目录下的配置文件 _config.yml

编辑最后面的 deploy 属性,加入代码:

yaml
deploy:
  type: git
  repository: htttps://gitee.com/zryyyy/zryyyy.git
  branch: master

注:

type 使用是 git repository 属性改成你的刚才创建仓库 git 地址 分支 branch 填写 master

部署到代码仓库

安装 hexo-deployer-git 插件

在 hexo 根目录右键后点击Git Bash Here,输入命令

shell
npm install hexo-deployer-git --save

安装自动部署发布工具

输入命令

shell
hexo clean
hexo g
hexo d

hexo clean 作用是清除编译的部署文件每次在对博客选项(如主题)修改后都要执行这个操作不然会导致进行的修改不生效

hexo g 作用是编译部署文件

hexo s 作用是本地预览,如果确定博客内容没有问题可以跳过,但是一般建议还是先在本地预览一下

hexo d 作用是将生成的部署文件使用 SSH 或者 https 推送到代码仓库

hexo 支持使用&&连接两个命令所以也可以直接输入

shell
hexo clean && hexo g && hexo d

发布博客,首次发布可能需要在 shell 中输入账号和密码

注意事项

  1. _config.yml 文件中的冒号后面一定要有空格,否则不能正确识别,建议不要用记事本打开因为可能会出现一些不知道的错误,我使用的是 lighttable (现在是 VS Code)
  2. 如果要同时部署到多个代码仓库,需要在每个 type 前面的两个空格中的第一个空格改成-如下面的代码所示
yaml
deploy:
  - type: git
    repository: git@github.com:zryyyy/zryyyy.github.io.git
    branch: master
  - type: git
    repository: git@e.coding.net:zryyyy/zryyyy.git
    branch: master
  1. _config.yml 中基本的配置选项,根据自己需要修改
yaml
#因为hexo的版本不同,可能有些参数会发生变化

# Site
title: Zry's blog #网站的标题
subtitle: '' #副标题
description: '' #描述
author: Zry #作者信息
language: zh-CN #语言(zh-CN为中文简体)

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: stun #要应用的主题名

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  - type: git #部署环境一般写的都是 git
    repository:
      git@github.com:zryyyy/zryyyy.github.io.git
      #git 的仓库地址,替换成用户名即可
    branch: master #分支名称,默认为 master
  - type: git
    repository: git@e.coding.net:zryyyy/zryyyy.git
    branch: master
  1. 在对博客文件修改后必须执行 hexo cleanhexo g 后才可使用 hexo d 进行部署

  2. 部署完后在浏览器输入自己的域名即可查看博客,下面是我的博客地址

    主域名

    Vercel

    GitHub

  3. 更多的配置可在 hexo 官方文档 查看


使用hexo写作

生成新文章

hexo 根目录下右键后点击 Git Bash Here,输入

Bash
hexo new [layout] <title>

layout 为文章的布局,默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局

title 为文章标题,可自己命名

在输入时不用加上 []<>

执行完后会在 hexo\source\_posts 目录生成以刚刚输入的题目为文件名的 .md 文件

Markdown写作

hexo 原生支持 Markdown,所以文件为 .md,可以用支持 Markdown 的编辑器进行写作,下面是比较好用的 Markdown 编辑器

  • Typora 是我最常用的编辑器😏,完全免费,支持 Windows、OS X 和 Linux,支持即时渲染技术,这也是与其他 Markdown 编辑器最显著的区别,支持数学编辑,可与 Word 直接格式转换,在 Pandoc 的支持下进行多种文档格式转换,Typora 适合那些对码字手速和排版顺畅度有要求的人群,而且对小白友好不懂 Markdown 的也可以轻松上手
  • Visual Studio Code 这是众所周知的神器,是微软推出一款轻量级的文本编辑工具,类似于 Sublime,默认集成 Markdown 文档编辑插件,原生支持高亮 Markdown 的语法,但想要实时预览还需要选择 Markdown: Open Preview to the Side 命令实现,相关教程请点击此处
  • Marxico 中文名马克飞象,提供桌面客户端以及离线 Chrome App,支持移动端 Web,可以直接把文本存到印象笔记,缺点是不免费,点击此处访问 Marxico 国际版
  • Sublime Text 是基于 Vim 开发的跨平台代码编辑器收费 80 美元,可以免费试用,支持 OS X、Windows、Ubuntu 等 UNIX 及 Linux 操作系统,由于其功能的多样性而广受好评,界面简约大方,定位专业,原生支持的编程语言就多达十几种,通过第三方插件,还能实现更多语法的支持,其中就包括 Markdown ,但缺点不能实时预览,不过用户可以通过 Markdown Preview 的插件实现对 Markdown 的预览,具体教程请点击此处查看

2020.8.15 更新:

更新主题方法:

shell
git add .
git stash
git pull
git stash pop

原理:

1.git stash 可以将工作区恢复到上次提交的内容,同时备份本地所做的修改才可以正常进行 git pull

2.git pull 完成后,执行 git stash pop 会将之前本地做的修改应用到当前工作区

附:相关Git命令知识

git add . 他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件

git stash 能够将所有未提交的修改(工作区和暂存区)保存至堆栈中,用于后续恢复当前工作目录

git stash save 作用等同于 git stash ,区别是可以加一些注释

git stash list 查看当前 stash 中的内容

git stash pop 将当前 stash 中的内容弹出,并应用到当前分支对应的工作目录上 注:该命令将堆栈中最近保存的内容删除(栈是先进后出) 如果从 stash 中恢复的内容和当前目录中的内容发生了冲突,也就是说,恢复的内容和当前目录修改了同一行的数据,那么会提示报错,需要解决冲突,可以通过创建新的分支来解决冲突

git stash apply 将堆栈中的内容应用到当前目录,不同于 git stash pop,该命令不会将内容从堆栈中删除,也就说该命令能够将堆栈的内容多次应用到工作目录中,适应于多个分支的情况 堆栈中的内容并没有删除。 可以使用 git stash apply + stash名字(如stash@{1})指定恢复哪个 stash 到当前的工作目录

git stash clear 清除堆栈中的所有内容

git stash show 查看堆栈中最新保存的 stash 和当前目录的差异