前言

使用Hexo和GitHub搭建博客的原理主要涉及静态网站生成与托管两个核心环节：

首先，Hexo是一个基于Node.js的静态博客框架。它的工作原理是解析使用Markdown（或其他渲染引擎）编写的文章，并利用主题模板生成静态网页。这意味着，当使用Hexo创建博客时，其实是在本地编写和预览博客的内容。Hexo的优势在于其快速、简洁且高效，使创作者无需关注太多技术细节。

然后，生成的静态网页需要托管到网络上以供他人访问。GitHub Pages是一个很好的选择，它是一个允许用户在其GitHub仓库上托管静态网页的服务。通过将Hexo生成的静态网页推送到GitHub仓库，并利用GitHub Pages的设置功能，就可以将博客发布到互联网上。

因此，使用Hexo+GitHub搭建博客的原理就是：利用Hexo生成静态网页，然后将这些网页托管到GitHub Pages上，从而实现博客的在线发布和访问。

具体来说，搭建过程主要包括以下几个步骤：

  1. 安装Git和Node.js，这是使用Hexo和GitHub的前提。
  2. 安装Hexo，并初始化博客项目。
  3. 在GitHub上创建个人仓库，用于存放博客的源代码和静态网页。
  4. 将Hexo生成的静态网页推送到GitHub仓库。
  5. 在GitHub仓库中设置GitHub Pages，选择正确的分支和目录，以便正确托管静态网页。
  6. 更改Hexo的主题，以定制博客外观。
  7. 设置个人域名（可选），以便使用自定义域名访问博客。
  8. 开始使用Hexo编写和发布文章，每次发布新文章时，只需运行Hexo的生成命令，然后将生成的静态网页推送到GitHub即可。

准备工作

注册github账号

前往github官网进行账号注册。（若已有账号，此步骤可忽略）

https://www.github.com/

注册之后，要记住邮箱和用户名，这块在后面会用到。

安装NodeJS

Hexo是基于NodeJS的静态框架博客，所以，如果要安装Hexo，前提条件是要有NodeJS的环境。
进入NodeJS官网，下载对应的版本。

image-20240409170903874

如果是windows，安装的时候建议无脑下一步就行，如果 C 盘不吃紧的话，然后勾选所有组件，并勾选 Add to Path 将其添加到系统环境变量。

如果是Linux，可以参考这篇文章：

https://blog.csdn.net/qq_41974199/article/details/119328353

安装Node.js 会包含环境变量以及 npm 的安装，安装后，可以在命令行输入如下命令检测是否安装成功：

node -v   //显示 nodejs 的版本号。
npm -v    //显示 npm 的版本号

image-20240409170920334

【注】这块推荐使用14以上的nodeJS版本，之前用的v10的版本，会报错。

安装Git

https://git-scm.com/

若为windows，需要安装Git bash，所有安装建议都无脑下一步即可。

image-20240409170930145

若为Linux，直接命令行在线安装即可。

yum install -y git

image-20240409170945400

设置用户名和邮箱

因为 Git 是分布式版本控制系统，所以需要设置用户名和邮箱作为一个标识，在命令行输入如下：

git config --global user.name "user_name" # user_name 填入 GitHub 用户名
git config --global user.email "user_email" # user_email 填入 GitHub 注册的邮箱

此处全局设置用户名和邮箱后，将作为本地和github同步的 **[UserName]**。

搭建github仓库

新建仓库

登录github官网后，点击 “New repository”，创建一个名字为username.github.io（这里的 username 要替换成自己的实际的用户名） 的仓库。

比如，之前设置的用户名为 “muhe”，则这块创建的仓库名字为 muhe.github.io

image-20240409170957327

image-20240409171006790

配置SSH Key

使用git，输入如下命令，生成一对公私钥

$ ssh-keygen -t rsa -C "user.email" # user.email 为GitHub 上注册的邮箱

然后直接三个回车即可，默认不需要设置密码。查看是否已经有 ssh 密钥。打开用户目录 /root/.ssh

image-20240409171016406

然后找到生成的 .ssh 的文件夹中的 id_rsa.pub 密钥，将内容全部复制。

其中 id_rsa 是私钥不能泄露，id_rsa.pub 是公钥可以放心告诉他人。

打开GitHub SSH and GPG keys 页面，新建一个 ssh key：

image-20240409171031214

Title 为标题，任意填即可，将刚刚复制的 id_rsa.pub 内容粘贴进去，最后点击 Add SSH key。在 Git Bash 中检测 GitHub 公钥设置是否成功，输入如下命令：

ssh -T git@github.com

验证是否可以连接成功，若连接成功的话，显示如下：

image-20240409171040917

这一步骤，相当于生成了本地和github仓库的 [Password]

使用Hexo博客框架

简介

Hexo 是一个简单、快速、强大的基于 Github Pages 的博客框架，支持 Markdown 格式。

集成了众多优秀插件和主题。

由于 Github Pages 存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以 Hexo 所做的就是将这些 md 文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到 GitHub 。

安装与初始化

输入如下命令进行安装：

$ npm install -g hexo-cli # 此命令完成对 hexo 的安装

安装完成后，在电脑的某个地方新建一个文件夹（名字可以随便取）专门用于存放博客代码，比如我的是 /root/blog，由于这个文件夹将来存放博客的所有内容和素材，以及所有的博客操作都会在其中完成，所以最好不要随便放。

进入上面新建的目录，输入如下命令进行初始化

$ hexo init # 该命令完成 hexo 在本地博客目录的初始化

生成静态文件

输入如下命令，生成所需的静态文件：

$ hexo g # 生成静态文件

执行以上命令后，Hexo 就会在 public 文件夹中生成相关的 html 文件，这些文件将来都是要提交到 GitHub 上的 username.github.io 的仓库中去的。

本地预览

$ hexo s # 开启本地预览

hexo s 是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容，Ctrl+C 停止本地预览。本地预览可以实时查看博客的编辑情况，待博客写完后一起部署到 GitHub 上。

第一次初始化的时候 hexo 已经帮我们写了一篇名为 Hello World 的文章，默认的主题比较丑。

image-20240409171052488

上传到GitHub

设置站点配置文件

hexo 有 2 种 _config.yml 文件，一个是根目录下的全局的 _config.yml，一个是各个主体 theme 下的 _config.yml。将前者称为站点配置文件， 后者称为主题配置文件。

打开根目录下站点配置文件 _config.yml，配置有关 deploy 的部分：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:用户名/用户名.github.io.git
  branch: master

这块在动配置文件的时候，需要主要变量和值之前是要用空格来进行分隔的。

如 “type:git”，会报错；但使用”type: git”，不会报错。

安装插件

输入如下命令，安装部署插件

$ npm install hexo-deployer-git --save # 安装部署插件

若并进行上述操作，直接部署的时候，会报错。

部署到GitHub

输入如下命令，将本地的文件+资源等上传到github

$ hexo d

部署成功后，打开对应的网址 https://www.username.github.io

如果出现了和本地预览一样的效果，那么，表明部署成功。

image-20240409171102708

网站基本信息的修改

搭建好网站之后，有许多配置信息需要我们去修改，比如网站的标题、标签等选项，具体修改步骤如下：

打开博客目录下的_config.yml文件，找到如图所示的选项

image-20240409171116734

参数 描述
title 网站的标题
subtitle 网站的副标题
description 对于网站的描述，主要用于SEO
keywords 网站的关键词，支持多个关键词
author 作者名
language 网站使用的语言，对于简体中文用户来说，语言的设置跟使用不同的主题有关，可以参考各自主题的文档自行配置，一般为zh-CN
timezone 设置网站的时区，如果不填则默认使用你电脑的时区

ps：更多的配置信息修改可以去hexo的官方文档，戳我跳转，可以修改一个选项之后，执行hexo clean、hexo g、hexo s在本地看一下效果，等全部修改好之后再推送到仓库。

image-20240409171129884

更换Hexo主题

hexo默认的主题有点ugly，修改好基本配置信息之后，可以考虑换一个主题，主题多可以说的上是hexo框架的一大卖点，戳我去挑选主题，界面如下：

image-20240409171137932

下面推荐几种看起来不错的主题：

NexT

  • 仓库地址
  • 预览地址
  • 首先就是大名鼎鼎的Next主题了，页面简洁，功能全，用的人多，网上的个性化配置教程也超级多，用这个主题如果遇到问题，在网上基本上能找到对应的解决办法。

image-20240409171147964

Butterfly

image-20240409171156067

Nexmoe

image-20240409171235695

……

配置步骤

这块个人比较喜欢的一款主题Metery，部署过程如下：

Hexo的所有主题源代码都是托管在Github的，更换主题第一步：将该主题的源代码clone下来，放到本地Hexo站点根目录下的themes文件夹中。

访问Metery主题的Github仓库,复制仓库地址：https://github.com/blinkfox/hexo-theme-matery

image-20240409171247643

然后在本地站点根目录打开git bash 命令行，进入themes文件夹，开始拉取代码到本地：

cd themes
git clone https://github.com/blinkfox/hexo-theme-matery.git

image-20240409171256135

image-20240409171302526

更换主题

下载Hexo的主题到/themes文件夹之后，要在站点配置文件中配置使用该主题：

vim config.yml

image-20240409171309848

hexo一键三连后，查看效果

hexo clean
hexo g
hexo s

image-20240409171347929