hexo+GitHub搭建个人博客页面

本文最后更新于:2022年4月18日 晚上

[TOC]

一、一堆乱七八糟的废话

关于选择个人博客页面是因为很久之前就在B站上看过好多up主的视频,大多数的标题都是10分钟,20分钟,小白搞定个人博客。反正就是很吸引人,然后19年过年的时候,看到了一名华侨大学学长的个人博客,他当时发表的文章是学爬虫的时候做的笔记。那个时候也尝试弄过一段时间,没搞对,有着这样那样的很多的问题然后就放弃了。今年1月3号回的家,想起来这茬事。

期间还重装了几次电脑,我的电脑什么时候可以起飞,配环境啥的简直太恐怖了。装的时候很费事,搞清楚顺序还有其中的关系就很快了。

关于为什么要选择hexo+GitHub进行搭建,也没什么原因,就是因为网上都是这么说的,都说这么搞十分钟就搞好了

二、安装环境配置等一系列准备

1.git bash

2.node.js

3.hexo

关于git bash

git bash其实就是相当于自带的cmd,可以直接在某个文件夹里Git Bash Here用了几次之后觉得非常方便。我是在这里下载的

https://git-scm.com/download/win

用的Google浏览器,自带的翻译,看不懂就翻译,看不懂就翻译,大部分是看不懂的。

关于Node.js

NodeJS是hexo的环境,后续了解到下载这个环境是为了使用npm工具,后续好多都需要npm,瑞斯拜

下载地址https://nodejs.org/en/

我下载的是LTS版本的

关于hexo

终于到hexo了

首先,安装npm,win+R打开cmd一下

1
npm install -g hexo-cli

然后,等安装完之后。检查一下node,npm是否安装成功。继续cmd一下

1
2
node -v
npm -v

接着,在要存博客的位置新建一个文件夹,我给自己的命名的是myblog,存在了D盘。打开D盘,右击myblog,选择Git Bash Here,会弹出一个类似cmd,但是是彩色的黑色框框。之后在里边输入

1
2
hexo init    #初始化
npm install

这样,就算全部安装完成了。

三、打开最开始的hexo

上述完成之后,相当于最初的安装已经全部完成。接下来,就是网站的编译发布。还是myblog右击点开Git Bash Here

1
2
hexo generate
hexo server

上述两步完成之后,在浏览器输入http://localhost:4000,便可以访问刚刚搞好的hexo首页,这个是原始的那种,不过还是很好看。

四、部署到GitHub上

第一步。GitHub注册且建仓库

需要一个GitHub账号,然后新建一个库,名字就是自己GitHub的名+github.io(我也不知道为什么要这么命名,但是大家都是这么教的,好像是因为后续好通过域名进入)。

这一步的话,最好看一看自己能不能使用GitHub Pages。(我的就是不能用,全都弄完才发现打不开还以为是电脑坏了,后来才发现是因为我家的路由器的问题。)我是根据CSDN上的文章,修改了DNS服务器的地址,改成了114 .114.114.114,后续就可使用了。可以参照https://blog.csdn.net/wuufeii/article/details/108151697

第二步。和GitHub账户相关联

之后,就是很重要的这个联网,我也不知道我为什么搞了很久。还是右击mylog,Git Bash Here。

1
2
git config --global user.name "你的GitHub用户名" 
git config --global user.email "你GitHub注册邮箱"

检验是否设置成功

1
git config --list

之后改变站点的配置信息,打开myblog文件夹,找到 _config.yml文件,使用笔记本或者vscode等各种编译器打开修改最后的几行,保存退出。

1
2
3
4
deploy:  
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git (这个网址是你GitHub仓库的地址,从GitHub中复制黏贴过去)
branch: master

第三步。创建ssh

创建ssh的目的应该是为了方便后续将文件部署至git,更加方便快捷。

右击myblog使用Bash,

1
2
git init
ssh-keygen -t rsa -C "你自己的邮箱"

我后续都是一直回车的,他有设置用户名密码啥的,我主要是怕密码忘记,就全按默认回车了。有一个方框框的那种图形的显示,就是创建成功了。之后

1
2
~/.ssh
ls

查看。如果显示is adirectory,就是说明文件存在了。根据文件路径找到.ssh,用记事本打开id_rsa.pub,将里边内容全部复制。

之后添加ssh key到GitHub,在git中打开个人用户那里的settings,里边有个SSH keys,点击new SSH keys。title随便写,key复制刚刚的内容。保存。

会有一段时间,隔一段时间再bash,

1
ssh -T git@github.com

出现问题的时候回复yes,之后有个hi,你自己的用户名,You’ve successfully authenticated, but GitHub does not provide shell access.就表示已经设置成功。

第四步。安装git的扩展包,就是将hexo部署到git上

继续Bash

1
npm install hexo-deployer-git --save

安装完成之后,继续bash

1
hexo d

如果显示info deploy done:git说明就是部署成功了。如果不成功的话,会给你发邮件页面打不开,很显然邮件内容是全英文的o(TヘTo)。主题是Page build warning。

成功的话使用用户名.github.io便可以打开,和刚刚本地浏览的一样。

五、更换域名

如果想要自己的域名,可以购买一个,之后进行备案就可以用,在git仓库里修改就可以使用了。(今天刚接到阿里小哥哥的电话,我可能快能用到自己掏钱买的域名辽。)

六、关于怎么用

更换主题

关于怎么用我也没有搞太对,还不了解,昨天更换了一个主题,在别人的git上down下来主题,之后修改一些图片之类的参数,改成自己更加喜欢的样式。我使用的是fluid。这个主题真的巨好用,里边很多样式我都巨喜欢。

改图片的话,我找了半天,是要在.deploy_git里边进行修改,如果直接改public里边的,一bash就没有了

写文章

写文章使用的是Markdown语言,也是一种标记语言,不挺简单的,我下载了一个typora,更方便,这篇文章是我的首次尝试

1
hexo new "文章名称"

更新

关于每次修改完的更新,一般使用如下三个命令

1
2
3
4
5
6
7
hexo clean#清除缓存

hexo g#编译

hexo d#部署到git

hexo s#在本地进行服务,可以使用http://localhost:4000/打开。

大概就是这样,然后就是看看我这篇文章能否顺利上传。