github.io+hexo搭建个人博客

一、环境安装

1.1 必备环境安装

Node.js — Run JavaScript Everywhere (nodejs.org)

Git - Downloads (git-scm.com)

这是必备的两个基本环境,请先安装这两个基本环境,网上均有教程,请参考其他教程进行安装

image-20240505141421146

运行这三条指令能够出现相应的版本号即可,不要求版本号相同。

二、github.io仓库创建

创建github page仓库的仓库名规则<用户名>.github.io如下图所示,并选择公开项目。

image-20240505141654227

点击Actions,查看页面运行状态,等待其成功运行部署,这个过程可能会有点漫长可以稍等1分钟左右

image-20240505141919262

image-20240505141957864

成功运行后,通过访问https://<用户名>.github.io基于访问看到基础页面。(如果报错,可以删除仓库重复上述过程,或者寻找其他大佬的文章解决错误)

image-20240505142102518

这样初步的界面就已经搭建出来了,具有前端知识的大佬可以传自己的博客模板到新建的仓库即可看到自己的博客了,我这样的鼠鼠还得通过hexo去使用模板

三、上传博客模板

3.1 安装Hexo

使用 npm 一键安装 Hexo 博客程序:(此为全局安装命令,一般也推荐全局安装,局部安装我也没搞懂)

npm install -g hexo-cli

3.2 Hexo本地

首先在自己想要的地方创建一个空文件夹来初始化hexo

hexo init # 初始化
npm install # 安装组件

image-20240505142944417

完成上述初始化后,在继续执行下方指令生成页面也本地预览,访问本地网址http://localhost:4000/

hexo g # 生成页面
hexo s # 启动预览

image-20240505143118833

image-20240505143129696

至此,本地hexo已经成功,我们将我们生成的模板上传到自己的github.io仓库中,即可实现访问我们的github page得到相应的博客模板

3.3 部署到github

修改刚才我们初始化hexo文件中的_config.yml文件中最后的配置

deploy:

type: git

repo: git@github.com:<用户名>/<用户名>.github.io.git

branch: main(这个分支根据自己的主分支进行修改,有的人是master)

image-20240505150515357

修改保存退出,然后再命令行执行指令

npm install hexo-deployer-git –save

hexo d

再次等待Actions运行成功,这个过程稍微一点漫长,成功后,访问我们的github page网页即可,即网址https://<用户名>.github.io

image-20240505144127778

image-20240505144240827

四、发布文章

进入博客所在目录执行命令:

hexo new “<文章名称>”

新建的文章的.md文件会被保存在根目录/sorce/_posts/下面,将文章内容写入.md文件中,再次生成页面,上传到github上即可

hexo clean #清理

hexo g

hexo d

五、hexo模板主题切换

  1. 选择自己喜欢的主题

主题网址:Themes | Hexo

以下选择主题saicaca/hexo-theme-vivia: A clean and minimalist theme for Hexo. (github.com)举例安装主题

每个主题的安装方式都类似,但又有细微的差距,差距来源于他们的依赖以及插件的不同。

  1. 阅读安装步骤

每个主题都会列有相应的安装步骤,教你怎么装,跟着装就是了

image-20240422161014628

例如,上述主题的安装步骤

我推荐直接下载源代码,然后将源代码解压,放置到相应的hexo文件夹的themes文件夹下即可。

因为git clone命令不稳定,导致有时候下载不成功。npm下载嘛,没试过,因为不确定它会把主题下到哪儿去。

进入hexo的博客文件夹执行下方命令即可。

git clone https://github.com/saicaca/hexo-theme-vivia.git themes/vivia7(存在名字可以做更改)

image-20240422161529504

  1. 安装相关依赖

有些主题并不需要安装相关依赖,有些则需要,所以根据主题的要求进行安装即可,示例主题需要通过下方命令安装依赖,则在根目录执行下方命令即可。

npm install colorjs.io stylus hexo-symbols-count-time

  1. 切换主题

打开博客文件夹根目录下的_config.yml文件,对其中的theme字段的值进行修改,修改为刚才下载主题存储在themes文件夹下的主题文件夹的名称hexo-theme-vivia

image-20240422161736726

另外,修改language字段的值为zh-CN,将语言切换到中文。

image-20240422161833753

  1. 再次部署博客即可

hexo g && hexo clean && hexo d

注意:有些主题可能存在问题,自己再换一个就是啦。

最后最后,可能你想问,那我怎么修改主题中的各种文本和加标签呢?

答案:对主题的.yml文件或者根目录自带的_config.yml进行修改,达到自己想要的效果,可以参考官方文档配置 | Hexo,或者各位大佬的博客。


github.io+hexo搭建个人博客
http://candyb0x.github.io/2024/05/05/github-io-hexo搭建个人博客/
作者
Candy
发布于
2024年5月5日
更新于
2026年4月27日
许可协议