我终于拥有自己的独立博客了。

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
.cn 域名,1个 12个月
简介: 我终于拥有自己的独立博客了。

这是我使用 Hexo 发布的第一篇博客。

对于不懂技术的我来说,搭建这个博客一波三折,幸好中间有一位热心网友 @无声 的相助,这个博客才得以搭建起来。 看着一个博客从 0 到顺利诞生,那种感觉可能就像是

  • 产品经理看着自己做的第一个产品顺利上线
  • 准备要当妈妈的女人听到孩子第一声啼哭的那个瞬间

那种感觉不言而喻,虽累但成就感满满,一切值得。 我之前曾写过两篇技术小白搭建博客的文章: 可能是最最最最简单的搭建博客方法

不会代码,如何零成本搭建个人博客?这两篇文章都用到了同一个网站 GitHub,这个网站是世界上最大的代码托管平台,可用来托管代码,也可以用来存放文章数据,作为托管博客的站点,省去购买域名和租用服务器的钱。 但使用这个方法存在一个弊端:访问时打开的速度很慢,需要使用网络代理,才能以正常的速度打开网站。 此外,在没有购买域名和租用服务器的情况下,搭建的博客网址通常是「GitHub用户名.github.io」,github.io 后缀的网站以前虽然打开的速度慢,但至少还能访问。 但在不久前,我想起自己许久没更新的博客,想打开看一下,发现 github.io 后缀的网站也打不开了。显而易见的是,它也被加入了大陆屏蔽的列表。 正是这个问题,促使我萌生了再次搭建新博客的念头,我想搭建一个存在时间尽可能长、且能在国内正常访问的博客。

搭建博客的流程

购买域名

域名可以理解为我们平常所说的网址,例如 baidu.com,我购买的域名是 penghh.fun。这个域名是从腾讯云购买的,网站会提供各式各样的域名后缀,如.com、.net、.cn 等,在顶部的搜索框输入你想注册的域名,下面会返回加上不同后缀的域名及价格。

8a1be19ef79db4e60b06a2b125edbaaf_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

域名是按年收费的,可只买一年,也可一次性买好几年,一次性购买多年的价格会划算一些。 如果你像我一样,不确定一年之后是否有精力维护博客,那最好就只买域名的 1 年使用期。 购买域名时的注意点:不要购买域名后缀为中文的域名

租用一台服务器

在进行下一步域名备案之前,我们需要先租用一台服务器。服务器可以理解为一台 24 小时不关机的电脑,如果你将博客的数据存放在上面,它就能随时随地被访问,无需担心电脑是否处于开机状态,且服务器能同时接收多个客户端的请求,因此它可以实现多人同时访问一个网站。 下图是我租用的服务器配置,应该是最便宜的服务器,一年的费用为 99 元。

df70cf1c6cc319bdd2951cbcb15949dc_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

腾讯云服务器:

https://cloud.tencent.com/act/double11/go

域名备案

如果你的网站想在国内正常访问,需要向互联网管理局提交备案,获得备案号后才能正常访问。

5c9317b30d57fb38341391e9a6094f2b_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

我是通过腾讯云提交备案的,在手机上通过小程序「腾讯云网站备案」提交网站名称和网站的备注信息等,网站名称存在着很多隐藏的限制,例如不能出现「分享」、「工具」等涉及诱导分享或商业性质的字样,我因为网站名称命中敏感词、描述不清而被驳回了三次。 网站名称最后还是腾讯的客服根据备注信息帮我起的——「个人电子产品使用心得」,与我最开始想设置的「效率工具指南」相去甚远。 此外,备案时还需要提交一个紧急联系人电话,可以将其设置为你的对象、家人或朋友,后续腾讯云客服在审核的过程中也会联系你留的紧急联系人电话,因此最好事先与紧急联系人打个招呼。 提交的备案信息通过腾讯云审核后,客服会将你的信息提交到管局,正常情况下 10 个工作日之后就能收到审核的结果,顺利的话就能拿到网站的备案号。 备案要点:耐心!耐心!耐心!尤其是在我们这个国家。

配置域名解析

之前我对域名的理解是,只要在浏览器地址栏中输入域名 penghh.fun,就能打开我的博客,但后来发现输入 www.penghh.fun 和 penghh.fun 是不一样的,在未正确配置域名解析的情况下,penghh.fun 打开失败,而 www.penghh.fun 则打开正常。

a92f1f484e55711fa5a8903d9073d516_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

咨询了网友 @无声 后,找到了解决方法,需要在服务器的 DNS 解析页面新增一条值为 @ 的主机记录,这里的 @ 代表直接解析域名 penghh.fun,将其指向与 www.penghh.fun 相同的 IP。

56250958aaf172e5daa07932c3baeeec_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

完成配置后,之后无论是否输入带有 www. 的网址,都可以正常访问网站,打开同一个页面。

83b4c0c89b3f590a559ac276b7649d1e_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

安装 Hexo 框架

搭建博客有两个比较多人用的框架:Hexo 和 Hugo,我选择的是 Hexo。关于 Hexo,引用 IIssNan 介绍 Hexo 时说的一段话:

Hexo 是高效的静态站点生成框架,它基于 Node.js。通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。

安装 Hexo 框架之前,需要先安装其他环境或软件:

  • Git
  • Node.js

Git,是一个版本控制软件,后面在将博客 push 到 GitHub 仓库时会用到。 Node.js 目前已集成到包管理工具 npm 中,因此只要你安装了 npm,就会附带安装 Node.js。 关于如何在本地安装 Hexo 框架,可以参考 B 站 Up 主 @CodeSheep 的视频教程,视频讲解得非常详细,说是一个保姆级教程也不为过。 教程地址:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

配置服务器

在搭建博客的整个流程中,我觉得配置服务器对我来说是最难的,一方面是配置时需要在服务器和本地之间分别进行操作,你需要分清某个命令是要在服务上还是在本地上操作,但这东西一来二去就把我搞晕了,另一方面,配置服务器时全程用的是黑黢黢的命令行窗口,而不是我们常用的图形化界面。 为了弄清在服务器上输入的某行命令产生了什么效果,例如是否在正确的路径下创建了文件夹,我们需要使用一些远程连接软件,将本地的电脑与服务器连接起来,通过软件查看服务器端生成的文件。 Mac 电脑:远程连接软件推荐使用 Royal TSX
Windows 电脑:远程连接软件推荐使用 Xshell
关于 Royal TSX 的用法,可以查看 B 站 Up 主 @老郭种树 的视频:怎样在Mac上SSH和FTP?完美替代XShell是哪个软件?item2吗?Royal TSX! 没有比它更好不一边输命令,一边查看生成的文件,我觉得心里特没底,特别没有安全感。 最终,服务器的配置还是网友 @无声 帮我弄好的,因此我少了这一步的实践,想了解的朋友,可以查看 @千古壹号 写的一篇搭建博客的文章: hexo+阿里云搭建博客网站

部署到 GitHub

我的博客不是直接从本地部署到服务器的,它相比前者中间多了一步:部署到 GitHub。后面再通过 GitHub 的 Actions 命令自动部署到服务器。 之所以要加多这一步(指部署到 GitHub),我的理解是,将 GitHub 作为一个备份的方案,它可能可以解决的问题有:

  • 本地的博客文章数据丢失了
  • 换了新的电脑
  • 服务器欠费未缴清

对于前两个问题,只需要通过 git pull 或 git clone 命令,就能将之前提交到 GitHub 的博客文章恢复到本地,无需担心数据丢失或迁移带来的麻烦。 第三个问题,由于 GitHub 是免费的,即便后面你不想租服务器了,将博客文章暂存到 GitHub 上,其实也是可以正常浏览的哈哈哈哈。

使用 GitHub Actions 实现博客自动部署到服务器

GitHub Actions 是 GitHub 提供的一个自动化工作流,它有点类似于 iPhone 上的「快捷指令」。 在 GitHub 仓库根目录中创建一个工作流文件,即将博客自动化部署到服务器的配置文件,之后你每次将本地的博客提交到 GitHub,就会自动触发 GitHub Actions 执行,稍等一小会,它就会将所有更改同步到远端的服务器。 这时,刷新一下之前停留的博客页面,就可以看到刚刚更新的博客文章了。 能让程序自动化的,千万不要手动操作,正如 Perl 编程语言的作者 Larry Wall 所说的:

程序员的三大美德:懒惰,急切,傲慢。

懒才是第一生产力。

可能会用到的命令行

查看 Git/Node.js 的版本号

git --version(也可以简写成 git --v)

node --version(同理可以简写成 node --v)

路径操作

进入 blog 文件夹:cd blog

进入 blog 文件夹下的子文件夹 posts:cd blog/posts

返回根目录:cd

返回上一级目录:cd ..

显示当前路径

pwd

在当前路径下创建一个新的文件夹

mkdir+空格+文件夹名称

查看当前路径下所有文件的管控状态

ls -l

*注:上面的两个字母是 L 的小写

获取 Git 的 ssh 公钥

cat ~/.ssh/id_rsa.pub

博客 push 到 GitHub

git add .

git commit -m"附带的信息,例如在某个时间点编辑了博客"

git push

Vim 编辑器模式下的操作 & 命令行

快捷键 i:i 是 insert 的缩写,表示插入

:q——退出

:wq——保存并退出 命令行虽然可能不像我们现在用的图形化界面那么直观,不那么易于理解,但通过输入短短的几行英文,就能实现某个看起来有些复杂的操作,那个感觉有时真的妙不可言,给人一种「我是上帝,正在造物」的错觉。

写在最后

搭建这个新的博客,最要感谢的还是我在即刻偶然认识的一位网友 @无声,他很耐心地帮我解决了大部分问题,如博客服务到服务器、使用 GitHub Actions 实现博客自动化部署,即便他晚上工作到 10 点多才下班,依然很有耐心地帮我解决了遇到的所有问题。 这也让我看到了一个技术人身上那种不屈不挠、誓要把问题解决的韧劲,他在帮我搭建博客的过程中,同样会遇到最初不知道怎么解决的问题,但他没有因为这是我的事情就草草地放弃了,反而是愈战愈勇。 一个人之所以强大,不止是来自于强健的体魄,更重要的可能是拥有一颗「大心脏」,能扛得住各种磨难、不畏难,甚至是主动挑战困难,这也是我一直以来佩服做技术的人的原因。 原本是想写一个详细的搭建 Hexo 博客教程,但写的时候发现自己还是不够耐心,就写了这篇比较笼统的文章,因为我自己其实也没有完全理清一些操作的意图或者命令,有些命令随着终端的关闭也消失了。。。好吧,这都是我的借口。 以上,希望有帮助。

参考资料

IIssNan - 开始使用 NexT 主题
老郭种树 - 怎样在Mac上SSH和FTP?完美替代XShell是哪个软件?item2吗?Royal TSX! 没有比它更好
千古壹号 - hexo+阿里云搭建博客网站
Frost's Blog - 使用 GitHub Actions 实现博客自动化部署
知乎 - 如何配置七牛云图床 - OpenWrite
zkqiang - hexo-theme-fluid


相关文章
|
6月前
|
缓存 编译器 API
【C/ C++链接】深入C/C++链接:从基础到高级应用(二)
【C/ C++链接】深入C/C++链接:从基础到高级应用
68 1
|
6月前
|
编译器 C++ 开发者
【C/ C++链接】深入C/C++链接:从基础到高级应用(一)
【C/ C++链接】深入C/C++链接:从基础到高级应用
101 0
|
6月前
|
前端开发 JavaScript
构建一个动态博客应用
构建一个动态博客应用
写博客的好处
写博客,其实是一件费力费时的事情,现实中没有多少人能长期坚持下来。我自己也是断断续续地写,也没有写坚持下来。在实践的过程中,我本身却是收益良多。我养成了记录的习惯,记录确实提高我的工作效率。
|
XML 搜索推荐 网络协议
建立博客近2年,为啥在百度搜不到自己写的文章?
建立博客近2年,为啥在百度搜不到自己写的文章?
|
存储 JSON 前端开发
博客项目(5、全局统一处理)
博客项目(5、全局统一处理)
88 0
|
自然语言处理 Java 程序员
小刚带你深入浅出系列2-链接和装载
1、前言链接和装载是一个深度的话题,但其实也没有那么难理解,只是在程序员的历程中很少遇到罢了,但是遇到的时候会比较束手无策,这也是为什么我想写一篇文章展开这个话题的原因。另一个原因是我看到百度上也有很多关于链接和装载的原创文章,给我的感觉是他们都是摘抄《程序员的自我修养》这本书,看似理解又不理解的感觉。毕竟百度就是百度,国内的原创文章少之又少和Google的文章真的是大相径庭。这点我想了一下也不奇
|
API Android开发
【FluidSynth】FluidSynth 简介 ( 相关资源链接 | 简介 | 特征 )
【FluidSynth】FluidSynth 简介 ( 相关资源链接 | 简介 | 特征 )
247 0
|
JavaScript 安全 前端开发
搭建自己的技术博客系列(三)让你的博客拥有评论功能!
给大家介绍一个博客评论神器,Valine。 本来hexo博客用的是gitment,我也非常喜欢,看着逼格就超高呀。无奈我用着bug略多,而且毕竟有github账户的小伙伴似乎并不多。于是我就忍痛准备换评论系统。