Hexo静态博客搭建(基础篇)

如果你某一天有了一个搭建个人博客的想法,但是因为资金不足技术栈太浅等原因导致难以从零开始搭建自己的网站,那么用Hexo搭建一个静态博客就是一个不错的选择!本站是也是一个基于Hexo搭建的个人博客,将我的搭建过程分享出来,供感兴趣的朋友参考。

1. 什么是Hexo?

在搭建Hexo静态博客之前,先了解下什么是Hexo以及需要准备的前期工作。

Hexo是一个快速、简洁且高效的博客框架(Official),将个人博客部署到Github上,通过Markdown格式展现博客内容,相较于其他有后端的如Wordpress等,上手更快、更适合新手搭建博客。(由于只涉及到一些前端的内容,所以对后端不太熟悉也完全没有问题!)

在搭建博客之前,你需要准备好以下几个内容:

  • 一台搭载Windows/Linux系统的电脑(如果你是Mac系统,建议查看官方文档,在这里就不进行赘述了)
  • 能科学上网的工具
  • 注册一个Github账号
  • 熟悉Markdown的使用方法(不会其实也没问题,学习之后能更快上手博客文章的写作)

准备好上面的东西之后,那让我们开始吧。

2. 安装Hexo

2. 1 准备工作

在正式安装Hexo之前,确保你的电脑上面有安装有

Nodejs为JavaScript提供运行环境,Git用于将你的博客部署到Github上。

Windows用户可直接在官网上下载安装,Linux用户可以通过终端获取:

1
2
3
sudo apt-get install nodejs
sudo apt-get install npm
sudo apt-get install git

同时确保你的版本为最新版本,避免出现版本不兼容的问题。

2. 2 安装Hexo

打开终端,输入命令:

1
npm install -g hexo-cli

这个命令下载了Hexo部署博客的相关依赖,它提供了基本的部署生成工具,现在你可以使用这个工具来生成你的博客了。

此时你要创建一个文件夹用于在本地存储你的个人博客,在你想安装博客的目录下输入命令:

1
hexo init XX

上面XX的部分填写任何名字均可(就是你能找到你部署博客的名字),然后在这个目录下就会生成一个新的名为XX的文件夹,进入该文件夹,输入命令:

1
npm install

安装依赖文件。至此,一个简单的博客就搭建完成了。

搭建好博客之后,该怎么查看在网页上的效果呢?Hexo官方给了几个很简单的命令,帮助你更快上手Hexo博客搭建部署:

1
2
3
4
5
hexo clean # 清理缓存和静态文件
hexo new [layout] <title> # 生成新的文章
hexo generate # 简记为 hexo g, 生成博客的静态文件
hexo server # 简记为 hexo s, 启动本地服务器(查看部署到网页的效果)
hexo deploy # 简记为 hexo d, 部署到网页

更多命令请参考官方文档。现在,在这个文件夹打开的终端中输入:

1
2
hexo g
hexo s

等待一会儿直到你看到类似如下的图片:

这是你看到的内容

然后在浏览器的搜索框中输入localhost:4000,就可以看到你部署的博客在网页中的样子了。如果你想退出预览,那么在刚才的终端页面中按下键盘上的 Ctrl+C 即可退出本地预览。

3. 部署到Github

3. 1 遇到的问题

在退出本地预览之后,再次访问localhost:4000,发现居然无法访问了。可恶,搭建好的博客关掉本地服务器之后就不能再看了,有没有什么办法能让我通过网页直接浏览呢?答案是把网页部署到Github上

Hexo生成静态博客的实质是生成了静态网页文件,然后通过访问这些网页文件达到浏览博客的效果。Github作为全球最大的代码托管平台,将本地的文件部署Github上,再通过Github提供的网址访问,就能直接在网页上浏览你的博客了。当然你也可以选择购买一台云服务器直接部署到你的云服务器上,不过博主手头比较紧辣,所以还是选择Free的Github吧。

3. 2 创建仓库

登陆到Github之后(如果登陆不上Github,建议检查是否缺少相应的条件),点击右上角的 + 号,再点击【New repository】:

这时你会看到的界面

进去之后,将这个仓库的名字改为 XX.github.io,其中 XX 为你的用户名(记住,一定要为你的用户名不是昵称!):

这时你会看到的界面

然后其他选项保持默认即可(注意下方是否选择了【Public】选项以免不能通过网址访问)

3. 3 生成本地SSH

SSH是一种网络协议,让我们能够安全地登陆到Github上,有效防止远程管理过程中的信息泄露问题。其具体的实现过程如下:

  • 远程主机收到来自你电脑的登陆请求,将主机存储的SSH公钥与你电脑发送的公钥进行比对。
  • 若公钥一致,主机将用你电脑发送的公钥加密“质询”(Challenge)并将加密内容返回你的电脑。
  • 你的电脑用本地一并生成的私钥对”质询“进行解密并把解密内容发送给远程主机。
  • 若解密内容一致,则允许登陆。

让我们我们先在本地生成SSH秘钥。在你博客文件夹下打开终端,在终端中输入:

1
2
git config --global user.name "username"
git config --global user.email "useremail"

其中username换成你Github的用户名,useremail换成你注册Github所用的邮箱 。可以用以下两条命令检查是否填写正确:

1
2
git config user.name
git config user.email

接下来创建SSH秘钥,输入以下命令:

1
ssh-keygen -t rsa -C "useremail"

一直回车,直到它告诉你已经生成了SSH密钥秘钥,打开它所给的文件夹:

这时你会看到的界面

其中,id_rsa是你这台电脑的私人秘钥,id_rsa.pub是公共秘钥,我们要用的就是id_rsa.pub。选择用记事本的形式打开id_rsa.pub,其中的内容就是我们要的公钥。

3. 4 Github创建SSH Key

点击Github的头像,找到下方的【Settings】,在【Settings】中找到【SSH and GPG key】,也可以直接点击链接,然后点击【New SSH key

这时你会看到的界面

Title随便取,Key type保持默认Authentication key,然后在Key中填入你上面生成的公共秘钥id_rsa.pub中的内容:

这时你会看到的界面

输入完成之后点下【Add SSH key】。

回到之前的终端,在终端中输入命令:

1
ssh -T [email protected]

如出现如下的界面则创建SSH密钥成功:

这时你会看到的界面

最新产生的问题:如果你在校园网环境下可能会失败,因为部分校园网会屏蔽SSH端口(比如我们学校的校园网会时常抽风)

解决方案:换成手机流量就可以了

3. 5 配置_config.yml

2023.10.22 更新:由于博主校园网持续屏蔽SSH端口,故放弃SSH的方法,改用HTTPS进行链接。

在你的博客文件夹主目录下的_config.yml是Hexo的配置文件,用记事本打开后可以根据注释按照你的情况对其进行修改。现在我们需要配置最下面的deploy选项,根据你的情况按照下面的格式进行填写:

1
2
3
4
deploy:
type: git
repo: https://github.com/usergithubname/usergithubname.github.io.git
branch: master

其中repo选择Github仓库中的HTTPS中的链接,即:

这时你会看到的界面

至此,部署到Github上的准备工作已经完成。

3. 6 部署到Github

在部署之前,你需要下载一个部署插件才能使用hexo d,在终端中输入命令:

1
npm install hexo-deployer-git --save

等待完成后,输入命令:

1
2
3
hexo clean
hexo g
hexo d

当你看到如下的界面时,你的部署就大功告成!

这时你会看到的界面

此时你的博客已经部署到Github的仓库中了,你可以在浏览器中输入https://usergithubname.github.io/来访问你的博客啦。这里usergithubname还是填你Github的用户名。

4. 设置个人域名

4. 1 一点准备

在部署中就会遇到一个问题,那就是如果关掉科学上网的工具,那网站就很难再访问了。但是如果我们想让没有科学上网工具的人也能浏览我们的博客应该怎么办呢?答案是设置个人域名

我们在浏览器中输入https://usergithubname.github.io/打开我们的博客的时候,其中经历了三个步骤:

  • 浏览器根据域名向DNS服务器发送请求
  • DNS将域名解析到对应的IP地址
  • 根据Http请求将网络路由接到对应IP地址的服务器

本质上我们访问网站其实是访问网站的IP地址,域名只是起到一个“别名”的作用,域名和IP地址是键值对的关系。不过其实IP地址是一直在变化的,所以域名还能提供一个相对固定的访问地址。你的https://usergithubname.github.io/其实是github.io的二级域名,由于Github的服务器在国外所以访问速度会慢很多(本着网线接的越长访问速度越慢的原理)。那我们的域名是怎样加快访问速度的呢?

这里我们就要谈到CDN(内容分布网络),它加快网络访问速度的原理其实很简单:由于我们的博客是静态资源,如果我们的博客在附近被访问过一次,那么本地的DNS服务器对应IP中就会有博客的缓存,当其他临近用户再次访问这个网站时,就能直接从最近的DNS服务器的缓存中访问了,大大提升了访问速度。

4. 2 域名申请

免费域名申请有很多,比较流行的有 eu.org,详情可以参考其他的博客(它是一个二级域名再加上我的还没有审批下来所以有点介意啦)

付费顶级域名在国内外的互联网大厂都能买到,我的域名 .top 在阿里云购买的,首年¥9,次年¥29,对于学生党还是很友好了。

申请的具体过程就不赘述了,在申请的时候会有对应的提示,可以按照提示进行申请。

4. 3 域名设置

首先打开终端,在终端中输入命令:

1
ping usergithubname.github.io

在这个位置会显示你的博客IP地址:

这时你会看到的界面

然后在你DNS解析商处打开你的域名管理,在DNS解析处添加两条记录:ACNAME

类型 名称 内容 TTL
A @ [你刚才ping出来的IP地址] 自动/10min
CNAME www usergithubname.github.io 自动/10min

这样确保你的DNS解析商知道你的域名是指向哪里(由于DNS缓存的原因要过上一小段时间才能更新,所以添加完还不能立马访问哦)

然后打开Github中你部署博客的仓库,在仓库上方找到Settings,打开后在左侧找到Pages,在里面找到Custom domain,并把你申请的域名添加到里面,记得勾选下面的Enforce HTTPS

这时你会看到的界面

然后在你的本地部署博客文件夹的主目录中找到source文件夹,在source文件夹下新建文本文档并命名为CNAME.txt,用记事本打开后输入你申请的域名,保存退出,然后删掉这个文件CNAME.txt的后缀.txt

最后重新部署下你的博客:

1
2
hexo clean
hexo g -d

上面这个命令可以在生成之后立即部署,然后你就可以用自己的域名进行访问啦。

建议每次部署之前都进行上面的操作。

5. 总结

至此,一个可以通过互联网快速访问、可以任你创造的博客就创建好了。不过你要走的路还很长,包括网站的基础设置、网站主题的更换,评论系统、访问统计、SEO等等,这些都是为了让你的博客更好看、让别人能更好的浏览。说来我搭建博客也没多长时间,我要学的东西也有很多,之后我也会继续更新,努力把自己的博客建的更好。

感谢你的阅读!


Hexo静态博客搭建(基础篇)
https://watercuckoo.top/Hexo静态博客搭建(基础篇)/
作者
WaTerBirD
发布于
2023年10月19日
许可协议