关于利用GitHub和Hexo免费搭建自己的博客

前言(图片加载不出来就刷新一下)

​ 在自己搭建博客的过程中遇到了大大小小不少的问题,在这里我会将我自己搭建博客时遇到的问题以及思考分享出来。

博客的搭建

​ 因为我也是第一次搭建博客,所以绝对是纯小白的从零开始,博客的搭建非难事也非易事,跟着这篇文章走我,我相信你会有所收获的,希望对你有所帮助。

第一步:下载加速器

​ 众所周知,GitHub的服务器时不时的会抽风,所以为了不必要的麻烦我们还是下载一个加速器,这里我推荐微软商店里的watt tookit。

第二步:下载Git和NodeJs

​ 如果官网下载速度过慢也可以在百度网盘下载

​ 链接:https://pan.baidu.com/s/1apJxtQDmBcmiYlVmfLGDcw
​ 提取码:x71e

  • Git安装时直接无脑下一步即可

​ 如果想详细研究Git安装过程可以参考:Git 详细安装教程(详解 Git 安装过 程的每一个步骤)_git安装-CSDN博客

  • 接下来我们需要进入git bash对Github账号进行绑定,不做这一步电脑应该也会自动配置账号,但是为了不报错,还是配置一下吧。

    打开刚刚安装好的Git bash在里面输入

    1
    2
    3
    git 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
    3
    git version
    node -v
    npm -v

    如果成功,你会看到命令行显示出对应的git,node和npm版本

    像这样

    image-20230916131644476

    $\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的文件夹,这个就是我们的博客文件。

在本地电脑上运行我们的博客

主题的配置

在我们将个人博客推送到GitHub之前我们可以将自己的博客做的好看一些,不过考虑到GitHub服务器的速度这里推荐较为简洁的Next主题

  • 或者你感觉主题过于单一,没有炫酷到炸的动效?没问题你可以访问Themes | Hexo来下载自己喜欢的主题。(这里以Next主题进行示例)
  • 我们依次点击code,Local,Download ZIP然后我们就得到了主题的压缩包。

image-20230916140220413

  • 然后我们打开myBlog文件夹,将下载好的压缩包内的文件直接解压到文件夹themes里

image-20230916140449699

  • 下载完主题后在myBlog文件夹之下找到_config.yml用记事本打开,将以下内容改为你主题的名字

    image-20230916141001732

  • 如Next主题需要改为如下内容(其他主题同理)

image-20230916141542845

  • 我们再次运行hexo s指令,会发现我们的主题已经加载好了。$\textcolor{red}{注意:ctrl + c在Git bash中是终止程序运行的快捷键,如果想复制Gitbash里的内容只能老老实实右键复制 }$image-20230916141842933

将博客推送到GitHub

我看别人在前期会对ssh进行配置,但是配置ssh过程较为麻烦,所以前期不建议进行ssh的配置。

因此我们需要将ssh的检测关闭,如果你有兴趣想配置ssh可以参考个人博客系列【Hexo】——git 使用ssh协议免密登录 (taodudu.cc)从第四步开始看即可。

如果不想配置ssh,在git bash中运行下面的命令

1
git config --global http.sslVerify false
  • 首先我们需要在GitHub创建一个仓库,然后我们会将自己的博客上传到这个仓库,最后我们就能在随时随地访问我们的博客。

    我们在GitHub登陆自己的帐号,在主页依次点击

    image-20230916144451492

​ 然后根据以下图片内容填写相关信息。

image-20230916145432286

现在我们的GitHub仓库就创建好了,接下来我们需要将博客文件上传到这个仓库。

  • 博客的上传

​ 我们需要找到myBlog文件夹下_config.yml文件里的以下内容

image-20230916151130117

​ 将该内容改为以下图片示例。

image-20230916151313088

​ 最后保存退出即可。

  • 我们在myBlog文件夹里面右键打开Git bash,依次运行以下三条命令。(运行最后一条命令时需要开启加速器,不行就多试几次)
1
2
3
4
npm install hexo-deployer-git --save
hexo clean
hexo g
hexo d

​ 依次点击

image-20231119120947389

image-20231119120922339

image-20231119121008546

最后我们大概率会看到一个浏览器的白板页面,不用管他,

image-20231119121054571

​ 回到我们的git bash如果看到这条提示,恭喜你,你的博客上传成功。

image-20230916151949448

进入自己的博客

  • 激动人心的时刻到了,在浏览器输入

    1
    你的用户名.github.io

    就可以访问你的博客啦。第一次访问可能会访问失败,过一段时间在访问就可以了。