搭建个人博客

参考文章

准备工作

注册GitHub账号

没有的话到Github官网注册一个即可,不会可参考GitHub申请账号

安装Git

参考Git安装(Windows)

安装NodeJS

参考NodeJS安装及配置(Windows)

创建仓库

登录GitHub点击右上角头像->Your repositories

左上角红框部分为你的用户名,记住它,。然后点击New进入仓库创建页面

填写Repository name仓库名，格式必须为<用户名>.github.io，例如我要填写的是ssssshone.github.io。然后点击Create repository
注意:

是<用户名>不是昵称
此处不区分大小写

因为我已经创建过此仓库所以我使用test.github.io来演示

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

按照如下顺序进行操作,文件名为index.html,文件内容为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ssssshone</title>
</head>
<body>
    <h1>ssssshone的个人主页</h1>
    <h1>Hello ~</h1>
</body>
</html>

点击访问我们的网站,例如: 我的为https://ssssshone.github.io/

访问到如下界面即创建成功

安装Hexo

安装Hexo,Win+R输入cmd打开命令行输入如下

1	`npm install -g hexo-cli`

我这里是报错了,修改node_global和node_cache两个文件夹的权限后成功安装

右键文件夹->属性,按照下图顺序把四个用户的权限全部允许

查看版本

hexo -v

出现如下则安装成功

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

1
2
3

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

1 2	`hexo g hexo server`

浏览器访问，页面默认主图风格如下

更换主题

本教程使用Fluid主题
安装主题
下载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

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

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

创建「关于页」

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

1	`hexo new page about`

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

修改后的文件示例如下：

---
title: 关于我
layout: about
date: 2024-11-05 13:36:46
---

本地启动

1 2	`hexo g -d hexo s`

浏览器访问，Fluid主题风格页面如下

添加阅读量统计和评论功能

去LeanCloud官网申请账号并实名认证,本教程使用LeanCloud国内版
注册完成后按如下顺序创建应用

进入该应用的设置->应用凭证,找到AppID、AppKey和REST API 服务器地址，记录下来后面配置要用

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

配置 leancloud：

AppID填入app_id
AppKey填入app_key
REST API 服务器地址填入server_url

打开计数功能，统计来源改为leancloud

页面底部显示访问量和访客数

添加评论功能

发布到GitHub Pages

安装hexo-deployer-git

1	`npm install hexo-deployer-git --save`

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

获取repo:

获取token:
点击头像->Settings

点击最下方Developer settings

按如下设置，我设置的是令牌不过期，但只能访问博客的库

点击Generate token
部署到GitHub

1	`hexo g -d`

写文章

创建文件

创建文件有两种方法

使用命令
1
hexo new "我的第一篇文章"
此命令会在\hexo-blog\source\_posts目录下创建一个名为我的第一篇文章的md文件和文件夹，在我的第一篇文章.md里撰写文章即可
自己手动在\hexo-blog\source\_posts目录下创建md文件和同名文件夹

两种方法是等效的

头部信息Front Matte

文件的开头有头部信息Front Matte,格式如下

---
title: 搭建个人博客
date: 2024-11-04 20:03:06
excerpt: Windows下使用Hexo + GitHub Pages搭建个人博客网站
---

介绍一些常用的信息:

头	内容	默认值
`title`	文章标题	文章的文件名
`date`	文章发布日期	文件建立日期
`comments`	开启文章的评论功能	`true`
`excerpt`	文章摘要

文章中插入图片

有两种方法

本地图片
和md文档的格式相同,图片不写路径，只写文件名。即：不是~~![test](/搭建个人博客/test.jpg)~~而是![test](test.jpg),虽然在md文档里看着不对，但是插件转换后在网页里是正常的
图床
我使用的是Gitee搭建的图床,因为Gitee有防盗链，直接按照md格式引入图片无法显示，我们需要在文章Front Matte信息后空一行加上如下内容,再空一行进行文章写作，图片就能正常显示了
1
<meta name="referrer" content="no-referrer" />

原理: Gitee是通过查看请求的Referer头来判断请求来源,来自其他网页的请求会被忽略，添加如上内容后就隐藏了我们真实的请求来源，即可正常访问

文章在首页的封面图

对于单篇文章，在文章开头 front-matter (opens new window)中配置 index_img 属性。

---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

和 Banner 配置相同，/img/example.jpg 对应的是存放在 /source/img/example.jpg 目录下的图片（目录也可自定义，但必须在 source 目录下）。

也可以使用外链 Url 的绝对路径。

文章页顶部大图

默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 front-matter (opens new window)中指定 banner_img 属性。

本地图片存放位置同上。

---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
banner_img: /img/post_banner.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

上传文章

写完文章后

1
2
3

hexo clean
hexo g
hexo d

即可把文章上传到网站

命令解释

hexo s 是 hexo server 的缩写: 启动本地服务器，用于预览主题。默认地址：
1
hexo s
hexo d 是 hexo deploy 的缩写: 自动生成网站静态文件，并部署到设定的仓库
1
hexo d
清除缓存文件 db.json 和已生成的静态文件 public,网站显示异常时可以执行这条命令试试
1
hexo clean
hexo g 是 hexo generate 的缩写: 生成网站静态文件到默认设置的 public 文件夹
1
hexo g

个性化

参考Hexo Fluid 用户手册官方手册写的很详细

博客首页

在\hexo-blog\themes\fluid\_config.yml文件内修改

博客标题
首页副标题
导航菜单
我不想要分类和标签所以把这两行注释掉了

关于页

基本信息

头像avatar
昵称name
介绍intro

头像的路径在\hexo-blog\themes\fluid\source\img文件夹内

社交图标

主题内置了一些图标主题内置图标

格式为:  
{ class: "iconfont 主题内置图标标明的名字", link: "跳转链接", tip: "鼠标悬浮在图标上显示的提示文字" }
例如:  
{ class: "iconfont icon-github-fill", link: "https://github.com/SSSSShone", tip: "GitHub" }

使用时按如上格式即可，不需要可暂时注释掉
引入其他图标
我想加入CSDN的图标，但是官方内置的图标里没有怎么办?
注册iconfont平台,搜索想要的图标

选择一个想要的图标->加入购物车->下载代码

解压下载的文件到\hexo-blog\themes\fluid\source\css目录,并在\hexo-blog\themes\fluid\_config.yml文件内修改如下,改为自己的路径

打开下载的文件夹，打开demo_index.html文件

按如下步骤获取图标的class

把class替换为我们获取到的内容icon iconfont icon-CSDN，其他的同内置图标的设置

1 2	`例如: { class: "icon iconfont icon-CSDN", link: "https://blog.csdn.net/Geohot_S", tip: "CSDN" }`

友链

在C:\Users\31460\hexo-blog\themes\fluid\_config.yml文件内设置：

#---------------------------
# 友链页
# Links Page
#---------------------------
links:
  enable: true
  banner_img: /img/default.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  # 友链的成员项
  # Member item of page
  items:
    - {
      title: "Yogurt",
      intro: "Yogurts`s home",
      link: "https://www.yogurts.top/",
      avatar: "/img/Yogurt_favicon.png"
    }

avatar在目录\hexo-blog\themes\fluid\source\img下

绑定个人域名

我们已经完成了博客的搭建，也学会了使用Hexo来发布文章，我的博客是https://ssssshone.github.io,如果你拥有一个域名的话可以进一步缩减别人的记忆难度，我是在阿里云购买的域名，其他域名商同理
进入域名解析后台->添加记录:

记录类型选择CNCME
主机记录自己选择,可以使用blog，我用的是www
记录值填写我们的博客地址，我的是ssssshone.github.io

再按照如下分别指向4个地址
1
2
3
4
185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153
进入GitHub在根目录下创建CNAME文件,内容为你的域名，例如:www.shone.fun
以后我的的博客就可以通过https://www.shone.fun进行访问了

搭建个人博客

http://ssssshone.github.io/2024/11/04/搭建个人博客/

作者

YANG

发布于

2024年11月4日

许可协议

搭建个人博客

准备工作

注册GitHub账号

安装Git

安装NodeJS

创建仓库

安装Hexo

更换主题

添加阅读量统计 和 评论功能

发布到GitHub Pages

写文章

创建文件

头部信息Front Matte

文章中插入图片

文章在首页的封面图

文章页顶部大图

上传文章

命令解释

个性化

博客首页

关于页

基本信息

社交图标

友链

绑定个人域名

添加阅读量统计和评论功能