0%

建站记录

个人博客搭建记录

从第一次遇到bug在前人那里寻找到解决方案时就有了记录自己的解决历程的想法,但是一直都没有真正去做,因为在解决bug的时候通常都很急切,而当bug被解决之后又常常难以复现。过去也动过做一个本地博客的想法,也因为种种原因而未曾真正尝试,直至今日——种一棵树最好的时间是十年前,其次是现在——我决定将自己搭建个人博客的历程记录下来。

一、前言

根据查阅的资料我们需要准备Git程序以及Github账号,但是这两步我都已经在过去的几年中陆陆续续完成,如何去下载安装以及申请账号网上应该也有很多教程,故本文不再从零开始。

忽然明白为什么很多博客总是没有真正从零开始,大家应该有一些耐心去找寻资料,而不应该寄希望于某一篇博客能够解决所有问题。这里忽然想到前几天看过的一篇推文:现在的年轻人已经不再尊重电脑了。

很遗憾,虽然我的专业是计算机,但是我同样属于那一类不会使用电脑的人群,并且拥有一个急功近利的心,导致我从来没有想要真正深入去学习。

关于Git的相关经验我在这里给出两个链接:

  1. Git教程 - 廖雪峰的官方网站 (liaoxuefeng.com)
  2. Learn Git Branching

第一个链接时廖雪峰的一个Git教程,这是当初我大一的时候老师/助教给我们发的一个参考资料,里面给出了一些Git从零开始的下载安装以及使用的教程(说来惭愧,我只用到了一点点东西,并没有深究,很多技术都是在真正需要的时候才会去搜寻);第二个链接是一个以可视化的方式让你熟悉Git命令的网站,值得一看。

好了,闲话说了不少,接下来就是正式的搭建记录。另外,预告一下,或许我的博客未来也是这样的风格,有闲话,也有真实的经历。我会尽力提取最重要的东西记录,但是请允许我偶尔感慨一两句,或许以后我会将干货放在前面,把碎碎念留在最后也说不定;未来的风格或许会取决于我写那一篇博客的目的。

二、Hexo搭建

资料最多

官方文档:文档 | Hexo

Node.js配置

官方网站:Node.js — Download Node.js® (nodejs.org)

Hexo官网建议:Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本

出于简单考虑,我选择通过安装程序(注意选择正确的版本)来进行安装,除了安装路径有所修改外,剩余配置均为默认选项。接下来打开命令行(win+R,输入cmd):

检查Nodejs是否安装成功

如果看见与上图相似的结果则说明安装成功!Congratulations~

安装Hexo

1
npm install -g hexo-cli

result

然后我们检查是否安装成功:

检查Hexo是否安装成功

【注意!!!这一步有问题!不要尝试,后面有说明!!!】根据多位博主的提示我们还需要安装Hexo的扩展依赖:

1
npm install hexo-deployer-git --save

result2

创建一个hexo项目:hexo-blog,这里的hexo-blog就是我们的文件夹folder,创建完成后的文件目录如下图所示:

1
2
3
hexo init <folder>
cd <folder>
npm install

init_res

尝试本地启动Hexo:

1
2
hexo g
hexo server # hexo s也可以

命令行窗口

根据命令行窗口的提示我们可以在浏览器地址栏中输入http://localhost:4000/,然后可以看见默认模板:

本地启动

安装主题——NexT:theme-next/hexo-theme-next: Elegant and powerful theme for Hexo. (github.com)

1
2
cd hexo-blog
git clone https://github.com/theme-next/hexo-theme-next themes/next

打开 _config.yml 文件,该文件为站点配置文件

1
theme: next

image-20240617141215055

尝试本地启动Hexo:

1
2
hexo g -d # -d 表示发布
hexo server # hexo s也可以

命令行提示

网页结果

配置Github

首先需要在Github上建立博客的仓库,这里几位博主都强调了仓库名称:[username].github.io,创建过程没有截图,相信聪明的你会进行操作的。

但是我发现了一篇不是的,不过暂时先不尝试那一种。大概是因为用用户名的话自动会按照GitHub pages处理。

image-20240617140108128

配置Deployment,打开 _config.yml 文件,该文件为站点配置文件

config

这个时候发现,前面有一步错了!!!我们需要在项目对应的文件夹里进行下面的操作!!!

尝试启动Hexo:

1
2
hexo g -d # -d 表示发布
hexo server # hexo s也可以

bug1

需要安装Hexo的扩展依赖:

1
npm install hexo-deployer-git --save

image-20240617143432671

解决了第一个bug之后,新的bug出现了:

bug2

三、解决无法正常显示图片

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

打开 _config.yml 文件,修改

1
post_asset_folder: true
本文到此结束,欢迎邮件交流:3143935826@qq.com ฅ>ω<*ฅ