（一）Hexo + GitHub Pages 搭建个人博客网站，最全最新教程来了【亲测有效】

小白yaa

已于 2023-05-24 17:59:11 修改

阅读量399

点赞数 1

分类专栏：创建个人博客文章标签： github node.js git

于 2023-05-24 15:22:29 首次发布

本文链接：https://blog.csdn.net/zss6666yi/article/details/130845959

版权

创建个人博客专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文指导如何在本地环境安装Git和Node.js，接着在GitHub创建个人仓库，然后通过安装和配置Hexo框架建立静态博客。文章详细介绍了如何应用NexT和Fluid主题来美化博客界面，提供了一步一步的配置和操作指南。

摘要由CSDN通过智能技术生成

前提

1. 安装Git

在自己电脑上安装好Git，hexo部署到GitHub时要用。

安装教程可以参考git安装

2. 安装Node.js

在自己电脑上安装好NodeJS，Hexo是基于NodeJS编写的，所以需要安装NodeJS和npm工具。

安装教程可以参考Node.js安装及配置

创建资料库（仓库）

在GitHub上创建一个新的代码仓库用于保存我们的网页。

点击Your repositories，进入仓库页面。

点击New按钮，进入仓库创建页面。

填写仓库名，格式必须为你的用户名.github.io，然后点击Create repository。

点击creating a new file创建一个新文件，作为我们网站的主页。

新文件的名字必须为index.html，内容先随便写一下，内容示例如下，填写之后点击Commit new file提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELLOWORLD</title>
</head>
<body>
    <h1>你好呀</h1>
    <h1>Hello ~</h1>
</body>
</html>

GitHub Pages中找到我们主页的地址是 zss

如果没有出现的话，可以在下方红框随便输入一个网址，点击保存，会提示不行，然后上面你自己的网址就出来了。

（PS：这是我自己试出来的，当时查了好多网上资料死活不出来，没办法只能这样了）

浏览器中访问改网址，展示成功。这里创建的网页是非常简陋的，只是为了演示下GitHub Pages的使用方式。

安装Hexo

采用Hexo来创建我们的博客网站，Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。点击进入官网。

安装 Hexo（可以进入到自己想安装的路径进行安装避免占用C盘空间）

npm install -g hexo-cli

创建一个项目 hexo-blog 并初始化

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

hexo g
hexo server

浏览器访问 http://localhost:4000，页面默认主图风格如下：

利用主题美化界面

Hexo 默认的主题不太好看，不过官方提供了数百种主题供用户选择，可以根据个人喜好更换，官网主题点这里查看。这里介绍两个主题的使用方法，Next 和 Fluid，个人比较喜欢Fluid，后面章节的功能也是以 Fluid 为基础进行讲解的。

打开.yml建议使用Sublime Text，可以避免一些错误，将其设置为中文版可以参考这个将Sublime Text 设置成中文版

1. NexT 主题

安装主题

cd hexo-blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

使用 NexT 主题

打开 _config.yml 文件，该文件为站点配置文件，将主题修改为 next

theme: next

本地启动

hexo g -d
hexo s

2. Fluid主题

Hexo 默认的主题不太好看，不过官方提供了数百种主题供用户选择，可以根据个人喜好更换，官网主题点这里查看。

我用的是Fluid，请看下文介绍

安装主题

下载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 Fluid。

【注意】一定要是大写的F，否则后面会报错，当时翻遍全网也找不到解决方法，耽误很多时间，就因为一个大小写，唉~

指定主题

如下修改 hexo-blog目录中的 _config.yml：

#可以使用ctrl+f去搜索页面关键字theme和language进行修改，这样更快一点（我是用的notepad++）
theme: Fluid  # 指定主题 大写F
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

创建「关于页」

首次使用主题的「关于页」需要手动创建：

hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

本地启动

hexo g -d
hexo s

浏览器访问 http://localhost:4000，Fluid主题风格页面如下

未完待续~

接下来的操作可以查看该专栏的其他文章

小白yaa

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（一）Hexo + GitHub Pages 搭建个人博客网站，最全最新教程来了【亲测有效】

GitHub Pages中找到我们主页的地址是。，内容先随便写一下，内容示例如下，填写之后点击。上创建一个新的代码仓库用于保存我们的网页。创建一个新文件，作为我们网站的主页。填写仓库名，格式必须为你的。按钮，进入仓库创建页面。编写的，所以需要安装。
复制链接

扫一扫

专栏目录