关于利用GitHub和Hexo免费搭建自己的博客
前言(图片加载不出来就刷新一下)
在自己搭建博客的过程中遇到了大大小小不少的问题,在这里我会将我自己搭建博客时遇到的问题以及思考分享出来。
博客的搭建
因为我也是第一次搭建博客,所以绝对是纯小白的从零开始,博客的搭建非难事也非易事,跟着这篇文章走我,我相信你会有所收获的,希望对你有所帮助。
第一步:下载加速器
众所周知,GitHub的服务器时不时的会抽风,所以为了不必要的麻烦我们还是下载一个加速器,这里我推荐微软商店里的watt tookit。
第二步:下载Git和NodeJs
- Git官网下载地址https://git-scm.com/downloads,
如果官网下载速度过慢也可以在百度网盘下载
链接:https://pan.baidu.com/s/1apJxtQDmBcmiYlVmfLGDcw
提取码:x71e
- Git安装时直接无脑下一步即可
如果想详细研究Git安装过程可以参考:Git 详细安装教程(详解 Git 安装过 程的每一个步骤)_git安装-CSDN博客
接下来我们需要进入git bash对Github账号进行绑定,不做这一步电脑应该也会自动配置账号,但是为了不报错,还是配置一下吧。
打开刚刚安装好的Git bash在里面输入
1
2
3git config --global user.name “把这里替换成你的Github账号”
git config --global user.email 把这里替换成你的GitHub邮箱
# 只用替换中文即可,不要把双引号去掉现在我们去安装node.js,然后我们的hexo才能正常运行。我们选择LTS版本(长期支持版本),然后选择for Windows进行下载安装。node官网Download | Node.js (nodejs.org)安装过程也是无脑下一步
最后我们在git bash依次执行以下三行命令进行检查
1
2
3git version
node -v
npm -v如果成功,你会看到命令行显示出对应的git,node和npm版本
像这样
$\textcolor{red}{注意:必须以管理员身份运行Git bash }$
安装Hexo并下载博客文件
我们之后将博客上传到GitHub用的就是Hexo,也就是说我们现在这一步才跟我们搭建博客直接相关。
我们执行下面的命令,利用npm下载工具下载Hexo
1
npm install -g hexo-cli
安装完成后我们退出Git bash,在桌面右键我们就会看见Open Git Bash here(如果是win11系统,则需要点击显示更多选项才能看到)点击它,在弹出的命令行输入以下指令。
1
hexo init myBlog
很神奇,这时我们会发现桌面上多了一个myBlog的文件夹,这个就是我们的博客文件。
在本地电脑上运行我们的博客
打开myBlog文件夹,我们在myBlog文件夹中的空白处右键,再次点击Open Git Bash here,输入以下指令
1
npm install
然后输入
1
hexo s
最后在浏览器输入http://localhost:4000,如果上面步骤都成功运行,那么恭喜你,你自己的博客已经在本地成功运行了。
不过可惜的是,只有有你自己的电脑可以进入。接下来我们需要将博客推送到GitHub上,这样我们就能让任何人在任何设备任何地点访问自己的博客,是不是很酷?
主题的配置
在我们将个人博客推送到GitHub之前我们可以将自己的博客做的好看一些,不过考虑到GitHub服务器的速度这里推荐较为简洁的Next主题
- 或者你感觉主题过于单一,没有炫酷到炸的动效?没问题你可以访问Themes | Hexo来下载自己喜欢的主题。(这里以Next主题进行示例)
- 我们依次点击code,Local,Download ZIP然后我们就得到了主题的压缩包。
- 然后我们打开myBlog文件夹,将下载好的压缩包内的文件直接解压到文件夹themes里
下载完主题后在myBlog文件夹之下找到_config.yml用记事本打开,将以下内容改为你主题的名字
如Next主题需要改为如下内容(其他主题同理)
- 我们再次运行hexo s指令,会发现我们的主题已经加载好了。$\textcolor{red}{注意:ctrl + c在Git bash中是终止程序运行的快捷键,如果想复制Gitbash里的内容只能老老实实右键复制 }$
将博客推送到GitHub
我看别人在前期会对ssh进行配置,但是配置ssh过程较为麻烦,所以前期不建议进行ssh的配置。
因此我们需要将ssh的检测关闭,如果你有兴趣想配置ssh可以参考个人博客系列【Hexo】——git 使用ssh协议免密登录 (taodudu.cc)从第四步开始看即可。
如果不想配置ssh,在git bash中运行下面的命令
1 | git config --global http.sslVerify false |
首先我们需要在GitHub创建一个仓库,然后我们会将自己的博客上传到这个仓库,最后我们就能在随时随地访问我们的博客。
我们在GitHub登陆自己的帐号,在主页依次点击
然后根据以下图片内容填写相关信息。
现在我们的GitHub仓库就创建好了,接下来我们需要将博客文件上传到这个仓库。
- 博客的上传
我们需要找到myBlog文件夹下_config.yml文件里的以下内容
将该内容改为以下图片示例。
最后保存退出即可。
- 我们在myBlog文件夹里面右键打开Git bash,依次运行以下三条命令。(运行最后一条命令时需要开启加速器,不行就多试几次)
1 | npm install hexo-deployer-git --save |
依次点击
最后我们大概率会看到一个浏览器的白板页面,不用管他,
回到我们的git bash如果看到这条提示,恭喜你,你的博客上传成功。
进入自己的博客
激动人心的时刻到了,在浏览器输入
1
你的用户名.github.io
就可以访问你的博客啦。第一次访问可能会访问失败,过一段时间在访问就可以了。