2024.11最新Hexo+GitHub搭建个人博客

时间：2024-11-09 07:49:36

2024.11最新Hexo+GitHub搭建个人博客

一、Hexo介绍

Hexo 是一个快速、简洁且高效的博客框架，有丰富的主题和插件可供使用。 Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。这篇文章讲述如何使用Hexo+GitHub Pages搭建个人博客。

以下是我基于 Hexo 搭建的个人博客：

木林小辞???? - RationalDysaniaer的个人博客

二、环境搭建

安装 Hexo 需要先安装以下两个应用程序：

  1. Node.js（官方建议使用 Node.js 12.0 及以上版本）
  2. Git

Hexo 是基于 Node.js 的框架，同时我们要用到 git 进行部署，这里我推荐两个都安装最新版本

安装 Node.js

下载地址：Node.js — 下载 Node.js®

可根据自己操作系统，按照官网提示安装

windows 系统安装时，请确保勾选 Add to PATH 选项（默认已勾选）

安装 Git

  • Windows安装地址：Git - Downloading Package
  • Mac：使用 Homebrew, MacPorts ，或者下载程序：git-osx-installer (abandoned) download | SourceForge.net
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

测试是否安装成功

打开终端输入以下指令判断是否安装成功且正确配置环境变量，如下图，如果成功看到版本号，代表安装成功

在这里插入图片描述

若安装过程中遇到问题，可百度解决，这里不做过多讲解

三、本地搭建 Hexo 博客

先将博客在本地搭建起来，新建一个文件夹用来存放博客程序，文件名和位置任意。

我这里是在 D 盘下新建了一个 Blog 文件夹，在该文件夹下，右键->显示更多选项，点击 Open Git Bash here，如果无此选项，请检查环境搭建时候成功

在这里插入图片描述

打开后输入以下命令一键安装hexo

$ npm install -g hexo-cli

可能遇到的问题：
输入命令后长时间卡住无法安装成功，可参考以下解决方案
此时按下 Ctrl+C 停止当前命令，输入以下命令配置淘宝镜像

$ npm config set registry https://registry.npmmirror.com

然后重新输入命令安装hexo

完成后输入以下命令初始化并安装组件

$ hexo init
$ npm install

可能遇到的问题：
输入 hexo init 后，如果卡在INFO Install dependencies不动，此时需按下 Ctrl+C 停止此命令，继续输入 npm install 即可。

这是可以发现文件夹中拉取了一些文件，根据日志可以了解到这是从远程仓库 https://github.com/hexojs/hexo-starter.git 中拉去的，打开可以发现是一个名为 hexo-starter 的初始项目

启动服务器（默认情况下，访问网址为： http://localhost:4000/）

$ hexo server

在这里插入图片描述

按住Ctrl键，再用鼠标左键点击最下面的网址即可跳转的浏览器，或者直接在浏览器输入地址http://localhost:4000，就能在浏览器中打开预览页面，按下 Ctrl+C 可以关闭服务

在这里插入图片描述

此时博客就已经在本地部署成功

四、部署到 GitHub Pages

创建GitHub仓库

在GitHub新建仓库，仓库名为用户名.github.io,这里的用户名替换为你自己GitHub上的用户名

比如我的用户名是RationalDysaniaer，新建的仓库名就是rationaldysaniaer.github.io

在这里插入图片描述

创建时选择 public 将仓库公开，推荐勾选 Add a REAMD file 为仓库创建描述文件

配置SSH密钥连接GitHub

2021年8月13日 GitHub 取消了对密码身份验证的支持，我们需要使用 GitHub 的个人访问令牌来代替密码，但每次上传都需要输入一次用户名和 token 显然比较麻烦，安全性也较低，配置 ssh 后就可以更加方便的上传文件

打开C盘，进入 Users 文件夹，接着打开电脑用户名文件夹，寻找是否有.ssh文件夹，如果有的话需删除掉，没有就继续进行下面的步骤

在这里插入图片描述

在该文件夹下右键打开Git Bash，输入以下命令生成ssh密钥，中途需按下三次回车键

$ ssh-keygen -t rsa -C "github绑定的邮箱"

成功后在该目录下生成了.ssh文件夹，用记事本打开.ssh文件夹下的id_rsa.pub文件，复制里面的内容

在GitHub设置中点击SSH and GPG keys选项，点击New SSH key

在这里插入图片描述

出现以下界面

在这里插入图片描述

填写 Title项 为 hexo，将复制的内容粘贴到 Key 文本框中，点击 Add SSH key 后需要输入一次 GitHub 密码，即可添加成功

再次打开Git Bush,输入以下命令验证是否能连接成功

$ ssh -T git@github.com

如果询问是否继续连接，输入yes即可，如下图出现successfully即为连接成功

在这里插入图片描述

最后，配置用户名和邮箱

$ git config --global user.name "Github上的username"
$ git config --global user.email "GitHub绑定的邮箱"

到这里已经成功配置好了 ssh 连接，可以将本地博客部署到 GitHub 了·

在刚刚创建的博客文件夹下再次打开 git bush，安装 hexo-deployer-git 插件

$ npm install hexo-deployer-git --save

打开_config.yml文件，更改最后面的 deploy 内容，用户名替换为自己的 github 用户名

deploy:
  type: git
  repository: https://github.com/用户名/用户名.github.io.git
  branch: main

生成静态文件

$ hexo g

上传到GitHub

$ hexo d

上传成功后就可以通过浏览器访问到你的博客网站

博客地址：https://用户名.github.io

将用户名替换为你自己的 GitHub 用户名，就可以通过此网址访问你的博客了，快将自己的博客网址发给你的小伙伴炫耀一下吧！

如果想要时博客更加美观，可以到 hexo 官网下载博客主题，同时查看官方文档修改配置文件，发表博客文章，一点点完善你的博客。

五、使用主题

进入 Hexo 主题页面：Themes | Hexo

挑选一个你喜欢的主题，如果要使用这个主题，就去看该主题 GitHub 上的 readme 文件，最好不要直接自己摸索

如果readme文件没有说明如何使用，则使用一般方法：

  1. 克隆主题项目到 hexo 博客根目录 themes 文件夹下

  2. 更改博客配置文件 _config.yml, theme 选项值设为新的主题名称，这个配置可以用来切换下载到 themes 文件夹下的不同主题

清楚缓存并重新启动项目，就可以看到新的主题界面了

如果要更新主题，进入主题文件夹下使用以下命令

$ cd themes/主题名
$ git pull origin master

使用的主题一般也会有一个自己单独的配置文件，详细配置请看GitHub上该主题作者的readme文档

还有一些并未放在官网上的第三方主题，可能更改了大量博客起始文件的内容，并不是复制到主题文件夹下使用，而是直接克隆到整个博客项目

六、配置

需要在 _config.yml 中修改配置

可查阅官方文档进行配置：配置 |Hexo 系列

接下来是一些进阶内容

七、Hexo目录结构

在初始化博客文件后，项目文件夹将如下所示：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的配置文件， 可以在此配置大部分的参数

package.json

应用程序的信息， EJS, Stylus 和 Markdown 渲染引擎已默认安装，可以*移除

scaffolds

模版文件夹，在新建文章时，Hexo 会根据 scaffold 来创建文件

source

资源文件夹。 是存放用户资源的地方。 除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题文件夹， Hexo 会根据主题来生成静态页面。

八、常用命令

初始化
$ hexo init [folder]

初始化网站。如果没有提供 folder，Hexo 会在当前目录下搭建一个网站

此命令是运行以下步骤的快捷方式：

  • Git clone hexo-starter including hexo-theme-landscape
  • 安装依赖项
新建文章
$ hexo new <title>
生成静态文件
$ hexo generate

可以简写为：

$ hexo g
部署网站
$ hexo deploy

可以简写为：

$ hexo d
清除缓存
$ hexo clean

可以简写为：

$ hexo cl

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

列出所有路由
$ hexo list <type>
显示版本信息
$ hexo version

九、部署到Vercel加速访问

Vercel 是一个用于静态站点和无服务器函数的云平台，使开发者能够轻松部署他们的项目。

使用Vercel的优点可以阅读下面的文档：

Vercel：前端开发者的最佳部署工具 | 数据学习者官方网站(Datalearner)

Vercel官网：

Vercel: Build and deploy the best web experiences with the Frontend Cloud

相关文章