借助Github搭建个人博客

借助Github搭建个人博客

环境安装

github账号与仓库

首先要有一个 Github 账号，并创建一个博客仓库。

登录Github后点击个人头像，点击Your repositories，进入仓库页面。

点击new，创建一个新的仓库。Repository name=<用户名>.github.io。

点击create a new file创建一个新的文件，文件名为index.html

文件内容如下

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站主页</title>
</head>
<body>
    <h1>我的个人主页</h1>
    <h1>Hello World~</h1>
</body>
</html>

接下来就可以在浏览器访问主页了，访问网址https://用户名.github.io/。

其他环境如下，尤其是nodejs的版本，我一开始用的是node v18 LTS，本地部署没问题，但是部署到Github后index.html就变成空白了，换到node v14后正常，node版本依赖大坑。

环境 版本
笔记本电脑 联想LegionY9000P（2022）
操作系统 deepin 20.9 LTS
git 2.20.1
nodejs 14.21.3
hexo-cli 4.3.1

git安装

1
sudo apt install git # git版本无关紧要

nodejs安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 有些Linux系统通过包管理工具安装nodejs比较麻烦，因为通过命令安装的版本可能是很老的版本
# 但是没关系，可以先随便安装一个版本，然后通过安装n工具来安装想要的nodejs版本
# 以deepin为例，先安装nodejs
sudo apt install nodejs
# 更改源
sudo npm config set registry https://registry.npm.taobao.org
# 安装 n
sudo npm install n -g
# 安装 nodejs 以下列出了几种n的常见用法，选择需要的即可
sudo n stable # 安装稳定版
sudo n latest # 安装最新版
sudo n 版本号  # 安装指定版本
# 查看已安装的node版本
n
# 切换版本
n 版本号
# 删除版本
sudo n rm 版本号

最后可以通过node -v查看当前激活的node版本

hexo安装

1
2
3
4
5
6
7
8
9
10
11
# 安装hexo
sudo npm install hexo-cli -g
# 查看版本
hexo -v
# 创建项目
hexo init test-blog
cd test-blog
npm install
# 本地启动
hexo g
hexo s

在浏览器访问 http://localhost:4000 即可看到本界面

关于页

1
hexo new page about # 首次使用，创建关于页

创建成功后，修改文件test-blog/source/about/index.md，在date行下面添加一行layout: about。

本地启动

1
2
hexo g -d
hexo s

hexo配置

Fluid主题

下载最新release版本到test-blog/themes/下，解压并重命名为fluid。注意不要出现解压错误，主要是通过鼠标解压可能会出现目录嵌套的问题，解压完检查一下没问题即可。

1
2
3
4
5
6
7
8
9
10
11
# 修改test-blog/_config.yml 特别注意:后面还有一个空格

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改
post_asset_folder: true # 打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件
# 图片的引入方式
{% asset_img test.png 图片引用方法一 %}

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

# 特别说明，将图片文件放在资源目录下，通过Markdown写法![]()引入的图片，本地Markdown无法显示，但是部署到github后可以正常显示。

leancloud账号注册

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

LeanCloud官网，注册并实名认证，验证邮箱。

创建应用，开发版（免费的）。

打开该应用的设置->应用凭证，有AppID，AppKey，REST API服务器地址。

文章阅读量统计

修改test-blog/themes/fluid/_config.yml文件

server_url填写leadcloud的REST API

计数功能

修改test-blog/themes/fluid/_config.yml文件

页面底部显示 PV UV计数

修改test-blog/themes/fluid/_config.yml文件

添加评论功能

修改test-blog/themes/fluid/_config.yml文件

部署到github

1
2
3
4
5
6
7
8
# 安装hexo-deployer-git
npm install hexo-deployer-git --save
# 修改/test-blog/_config.yml文件
deploy:
  type: git
  repo: https://github.com/用户名/用户名.github.io.git
  branch: main
  token: 创建一个github的token粘贴在这里 # 获取token的方式自行百度

部署到github

1
2
hexo g -d # 最好有稳定的网络，因此你最好会魔法
# 需要特别说明，这个时候需要你的github的username和password。username就是你github的用户名，password却不是你的密码，而是token。可以去_config.yml文件中复制token过来。

大功告成

至此就算是搭建好了个人博客，可以通过https://用户名.github.io/来访问。但是有一点，本地项目部署到github后有一定延迟，也就是说执行hexo g -d后，github仓库已经更新了，但是通过https://用户名.github.io/访问的时候网页内容还没有更新，需要等一段时间。

可以通过hexo s本地启动来查看最新的效果。

参考链接：

Github+Hexo搭建个人博客

Node版本切换

搭建个人博客
#Node #LeanCloud
借助Github搭建个人博客
http://kkwq.github.io/2023/09/01/借助Github搭建个人博客/
作者
zpk
发布于
2023年9月1日
许可协议