GitHub Pages+Hexo+Git快速搭建个人博客

环境介绍

Node.js

简介

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

简单理解

脚本语言需要一个解析器才能运行，JavaScript是脚本语言，在不同的位置有不一样的解析器，如写入html的js语言，浏览器是它的解析器角色。而对于需要独立运行的JS，nodejs就是一个解析器。

官网

Node.js (nodejs.org)

安装教程

NodeJS入门（一）—nodejs详细安装步骤_nodejs安装及环境配置-CSDN博客

其他

并且Node.js为大多数平台提供了官方的安装程序，可以通过Node.js的相关命令在命令行安装官方安装程序。

安装完成后可以通过node -v查看node.js的版本，安装Node.js后npm（Node Package Manager）会随之安装，这是因为 npm 在 Node.js 生态系统中被广泛使用，几乎所有的 Node.js 项目都依赖于 npm 来管理项目的依赖关系和构建任务，可以通过npm -v命令查看npm的版本。

Git

简介

Git 是一个免费且开源的分布式版本控制系统，旨在处理从小型到 具有速度和效率的超大型项目。

Git 易于学习，占用空间小，性能快如闪电。 它优于 Subversion、CVS、Perforce 和 ClearCase 等 SCM 工具 具有廉价本地分支等功能， 方便的暂存区域和多个工作流程。

官网

Git (git-scm.com)

安装教程

【精选】Git 详细安装教程（详解 Git 安装过程的每一个步骤）_git安装_mukes的博客-CSDN博客

其他

下面是Git和GitHub的一些介绍，Hexo初始化项目需要通过Git去拉取

Git和Github详细入门教程（别再跟我说你不会Git和Github)_git github-CSDN博客

一篇文章搞懂Git与Github_git github_一名机电研究生的博客-CSDN博客

Hexo

简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

官网

Hexo官网

安装教程

文档 | Hexo

其他

可以直接从官网的文档中了解Hexo的具体使用

Hexo的在GitHub的项目地址

hexojs/hexo：一个快速、简单和强大的博客框架，由 Node.js 提供支持。 (githubfast.com)

常用命令

hexo clean 清除已生成文件及缓存

hexo generate 生成静态页面，简写做 hexo g

hexo deploy推送到 github 库，简写做 hexo d

hexo server 启动本地 WEB 服务器，简写做 hexo s

环境搭建

  1. 安装Node.js

  2. 安装Git

  3. 安装Hexo

  4. 安装部署插件

    在Hexo目录下通过Git Bash

    npm install hexo-deployer-git --save

  5. Hexo初始化项目

    在你需要存放项目的路径下打开Git Bash输入hexo init <folder>，这里我输入hexo init myBlog就会在路径下生成myBlog文件夹，之后输入cd <folder>就进入生成的文件夹，这里输入cd myBlog，最后输入npm install即可

  6. 简单运行

    在初始化项目路径下（如使用上面命令那么初始化项目路径就是myBlog）通过Git Bash（在文件夹下右击选择Open Git Bash here打开命令行窗口）使用Hexo s后就开启服务，可以在本地浏览器访问localhost:4000访问到Hexo初始化的项目构建的网站了，Hexo服务的默认端口是4000，如果端口出现了冲突可以使用Hexo s -p 2000命令指定端口号（这里指定端口号为2000）

image-20231117110109912

简单使用

加载主题

可以通过官网从已有的主题中选择自己喜欢的主题以应用到网站主页，我选择的主题是Butterfly

Themes | Hexo|主题官网

Hexo-Butterfly主题 | 主题文档(🦋Hexo butterfly theme document) (butterfly1.cn)

  • 首先需要先下载主题，可以直接下载，如果作者有在其他地方（如GitHub）进行介绍使用Git的下载方式也可以使用，下载主题后放置到项目的themes目录下（自行从Hexo官网查阅项目初始化不同文件夹的作用）

  • 修改Hexo初始项目下的_config.yml文件（不是下载的主题目录下的）中的theme属性指定主题，注意theme:后面加空格再接值

image-20231117113139545

image-20231119111518672

  • 之后执行hexo g（清除缓存，生成新的静态文件)然后再hexo s运行，刷新界面即可看到变化

修改主题配置

可以继续在项目的_config.yml文件下配置一下基本信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Site
#标题
title: myBlog
#副标题
subtitle: 记录学习
#个性签名
description: 加油！
keywords:
#作者
author: 无泪真伤
#语言
language: zh-CN
#中国的时区
timezone: Asia/Shanghai

之后可以配置主题相关的了，更加详细的配置可以查阅相关主题的文档介绍，这里只进行简单介绍，修改主题可以按照官网的建议来（非常详细了），也可以直接在下载的主题目录下的_config.yml文件中直接修改，可以直接使用记事本打开搜索关键词快速定位到相应配置的地方

非官网介绍主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
# Menu 目录，显示在顶部
# 这里只演示了简单写法，具体参考官方文档，按需求使用
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  分类: /categories/ || fas fa-folder-open
  

# Code Blocks (代码相关)
# --------------------------------------
# 代码主题
highlight_theme: pale night #  darker / pale night / light / ocean / mac / mac light / false
# 代码是否显示复制按钮
highlight_copy: true # copy button
# 显示代码使用的语言，这个是自己在markdown中标注的语言
highlight_lang: true # show the code language
# 是否自动展开
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
# 代码高度限制，可展开，要限制把false替换成具体数字，单位为px
highlight_height_limit: false # unit: px
# 代码过长自动换行
code_word_wrap: true  


# Favicon（网站图标）
favicon: /img/86634.jpg


# 边栏
# Avatar (头像)
avatar:
  img: # http可以直接输入图床图像进行加载，也可以使用本地img下的图像
  # 头像是否一直旋转
  effect: false


# 不展示顶部图像
disable_top_img: false

# 设置顶部图片
index_img: https://pic.imgdb.cn/item/655825b2c458853aef027a19.jpg

# 文章详情页顶部图片，没有在front-matter设置top_img和cover下使用该图
default_top_img: 

# 归档顶部图像
archive_img: https://pic.imgdb.cn/item/65582792c458853aef088495.jpg

# tag界面顶部图像
tag_img: https://pic.imgdb.cn/item/65582792c458853aef088495.jpg

# 单独设置
# format:
#  - tag name: xxxxx
tag_per_img:

# 分类界面顶部图像
category_img: https://pic.imgdb.cn/item/65582792c458853aef088495.jpg

# 单独设置
# format:
#  - category name: xxxxx
category_per_img:

cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面位置)
  # left/right/both
  position: both
  # When cover is not set, the default cover is displayed (没有设置cover时，默认显示)
  # 随机选择，前面加上-
  default_cover:
      # - https://pic.imgdb.cn/item/65586ff1c458853aef149c7e.jpg
      # - https://pic.imgdb.cn/item/65587027c458853aef156fb1.jpg
      # - https://pic.imgdb.cn/item/6558704bc458853aef160963.jpg
      # - https://pic.imgdb.cn/item/6558706bc458853aef16912a.jpg
      # - https://pic.imgdb.cn/item/65587081c458853aef16f416.jpg
    # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# Replace Broken Images (替换无法显示的图片)
error_img:
  flink: /img/friend_404.gif
  post_page: /img/404.jpg

# A simple 404 page（404图片）
error_404:
  enable: false
  subtitle: 'Page Not Found'
  background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png  
  
  
# the subtitle on homepage (主页subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source 调用第三方服务
  # source: false 开关
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果打开打字效果，subtitle 只会显示 sub 的第一行文字
  sub:
    - 如果你很迷茫的话就去读书，健身，这是唯一你付出就会有回报的东西  
 
 
 
 theme_color:
  enable: true
  # main: "#2D4554" # 主要的颜色，底部，选中，按钮等
  main: "#15405D"
  # paginator: "#00c4b6"  # 页码选中颜色
  paginator: "#30867F"
  # button_hover: "#FF7242" # 按钮选中按钮
  button_hover: "#00c4b6"
  # text_selection: "#00c4b6" # 复制等鼠标滑动选择一段字时的颜色
  text_selection: "#509892"
  # meta_color: "#858585" # 显示发布时间等的字体颜色
  meta_color: "#858585"
  # hr_color: "#A4D8FA" #暂时不知道
  # hr_color: "#F70456"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  # toc_color: "#00c4b6" # 目录显示toc，就是阅读界面选中颜色
  toc_color: "#30867F"
  # blockquote_padding_color: "#49b1f5"
  # blockquote_background_color: "#49b1f5" # 暂时这个和上面的不知道
  # blockquote_background_color: "#01101B"
  # scrollbar_color: "#49b1f5" # 滑动条颜色
  scrollbar_color: "#2A536D"
  # meta_theme_color_light: "ffffff"
  # meta页面是显示文章相关信息的
  # meta_theme_color_light: "#BDBBBB"
  # meta_theme_color_light: "#0d0d0d"
  # meta_theme_color_dark: "#0d0d0d"
  
  
  
# Website Background (设置网站背景)
# can set it to color or image (可设置图片或者颜色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: url(https://pic.imgdb.cn/item/6558cafec458853aef90363f.jpg)

博客书写规则

这里直接看网站文档介绍，讲的很清楚了

Butterfly 安裝文檔(二) 主題頁面 | Butterfly

发布博客

  • 这里需要先在Git中配置SSH，（GitHub推荐使用方式）可以在博客发布的Git相关文章中查阅到，不懂的可以先看Git的文章

  • 新建GitHub仓库，我的仓库名为wuleizhenshang.github.io用来存放博客，并在_config.yml中进行配置

    image-20231117222658079

  • 之后在Git Bash中输入hexo g等待生成完成后输入hexo d上传到配置文件设置的GitHub的仓库上，可以手动把md文件放到source/_posts下

  • 之后就可以通过指定的网址进行访问，这里我的仓库名为wuleizhenshang.github.io，之后在浏览器输入仓库名作为网址就可以访问

特别说明

如果使用图床写博客的话需要在Hexo中做一些更改

http请求体的header中有一个referrer字段，用来表示发起http请求的源地址信息，这个referrer信息是可以省略但是不可修改的，就是说你只能设置是否带上这个referrer信息，不能定制referrer里面的值。服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。这样加载不到图床的图像。

解决

在下载的主题目录下的layout/includes目录下有一个head.pug文件，修改该文件的meta信息，会使生成的所有页面都带有该head。在head.pug文件中添加如下内容，结果参见图片。

1
meta(name="referrer" content="no-referrer")

image-20231119120805384

可能遇到问题

仓库公开才允许访问

GitHub官网有说明，公开的仓库或者升级仓库才能使用GitHub Pages功能，升级需要付费，这里把仓库设置为公开仓库就好

image-20231117212215793

​ 修改仓库是否为公开在仓库的设置的基础设置的最下面可以进行修改

image-20231117212448073

仓库为公开但输入网址为404

可能访问网址发现打不开可能需要等待一下，过段时间才能部署好，还有就是可能需要在GitHub Pages中设置一下解析的分支

image-20231117212606182

原理说明

首先需要了解GitHub Pages是什么，可以通过下面的链接查看具体的介绍

GitHub Pages 是什么？ - 知乎 (zhihu.com)

通过Hexo快速生成静态网页后通过Git上传到GitHub的仓库上，在仓库设置中设置GitHub Pages访问的网页为生成的静态网页就实现了具体的功能，而Node.js就是运行Hexo的必要环境。

绑定个人域名

绑定个人域名后可以输入个人域名跳转到GitHub Pages页面

  1. 首先需要拥有一个个人域名，自行购买

  2. 添加CNAME文件，共有三种方式进行创建

    • 直接在Hexo初始化的项目下的source文件夹在新建CNAME文件（这个文件没有后缀名，可以先创建为txt文件，修改完后删除后缀），里面输入自己的域名即可

      image-20231117215745546

    image-20231117215818235

    • 直接在GitHub项目主页里面的Create new file按钮进行创建，因为在本地创建完上传项目到GitHub也会一起上传这个文件

    • 在GitHub项目中的Setting标签下的Custom domain中直接填入域名，然后点击Save保存即可

      image-20231117215351427

  3. 配置域名解析，我这里是腾讯云购买的域名

    配置CNAME记录类型，主机记录可以写为www，记录值可以写为你的域名，这样可以通过www+你的域名访问到GitHub Pages，路线类型选默认类型就行

image-20231117232828687

  1. 设置为Https安全访问

    在域名解析完成后可Enforce HTTPS就可以勾选了，勾选后就可以进行Https安全访问

    image-20231117231934712