(寄)

在此记录一下搭建网站的过程,也算是对连日的工作有一个交代:本来是免部署的静态网站,一时心动买了域名,却被告知要备案;去备案却发现备案需要服务器,于是在阿里云斥巨资吃新人优惠租下了这台小水管服务器(5M带宽,梦回2010年),申请SSL证书,配置反向代理 …… 我发现我算是进了坑了,而且越来越深,阿里云的优惠只有一年,我肯定要跑路的,跑路之前先清点一下家当总是好的,也方便下次系统复盘呗。

前言:以下代码仅在Ubuntu系统经过测试,且默认以sudo权限用户执行,在Windows Poweshell中的可用性尚不明确,出问题不管我事。
如果是windows可以参考Ubuntu官方的教程安装一个虚拟机来部署该项目,此处不再赘述。

依赖环境安装

到手先apt更新一波:

1
apt-get update

安装所需环境,第一步安装git:
1
sudo apt-get install git-core

完成后,安装node.js:

1
2
3
4
#官网提供方法(最新版)
#出于时效性考虑,建议先去官网看看是否存在更新 -> https://deb.nodesource.com/
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt-get install -y nodejs

完成上面的操作后记得试试node -v以及npm -v验证版本,测试是否安装成功,若提示报错记得寻找解决方案。

安装Hexo

如果node.js已经安装完成,那么就可以进行下一步,安装Hexo:

1
npm install -g hexo-cli

完成后,进入你想要部署服务器的文件夹的上一级,输入:
1
2
3
#请将<folder>改为你想部署的文件夹名字
#若此处出现无法识别Hexo命令的错误,请运行配置链接: ln -s /usr/local/nodejs/node-v18.18.2-linux-x64/lib/node_modules/hexo-cli/bin/hexo /usr/local/bin/hexo
hexo init <folder>

此时服务器会部署在名为<folder> 的文件夹中,此时可以:
1
cd <folder>

进入该服务器根目录,在此根目录完成相应依赖的安装:
1
npm install

此时可以看到根目录< folder> 下所生成的文件,修改其中的_config.yml,此文件主要用于对网站信息的配置,修改时可以参考Hexo的官方文档
到这里就可以准备启动服务器了:
1
2
3
4
5
#生成静态文件
hexo g

#启动服务器
hexo s

如果在运行中没有任何报错的话,服务器此时应该会默认部署在http://localhost:4000/,通过访问情况来判断你的服务器是否搭建成功,到这里服务器就已经成功搭建完成。

配置Git仓库

使用git前进行配置(已配置可以跳过):

1
2
3
4
5
#请将yourname修改为你的id
git config --global user.name "yourname"

#请将your@email.com修改为你的邮箱
git config --global user.email "your@email.com"

生成密钥:
1
2
3
4
5
cd ~/.ssh
#若运行报错请先用mkdir命令在根目录创建相关文件夹

#请将your@email.com修改为你的邮箱
sudo ssh-keygen -t rsa -C "your@email"

按下三次回车,文件会自动保存在根目录<~/.ssh>文件夹中,打开其中的id_rsa文件即可得到ssh密钥:
1
2
3
4
5
6
7
8
9
#进入根目录
cd ~/.ssh

#查询目录下文件列表
ls

#显示文件内容
cat id_rsa.pub
#到这里就可以复制了

复制你ssh密钥后,进入你的Github,打开setting位于accesss项下的SSH and GPG keys选择new ssh keys-> add ssh keys,测试是否能连接到github:
1
2
ssh -T git@github.com
#第一次可能询问是否继续,请输入yes,可能连接失败,可以多试几次上面的命令

测试成功会显示You've successfully字样的提示,到这里就成功了。

Github部署

首先,建立建立名为 <你的GitHub用户名>.github.io 的储存库(对照Hexo官方文档),如果你希望你的博客域名为<你的GitHub用户名>.github.io
若不对存储库名进行规范,则你的域名则会变为<你的GitHub用户名>.github.io/<repository的名字>,应注意。
完成后,对Hexo部署的根目录下的_config.yml进行修改如下:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: git@github.com:yourname/yourname.github.io.git
branch: main

添加hexo-deployer-git插件
1
npm install hexo-deployer-git --save

此时可以重新部署服务器
1
hexo d

服务器生成的静态网页将会被更新至Github库中,你也可以进行访问,地址为<你的GitHub用户名>.github.io

博客内容编辑与发布

往后,每次生成新的博客页面只需要使用命令:

1
2
3
#可以在命令中指定文章的布局(layout),
hexo new [layout] <title>
#默认布局(layout)为post(不填写时生效),也可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

生成新的页面后前往hexo部署目录下的source目录,通过打开对应的布局(layout)目录继续编写你刚刚创建的网页内容。其文件名为<title>.md,通过markdown语法来书写。每次书写完成后,在hexo部署目录使用:
1
2
hexo g
#其实完整指令是 hexo generate,但谁不喜欢偷懒呢?

这样,服务器会根据source目录下已有的内容生成新的静态网页,生成网页后记得部署,访问一下看看效果:
1
2
hexo s
#完整指令是 hexo server

此时服务器依旧会部署在http://localhost:4000/,根据terminal窗口的返回信息你也应该能够直接访问了。在访问后觉得还不错?那就部署它:
1
2
hexo d
#完整指令是 hexo deploy

运行此命令后,前面生成的静态网页文件会被上传至你github账号下的名为<你的GitHub用户名>.github.io 的储存库中,该储存库中的静态网页可以通过https://<你的GitHub用户名>.github.io来访问,这样,学习到什么就可以更新至博客啦。