GitHub Pages + Hexo搭建个人博客网站，史上最全教程

最新推荐文章于 2024-09-29 19:23:06 发布
最新推荐文章于 2024-09-29 19:23:06 发布
阅读量6.1w 收藏 495
点赞数 194
分类专栏： 建站 文章标签： Hexo Git
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaorongke/article/details/119089190
版权

文章目录


本文介绍如何使用GitHub Pages + Hexo搭建个人博客网站，完全免费，所有内容本人亲测，绝对可用。

一、准备工作

1. GitHub账号

需要有一个GitHub账号，没有的话到 官网 申请一个。
注册很简单，不懂的话可以参考 GitHub申请账号

2. 安装Git

在自己电脑上安装好Git，hexo部署到GitHub时要用。
网上找篇教程或者参考 Git安装(Windows)

3. 安装NodeJS

在自己电脑上安装好NodeJS，Hexo是基于NodeJS编写的，所以需要安装NodeJS和npm工具。
网上找篇教程或者参考 NodeJS安装及配置(Windows)

二、创建仓库

在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>yaorongke</title>
</head>
<body>
    <h1>yaorongke的个人主页</h1>
    <h1>Hello ~</h1>
</body>
</html>

请添加图片描述
GitHub Pages中找到我们主页的地址为 https://yaorongke.github.io/
请添加图片描述
浏览器中访问，展示成功。
请添加图片描述
这里创建的网页是非常简陋的，只是为了演示下GitHub Pages的使用方式。

三、安装Hexo

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

安装 Hexo

npm install -g hexo-cli

查看版本

hexo -v

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

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

hexo g
hexo server

浏览器访问 http://localhost:4000，页面默认主图风格如下
请添加图片描述

四、更换主题

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

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主题

以下安装步骤摘自 Fluid官网

安装主题

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

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

创建「关于页」

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

hexo new page about

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

修改后的文件示例如下：

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

本地启动

hexo g -d
hexo s

浏览器访问 http://localhost:4000，Fluid主题风格页面如下
请添加图片描述

五、创建文章

如下修改 Hexo 博客目录中的 _config.yml，打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

post_asset_folder: true

执行如下命令创建一篇新文章，名为《测试文章》

hexo new post 测试文章

执行完成后在source\_posts目录下生成了一个md文件和一个同名的资源目录(用于存放图片)
请添加图片描述
在资源目录测试文章中放一张图片 test.png
请添加图片描述
在测试文章.md中添加内容如下，演示了图片的三种引用方式。第一种为官方推荐用法，第二种为markdown语法，第三种和前两种图片存放位置不一样，是将图片放在\source\images目录下。这三种写法在md文件中图片是无法显示的，但是在页面上能正常显示。

图片的引入方式可参考官方文档 https://hexo.io/zh-cn/docs/asset-folders.html，有详细介绍。

---
title: 测试文章
date: 2021-06-10 16:35:20
tags:
- 原创
categories:
- Java
---

这是一篇测试文章

{% asset_img test.png 图片引用方法一 %}

![图片引用方法二](test.png)

![图片引用方法三](/images/test.png)

本地启动

hexo g -d
hexo s

浏览器访问 http://localhost:4000，页面如下，文章添加成功
请添加图片描述

六、个性化页面展示

页面的标题等位置显示默认的文字，可以改下显示一些个性化的信息。

1. 浏览器tab页名称

修改根目录下 _config.yml 中的 title 字段。
请添加图片描述

2. 博客标题

主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段。

请添加图片描述

3. 主页正中间的文字

主题目录 themes\fluid 下 _config.yml 中的 text 字段。
请添加图片描述
修改好配置后，页面效果如下，可以看到现在显示的内容变成了我们的个人信息。
请添加图片描述

七、添加阅读量统计

Fluid 主题写好了统计阅读量的代码，但是缺少相应配置所以没有开启，需要借助三方服务来统计阅读量，这里是有 Leancloud 的免费服务来进行统计。

1. 申请LeanCloud账号并创建应用

进入 官网 注册账号
请添加图片描述
需实名认证，完成后才能使用各项服务
请添加图片描述
验证邮箱
请添加图片描述
创建应用，选择开发版即可，免费的
请添加图片描述
进入该应用的 设置->应用凭证，找到 AppID 和 AppKey，记录下来后面配置要用
请添加图片描述

2. 修改Fluid配置

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置

单篇文章阅读量计数

打开统计开关
请添加图片描述
配置 leancloud的 app_id 和 app_key
请添加图片描述
打开计数功能，统计来源改为 leancloud
请添加图片描述
页面效果
请添加图片描述

页面底部展示网站的 PV、UV 统计数

请添加图片描述
页面效果
请添加图片描述

八、添加评论功能

评论功能的代码已经写好了，只不过没有开启，需要修改一些配置

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置

启用评论插件
请添加图片描述
配置 LeanCloud 的 appId 和 appkey
请添加图片描述
重新部署后，查看页面效果，评论功能已开启
请添加图片描述
部署在本地时评论无法提交，会报跨域问题，发布到 GitHub Pages 上之后课正常提交评论

九、发布到GitHub Pages

方式一

安装hexo-deployer-git

npm install hexo-deployer-git --save

修改根目录下的 _config.yml，配置 GitHub 相关信息

deploy:
  type: git
  repo: https://github.com/yaorongke/yaorongke.github.io.git
  branch: main
  token: ghp_3KakcaPHerunNRyMerofcFd9pblU282FSbsY

其中 token 为 GitHub 的 Personal access tokens，获取方式如下图
请添加图片描述
部署到GitHub

hexo g -d

浏览器访问 https://yaorongke.github.io/，部署成功
请添加图片描述

方式二

直接将 public 目录中的文件和目录推送至 GitHub 仓库和分支中。
请添加图片描述

十、发布到自己服务器，Nginx代理

如果自己有服务器的话，也可以不使用 GitHub Pages，直接部署的自己的服务器上，通过 Nginx 进行代理，我这里有一个阿里云上的 CentOS 7 版的 Linux 服务器，演示下如何部署，步骤如下。

打开 hexo-blog 根目录下的 _config.yml，增加如下配置，这是因为把网站存放在了子目录中，要和 Nginx 配置中的 location /blog 路径一致。

root: /blog

hexo-blog 根目录下执行打包命令，打包好的文件在 public 目录下

hexo g

将public 目录下的文件复制到 Linux 服务器上的某个目录下，我的存放目录为

/opt/rkyao/fronted/hexo-blog

修改 Nginx 配置文件，我的 Nginx 安装路径为 /usr/local，大家根据自己实际情况调整

cd /usr/local/nginx/conf
vim nginx.conf
# server节点下添加如下配置
location /blog {
    alias  /opt/rkyao/fronted/hexo-blog;
    index  index.html index.htm;
}

重启 Nginx

cd /usr/local/nginx/sbin
./nginx -s reload

访问博客

http://47.96.106.173/blog/

十一、最终效果展示

可访问如下地址查看
https://yaorongke.github.io/

淡淡的说非
关注
专栏目录
手把手教你使用Hexo+GitHub搭建个人博客并发布文章（附常见问题解决方法）
qq_59016701的博客
08-30 4704
本教程使用GitHub自带的GitHub pages来生成静态个人博客，而Hexo可以更换各种好看的主题，而且都是免费的，花一点时间就可以打造出自己独有的个人博客。Hexo这个有力的工具可以让我们专注于写出一篇博客而不需要关心如何编写html和CSS，再如何形成一个网站，它可以根据markdown文档和指定的主题直接生成一个静态网站，对于新手朋友或者不是专门搞前端开发的人们非常友好。
使用Github Pages搭建个人博客
帅气陈吃苹果
04-23 1290
一、环境准备 使用Github Pages搭建个人博客，一劳永逸，可以让我们更加专注于博客的撰写。博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的，所以我们本地需要有Git环境，如果还没有安装Git，可以看下面的文章： 安装Git [Git关联远程GitHub仓库](https://www.cnblogs.com/jiechn/p/4615520.html) ...
利用github搭建个人博客（超级简单，一看包会）
最新发布
前端大波的博客
09-29 1378
利用github Pages搭建个人博客
Hexo-快速搭建个人博客
Hager930的博客
01-07 174
通过修改官方提供的hexo模板，搭建自己的个人博客。 文章目录Windows安装Node.js检验设置淘宝源Windows安装GitHexo安装博客初始化注册Github账号修改模板参考 Windows安装Node.js 参考：Windows 安装 Node.js 检验 Node.js安装完成后，cmd窗口输入： node -v npm -v 出现版本标识，说明安装成功 设置淘宝源 永久设置淘宝...
基于Hexo搭建博客并部署到Github Pages
weixin_30765475的博客
06-16 365
基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西，觉得自己还是太浮躁。本来打算用Flask自己写一个，以为是微框架就比较简单，naive。HTML、CSS、JS等都要学啊，我几乎没有这方面的基础，写到Web表单那儿果断弃了，转向简单的Hexo + Github Pages。不过要想搭建博客的同时巩固Python，Flask确实是一个不错的选择。 获取Github Pag...
Github Pages + Hexo 搭建自己的个人博客
Copcin的小站
03-27 953
​ 1. 准备工作 本文示例环境：Windows 8.1 准备1：有一个 GitHub 账号，网址，点击右上方 Sign Up 然后跟着提示一步一步走~ 准备2：Git on Windows 要安排上，网址，点击下面 Assets 适合你电脑版本的安装包，记住一定要是 Git 开头的 .exe 结尾的文件！）然后安装，过程一路 Next~ 准备3：有一个 Node.js 环境，网址，进去会比较慢，点击红箭头标出来的地址，也就是Windows Installer (.msi) 右边的64-bit
Github+Hexo搭建个人博客(图文详解)
不要用过去的错误约束现在的自己。
03-31 1万+
使用Github+hexo搭建个人博客(Windows10) 1. 准备工作：安装两个我们本次所需要使用的软件： node.js下载地址-http://nodejs.cn Git下载地址-https://git-scm.com/(官网下载非常慢，可百度找资源哈) 安装过程一直Next就可以了(安装路径可以改) 两者安装完成之后，右击此电脑》属性》高级系统设置》环境变量》系统变量下的P...
Github Pages 搭建个人博客
08-02
Github Pages 搭建个人博客,折腾好多天整理出的文档
Github Pages搭建个人博客（2018年10月版）
唐传林的博客
11-01 2857
Github Pages搭建个人博客（2018年10月版） 前言 几年前看到网上大神自己搭建的个人博客网站，就想过搭建一个属于自己的个人博客网站，为此还专门去研究了建站所需技能，但是购买了域名和云虚拟主机后由于其它事情又一直放着不了了之了。前不久看到了可以利用Github Pages 搭建自己的博客网站，就更想把一直放着的这件事做了。 Github Pages 是面向用户、组织和项目开放的公共静态...
史上最新版GitHub+Hexo配置系列教程-Hexo配置(一)
SmallCheric
04-03 3037
为什么要写该系列教程因为最近在想搞一个自己的博客,发现GitHub+Hexo是最好的一个选择了,折腾了2天, 发现网上的教程虽然有很多,但是不全面,一步步操作下来并不能很好的完成博客的搭建, 写下这个教程,一是为了总结,二是为了让更多的人少走弯路,更快的搭建好自己的博客平台.
github.io+hexo+fluid搭建个人博客的统计不生效问题处理
quanquanxingxing的专栏
05-17 254
github.io+hexo+fluid搭建个人博客的统计不生效问题处理
史上最全的 Hexo 博客搭建配置完全指南
云玩家
03-09 2284
欢迎到我的博客查看最新文章: https://blog.cloudplayer.site 本篇博客基于 Centos 7.x root 用户. 　　最近利用 Hexo + Github Pages 搭建了一个博客, 总体来说比较满意, 中间也踩了不少坑. 于是将我的配置过程全部记录下来, 就有了这篇博文. 　　关于 Hexo 搭建配置的博文网上还是挺多的, 但是零零散散, 这篇博文就当成是一个大合...
hexo搭建个人博客
ln152315的专栏
04-26 639
hexo搭建个人博客 微信公众号：IT程序猿进化史 https://darylliu.github.io/archives/64e2e0e2.html 前言 最近突然心血来潮想要搭建自己的博客，就去调研了几种方案： 租个服务器。在上面搭建网站，数据库，优点是可以自己随时备份修改，很方便；缺点是花销比较大，不适合学生党，同时需要自己维护，而自己主要目的是去写文章，而没有精力去维...
Windows下搭建GitHub个人博客
weixin_42710085的博客
07-16 238
Windows下搭建GitHub个人博客
使用hexo+github免费搭建个人博客网站超详细教程
热门推荐
wapchief的博客
11-16 3万+
很多人都想搭建自己的博客，但是奈何技术有限，服务器部署，HTML，域名解析，等等，这一大堆东西可真有的折腾。但是如果有这样一个机会，不需要太复杂的操作，不要服务器，不要域名，不用写html，你愿意去尝试吗？可以先看一下我自己的http://wapchief.com 背景图有点大，3M多，可能加载比较慢，但是一进去能看到默认的有个背景，然后是默认背景慢慢被覆盖的情况。 当时也是费了半天功夫才搭建好
如何使用Hexo搭建个人博客
ToFPGA的博客
03-09 1276
如何使用Hexo搭建个人博客
搭建Hexo个人博客详细教程
前端视听
05-30 3739
写在前面的话 很早以前就想要搭建一个个人的博客，奈何只是一个前端切图仔，对于后端和数据库接口上手存在一定的难度，于是一拖拖了很久，今天无意中发现了使用Hexo搭建个人博客很快就能用了，而且托管在github平台也不需要自己去买服务器域名和维护，一举数得，非常nice，记录了一下搭建Hexo个人博客的步骤，尽可能的写的详细一点~ 准备工作步骤 1：GitHub上面新建一个仓库，用来放自己的博客 2：安装git工具，生成SSH添加到GitHub 3：本地环境搭建，安装node 和npm 4：本地初始化Hexo项
数据结构单链表c++
08-24
单链表是一种常见的数据结构，用于存储一系列的节点连接起来的数据。 在C语言中，我们可以使用结构体来定义一个节点，包含一个数据域和一个指向下一个节点的指针域。代码如下： ```c struct Node { int data; struct Node* next; }; ``` 然后，我们可以定义一个指向链表头部的指针，表示整个链表的起始位置。初始化链表时，这个指针可以指向NULL。 ```c struct Node* head = NULL; ``` 接下来，我们可以实现一些基本的操作，例如插入节点、删除节点、遍历链表等。 插入节点的过程包括创建一个新节点，并将其插入到链表中适当的位置。 ```c void insertNode(int value) { struct Node* newNode = (struct Node*)malloc(sizeof(struct Node)); newNode->data = value; newNode->next = NULL; if (head == NULL) { head = newNode; } else { struct Node* curr = head; while (curr->next != NULL) { curr = curr->next; } curr->next = newNode; } } ``` 删除节点的过程需要找到目标节点，并调整前后节点的指针。 ```c void deleteNode(int value) { if (head == NULL) { return; } if (head->data == value) { struct Node* temp = head; head = head->next; free(temp); return; } struct Node* prev = head; struct Node* curr = head->next; while (curr != NULL && curr->data != value) { prev = curr; curr = curr->next; } if (curr != NULL) { prev->next = curr->next; free(curr); } } ``` 遍历链表的过程是从头节点开始，依次打印每个节点的数据。 ```c void printList() { struct Node* curr = head; while (curr != NULL) { printf("%d ", curr->data); curr = curr->next; } printf("\n"); } ``` 这是一个简单的单链表的实现示例，你可以根据需要进一步扩展和优化。
评论 61
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值