Hexo建站并部署:从入门到转生

Hexo建站并部署:从入门到转生

ChaTongXue (BD3QCK) 牢陈

你已经迷上Hexo,无法回头了…

契机

之前的这个网站是用Typecho搭建的。Typecho作为一个动态网站框架,需要服务器、虚拟主机部署。
虚拟主机用的是硅云 家的博客主扶持计划 ,一个月5块钱。
但是给的是共享IP,这个段在8月天天吃核武器。

八月好几次同IP段被打
八月好几次同IP段被打

所以…该换的就换了吧。
还有就是…
硅云你是一个特别好的宝宝qwq

为什么是Hexo

很简单,因为我菜。
我也想用Hugo,但是choco安装命令我确实加上了-extended。
您猜怎么着,装到本地的就不是Extended版,那叫一个那你丫的。

怎么装的

环境配置

先在电脑上安装 Git 和 Node.js 。

Git 官网: https://git-scm.com/downloads
Node.js 官网: https://nodejs.org/zh-cn

安装 Git 和 Node.js 的时候一直下一步就行了。

由于国内特有的 Git 下载速度慢,你可以去镜像站上下载。比如清华大学TUNA协会的镜像站: https://mirrors.tuna.tsinghua.edu.cn ,在获取下载链接——应用软件里找到适合你系统的Git。

感谢清华大学TUNA协会的各位,终于不用让我骂中国电信了。

配置 Git

由于后续需要将博客利用Github部署,为的是让他人能够看到,需要配置Github。

注册 Github 账号

请先在电脑上下载Steam++工具箱并且如图配置之后使用。
有能力的请使用梯子

平台加速勾选Github(最好全选),加速设置建议选择System
平台加速勾选Github(最好全选),加速设置建议选择System

(注:System模式下最好用完及时关闭,否则重启系统后访问网页时容易出现代理地址有误导致无法访问网页。此时请转到设置——网络和Internet——代理——手动设置代理中关闭“使用代理服务器”)

1.登录Github官网 ,选择右上角的Sign Up。
2.依次填入电子邮箱地址,密码和用户名。
3.进入电子邮箱,找到发送人为 Github的电子邮件,并且将邮件里的验证码填入打开的Github网址。
4.在接下来的Sign in Github 窗口中输入刚刚设置的电子邮件地址和密码,点击 Sign In 登录。
5.桌面右键选择Git Bash Here,输入以下代码:

1
2
git config --global user.name "你设置的Github用户名"
git config --global user.name 你设置的Github电子邮箱地址

6.生成SSH密钥文件

1
ssh-keygen -t rsa -C "Github电子邮箱地址"

生成好的密钥目录一般是 **C:\用户\电脑用户名.ssh\id_rsa.pub。
右键点击——使用记事本打开——复制id_rsa.pub里的所有内容。
7.配置Github上的密钥
Github点击右上角头像,点击Settings——SSH and GPG Keys——New SSH Key,Title部分随便填,Key部分把刚复制上的 id_rsa.pub 里的部分粘贴上去,点击Add SSH Key。

如图所示
如图所示

可选:配置淘宝镜像

由于国内特有的下载环境慢,切换至国内的镜像可以加快之后的下载速度。
这里使用淘宝的镜像,马云你听我说

桌面右键,选择 Git Bash Here,然后输入:

1
npm config set registry https://registry.nmpmirror.com

安装Hexo

执行上述步骤后,桌面右键选择Git Bash Here,执行以下命令。

1
npm i hexo-cil -g

然后选择一个文件夹建设博客,并且移动到该文件夹

1
cd 文件夹路径

执行以下命令来初始化Hexo

1
hexo init

执行后显示应该如下所示。

1
2
3
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
INFO Start blogging with Hexo!

然后执行 npm install

1
2
3
4
5
6
$ npm install

added 1 package in 820ms

23 packages are looking for funding
run `npm fund` for details

此时一个正常的流程如下图右半部分所示,测试文件夹的文件结构如左图所示的话,恭喜你,你的Hexo站点建立成功力!

左部分为站点结构,右半部分为流程
左部分为站点结构,右半部分为流程

配置主题

建立成功后,就可以执行 hexo s 查看你的站点了。

1
2
3
4
$ hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

其中的 at http://localhost:4000 意味该站点现在运行在 localhost:4000 ,在浏览器地址栏输入这串地址就可以看到你网站的效果了。

默认主题效果
默认主题效果

挺好的,就是多少有点欣赏不来。

如何选择主题

这个属于见仁见智的选项,网上搜索 hexo主题推荐 或者去Github里搜 Hexo theme就有一大堆。通常主题的Github仓库里的README文档里都提供了预览网址,点击即可查看这款主题的实际效果。
这里可以挑几个我见过的不错的,但是还请注意:只有适合你的才是最好的

发癫文学 (没有迫害各个主题的意思)

Hexo主题简直就是一个乙游大世界,想要美化多有Butterfly,想要功能多样的有安知鱼,如果想要我们的简约之美还有Redefine,要我说你们这帮Hexo用户吃的也是太好了,今天我已经垂直Create a repo了

如何配置主题

各主题Github仓库内或者在演示站点上都标明了主题文档的网址,点击即可跳转。
下面这张图片给大家挑两个典型。

eg. Fluid and Anzhiyu
eg. Fluid and Anzhiyu

按照文档来的一步一步走,一般不会出错。

主题的配置需要更改主题文档内指定的配置文件和站点配置,由于都以.yml结尾,且YML配置对于行缩进极为敏感,所以我**强烈建议你下载Visual Studio Code **,并且用Visual Studio Code打开.yml文件进行修改配置文件的操作。写文章也的时候会用到的。

如何写文章

确定你在你这个站点的目录内,如果不确定,请在 Git 里 执行如下命令:

1
cd 站点文件夹的路径

接着执行以下命令:

1
hexo new 你文章的名字

然后打开你站点文件夹里的 _post文件夹,如果不出意外,你会看到一个 你文章的名字.md的文件,这就是你的文章。

文章使用Markdown格式进行编写,同时兼容HTML。不了解Markdown语法的Sir请到this way:Markdown教程

主题可能会给文章提供了一些代码块,可以让你在写作的时候调用,让文章看起来更加丰富多彩。或者是需要你在编辑文章时需要往开头被 — 包围起来的部分添加一些信息,来显示文章封面等,关于这部分请自行查阅主题文档,一般写的都很清楚。

Markdown文章并不是所见即所得的,但是你可以通过安装其他的Markdown编辑器,比如Typora,或者是Visual Code Studio搭配插件(比如Markdown Preview Enhanced)做到对你的文章所见即所得,就像我现在这样:

YWYSIWYG by Using VSC and Markdown Preview Enhanced
YWYSIWYG by Using VSC and Markdown Preview Enhanced

什么?你问我为什么推荐Typora不用Typora? 因为Typora要钱,89元三台设备免费升级,但是有15天试用期。虽然要钱但是不可否认的是,Typora把Markdown编辑这个部分真的做的简易了很多。比起敲代码更像是用Word写文章,你可以先在试用期15天过后,再决定该不该入手这个软件。
Typora 官方中文站点:https://typoraio.cn/
请注意,主播既没收Typora的钱也没收数码荔枝的钱,看到了能不能给主播爆点米

如何部署到Github

以下分两部讲述:部署到Github和通过Cloudflare实现访问(Cloudflare可选)

部署到Github

首先你需要在Github上创建一个仓库,登录Github网站,在右上角选择加号,选择 New Repository。
点击New Repository后如何填写信息如图所示。或者库

dadada.png
dadada.png

点击Create Repository后,如图所示。
点击右侧图标复制这串链接
点击右侧图标复制这串链接

打开你站点文件夹里的 _config.yml,在最末尾# Deployment部分替换成以下代码:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: 这里粘贴你上一步复制的链接
branch: main

保存后返回站点文件夹,Shift+右键选择Git Bash Here(或在桌面右键 Git Bash Here后 cd 站点文件夹路径),执行以下命令:

1
2
3
hexo cl
hexo g
hexo d

此时等待代码运行完成之后,打开Github,选择你新建的库。就会看到文件已经在仓库里了。

然后在页面中选择Settings——Pages,如图,Source部分选择Deploy from a Branch, Branch 选择 main /(root),点击Save后稍作等候。

然后直接访问 https://你的Github用户名.github.io,即可成功访问!

(可选)绑定自定义域名

由于Github在国内开彩票一般的访问速度,绑定自己域名一定程度上能缓解一下。
域名可以通过硅云,阿里云,Namesilo这些平台花钱购买,也可以去找网上的所谓免费二级域名,比如eu.org和国内一群知名不知名的。但请注意:免费二级域名有一定跑路风险,请慎重选择!

还是在刚刚的Pages界面,但是选择Custom Domain部分。在文字框里输入你的域名,点击Save,等待过后你会发现:显示域名 are improperly configured。

噔 噔 咚
噔 噔 咚

这是因为我们还没设置好域名指向,接下来请转到您域名注册商的控制面板那里。

根据Github文档

  • 如果您的域名是顶级域名 (eg. 你的域名.后缀),请添加以下A记录:
    185.199.108.153
    185.199.109.153
    185.199.110.153
    185.199.111.153
  • 如果是二级甚至多级域名 (eg. xxx.你的域名.后缀 ),请添加以下 CNAME 记录:
    xxx 你的Github用户名.github.io
    然后返回Pages页面,多刷新几次,直到输入网站的地址显示DNS Check Successful就成功了。

(可选)用Cloudflare Pages 实现访问

这也是主播目前在用的方案,毕竟Github抽风不是一天两天了。
虽说Cloudflare也比较癫就是了…
选择Cloudflare方式,Github仓库名随便填,你能认得出来就好。
1.注册并登录Cloudflare账号,在左侧选择Workers 和 Pages,再点击创建。

第一步
第一步

2.选择Pages,点击连接到Git。
3.如图,选择Github,选择你的账号(如果没有请点击添加账户)。选择你站点的Github库,确认无误后点击开始设置。
这一张图加了多少私货
这一张图加了多少私货

4.如图,按图示填完后点击保存并部署

5.等待后,浏览器地址栏输入 项目名称.pages.dev即可访问

(可选)Cloudflare Pages绑定自定义域名

1.点击你站点的项目名称,选择自定义域。
2.输入域名,点击继续。
3.按提示在域名注册商管理面板处添加解析记录。
如果您的域名托管在Cloudflare,则直接点击激活域即可,其他注册商请配置好解析之后再点击激活域。

4.稍等过后,提示 活动 的情况下,浏览器地址栏输入域名,即可访问。证实博客部署成功。

总结

有个叫Amin Eftegarie的老哥说过:Every person on the planet should have their own website
这哥们的中心思想大概是:把站点上的这些东西扔到互联网档案馆上,能被安全的保存起来。供子孙后代们研究他们的祖先。
让我想起来有位UP主,是Warma曾经也说过自己做视频也是为了留下些什么。
可能我建网站的也一样吧。别那天突然寄了,钱没留下,除了信用卡账单还能留下点别的。
当然我除了这个原因,还有一个:
我在这里骂人不会被删帖子。
每个网站可能都是一个吉吉国,每位站长可能都是一个侯国玉

  • 标题: Hexo建站并部署:从入门到转生
  • 作者: ChaTongXue (BD3QCK)
  • 创建于 : 2024-10-28 23:20:07
  • 更新于 : 2024-10-30 08:07:19
  • 链接: https://blog.chatongxue.top/site-build.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论