引言

作为本站第一个正式博客技术分享,我觉得应该很多人会想了解像这样一个博客站是如何搭建的。
其实很简单,按接下来的步骤一步步来,你也能0成本搭建一个属于自己的博客站点。
接下来让我们进入正题。

正文

Hexo的搭建

首先,要能0成本搭建一个博客站点,那我们就只能通过静态博客来搭建。而Hexo便是这样一个很不错的静态博客框架,所以我们需要先在本地搭建一个Hexo。

如果你想要了解关于Hexo更详细的内容,可以看看它的文档来获得更全面的信息。

安装Watt Toolkit(Steam++)

为了能正常访问GitHub,你可以下载并安装Watt Toolkit,这是一款免费的加速器,可以对Steam、GitHub等进行加速。

安装Node.js和Git

为了能部署Hexo,我们需要首先安装Node.js(建议版本12.0及以上,推荐使用最新LTS版本)。
相关安装教程可以自行在Node.js或Hexo文档查看,这里就不多赘述了。

安装完成后可以运行以下命令来检测是否成功:

1
2
node -v
npm -v

为了让npm下载速度更快,我们也可以通过以下指令来换源:

1
2
npm config set registry https://registry.npmmirror.com
npm config get registry

如果返回 https://registry.npmmirror.com 代表成功更改镜像源。

接下来是Git的安装,安装Git是为了方便之后将静态博客推送到GitHub Pages(如果不理解没关系,照着步骤做就行)。

Windows系统需要下载并安装Git
Mac系统可以使用安装程序
Linux (Ubuntu, Debian)只需执行以下命令:

1
$ sudo apt-get install git-core

Linux (Fedora, Red Hat, CentOS)则需要执行如下命令:

1
$ sudo yum install git-core

把这两个安装完成后,我们便可以进行下一步了。

安装Hexo

安装Hexo相当简单,我们只需使用npm命令:

1
npm install -g hexo-cli

这样一来,我们便完成了所有需要的安装任务。

正式搭建

安装完Hexo后,我们便可以正式搭建静态博客了。
首先按顺序执行以下命令:

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

其中<folder>改为你所想要的文件名,比如my_blog(最好使用英文,且不要使用特殊字符)。

初始化完成后你应该能看到以下项目文件夹目录:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

那么恭喜你,你已经完成了最基础的博客站搭建(海豹拍肚皮声.wav)。

如果你已经迫不及待想看看搭建完成的网站,可以运行以下命令来看看效果如何:

1
hexo s

等终端输出完信息,把 http://localhost:4000/ 输入进网页便打开啦~

配置博客

基础博客配置

打开刚部署好的博客,你会发现,显示的东西相当简约,而且与自己一点关系没有,全是英文看得云里雾里。
这其实是因为我们还没配置好博客。
所以接下来你可以在相关文件夹根目录中寻找_config.yml这个文件,并在其中进行一些基础配置。
配置完后,你只需刷新一下网页,就会发现博客已经变成符合你信息的样子了。

切换主题

当然,你可能还是很不满意,觉得Hexo这个默认的主题很不好看。
那你就可以尝试一下换个主题。
首先,你可以在这个网站寻找自己喜欢的主题。
比如本站使用的是Solitude这个主题。

要下载主题,你可以使用这个指令(这里以Solitude为例):

1
npm install hexo-theme-solitude

但需要注意的是,这样安装的主题会安装在node_modules文件夹里面,在配置主题时可能会相当不方便。
你可以尝试把整个主题文件移动到themes文件夹中以方便配置。
当然,如果你就是想放在node_modules文件夹中,那在根目录的_config.yml文件的theme配置一定要填对应主题名字如solitude,而不是文件夹名字。

而在themes文件夹中的主题则需要在根目录的_config.yml文件的theme配置中填入对应文件夹名,如hexo-theme-solitude,这样才能正常使用。

主题配置

你可能发现了,即使切换了主题,整个页面依然是相当简约。
所以,接下来你需要配置主题。
首先,在对应主题文件夹中找到主题的_config.yml文件,一般你都可以在对应主题的官网寻找到主题的配置文档。
比如Solitude的配置文档

但有些不愿折腾的小白可能看完就想直接放弃。
所以一个小妙招就是你可以让AI帮你完成一些配置。
比如GitHub Copilot或Windsurf这类代码Agent软件,而你只需要在输入框让它先搜索对应主题文档再帮你完成配置就可以啦~
在完成这一切后,你就能拥有一个像本站这样美观的一个博客。

编写博客

在搭建完博客后,你便可以通过一些指令来实现最基础的编写。
比如通过以下指令创建一个新文章:

1
hexo new <title>

然后你就可以在根目录的source文件夹中的_posts文件夹找到对应的md文件,打开这个文件你便可以通过编写markdown文档来写博客啦~

当然,如果你需要的是生成一个新界面而不是文章,就可以使用以下命令(这里以about界面举例):

1
hexo new page about

更多的内容这里就不多赘述了,感兴趣可以看看Hexo写作文档教程。

在GitHub Pages搭建静态博客

之所以我们能0成本搭建一个博客,正是因为我们能通过GitHub Pages来蹭一个域名。
而在那之前,我们需要先对git进行配置。

Git的配置

首先你需要一个GitHub账号,然后你需要输入以下命令,分别是你的GitHub用户名和登录GitHub的邮箱:

1
2
git config --global user.name "<Your GitHub username here>"
git config --global user.email "<Your GitHub email here>"

接着创建SSH密钥,按如下命令:

1
ssh-keygen -t rsa -C "<Your GitHub email here>"

对应密钥存储目录会在终端显示,例如Windows系统为 C:\Users<Your user name>.ssh\id_rsa.pub
接下来你只需要用文本编辑器打开并完整复制里面的内容即可。

接着点击这个链接,并点击 New SSH key
把复制好的密钥填进去即可,Title可以随便写。
最后点击 Add SSH Key 即可完成。

为了验证是否配置成功,请输入以下指令。
注意:在进行这一步时请关闭Watt Toolkit加速器,否则会出现连接不上的错误。

1
ssh -T git@github.com

如果显示询问 Are you sure you want to continue connecting (yes/no/[fingerprint])?,这是正常现象,直接输入yes即可。
若出现以下内容即为配置成功:

1
2
Hi <username>! You've successfully authenticated, but GitHub does not provide shell access
Connection to github.com closed.

搭建GitHub Pages仓库

点击这个链接新建一个仓库。
仓库名字选择 <你的GitHub用户名>.github.io,然后直接Create即可。

创建完成后点击对应仓库的 Settings 选项。
接着点击下面的 Pages 选项。
你会在写着 Build and deployment 下方找到一个框,点击它并选择为 Deploy from a branch(更合适的做法是使用Github Actions,具体做法请自行查阅),然后选择分支为 main(如果没有则选 master,或后续推送后会出现 main)。
这样一来你便完成了GitHub Pages仓库的搭建并白嫖到了一个域名 https://<你的GitHub用户名>.github.io/

推送Hexo静态博客到GitHub仓库

首先我们在本地博客文件夹找到 _config.yml 文件。
打开后翻到最底下找到 deploy 部分,并将其中的内容改为:

1
2
3
4
deploy:
type: git
repo: <Your GitHub repo here>.git
branch: main

保存后我们还需安装一个小插件以通过Git来推送静态博客:

1
npm install hexo-deployer-git --save

接着依次输入:

1
2
3
hexo clean   # 清除已有的静态博客内容
hexo g # 生成静态博客内容
hexo d # 推送到对应的仓库

完成后,你便可以通过 https://<你的GitHub用户名>.github.io 来访问博客了。

使用Netlify进行加速

完成上述步骤后你会发现,自己这博客站慢成这样用鸡毛啊。
但是没关系,我们可以通过Netlify来进行加速,并且完全免费哦。

登录Netlify

首先需要先打开Netlify的官网进行登录。
登录完成后点击右上角的 Add new project
在下面的 Import a Git repository 中选择 GitHub
在允许Netlify访问仓库后就可以选择 <你的GitHub用户名>.github.io 这个仓库来搭建啦。
接着在 deploy project 界面中你需要设置 Project name,这边建议可以使用 <你的GitHub用户名>
接着滑到最底下并点击 Deploy xxx 就可以完成搭建啦。
搭建完成后,你便可以通过 https://<你的GitHub用户名>.netlify.app/ 来访问博客啦,而且速度快得多哦。

博客的更新

当你在本地更新了博客后,你只需运行以下指令:

1
2
3
hexo clean   # 清除已有的静态博客内容
hexo g # 生成静态博客内容
hexo d # 推送到对应的仓库

然后再打开自己的博客网站,你就会发现博客界面已经成功更新,相当的简单。

结语

在经过这些操作以后,你就成功搭建了一个属于自己的博客了。
如果你最终成功了,那么就让我给你鼓个掌(海豹拍肚皮声.wav)。
而之后,你就可以尽情的进行博客的创作啦~

最后,如果你发现了这篇文章有任何纰漏,可以在评论中告知我,我会相当感谢并及时更改。
因为这是我的首篇正式博客,所以有所缺陷也请见谅。
希望大家看完后能有所收获并成功搭建一个属于自己的博客,感谢阅读~

参考文献与致谢

本篇博客参考了Hexo 静态博客搭建教程的部分内容。
最后感谢XXY提供的一些技术支持。