0.前言
导师的需求
本人大三,前段时间和导师聊天,和他说了想帮忙建一个实验室主页的想法,得到了他的支持,说干就干。导师的需求很简单,提了以下3点:
1. 能展示实验室的一些图片(做实验的、出去开会的、团建的等等)
2. 每个人都能有自己的简介页
3. 能显示实验室发表的学术成果
需求调研
在网上查询了一些资料后,发现目前实验室主页搭建主要可以分为以下三类:
第一类:使用商业化成熟的第三方平台,如LabXing。这类平台的优点是,不需要懂代码,把各种功能都封装好了,比较方便录入各种数据,对用户权限的管理也比较好。缺点是不少好用的功能需要付费,域名也不能自定义,而且数据都在人家服务器里,多多少少有点不放心。
第二类:购买云服务器,并使用经典web开发的一些方法。我之前写过vue+springboot做过前后端开发的,虽然感觉可玩性很强,但复杂的代码量让我不想再去写一遍了,就算写了,以后别人怎么去维护呢,想想还是放弃了。
第三类:使用HugoBlox+Github托管的方式。这种方案的好处是网页内容更改,只需要去修改Markdown文档就行,相对好上手(用Latex写过论文再用Markdown,感觉书写的思维模式还是很好接受的),而且好维护,套用模板后基本改少量代码就行。缺点是网页可能比较素,对审美有要求要改的会很多。而且github.io访问速度也太慢了,感觉用起来始终不得劲,使用github.io要求源码全部公开,隐私上我可能比较担忧。
综合考虑了下,我决定采用HugoBlox+云服务器的方式。这样我可以利用HugoBlox这种好上手的开发方式,而且买个国内带公网ip的轻量服务器,剩下的空间还可以搞搞别的应用开发,还是很不错的。
1.轻量服务器配置
轻量服务器购买
目前国内比较知名的服务器商有腾讯云、阿里云、华为云,三家我都用过,感觉都还挺不错。之前大二给公司做项目一直用的腾讯云,操作也熟练些,就决定是腾讯云的轻量应用服务器了。购买的话可以去特惠那边看看,一般都有活动:腾讯云最新活动_腾讯云促销优惠_代金券-腾讯云官网入口 (tencent)
购买的话,新人有个特惠,如果只做一个实验室网页的话,买2核2G的就够了。我自己是因为后面还想做一些小应用开发,所以用的就是2核4G的了,一年188大洋,属实不贵了。考虑速度我就买的国内大陆的服务器了,只不过审核会严格一些。
安装Linux系统
买完以后就是安装系统了,初始的时候会让你选择安装什么系统,我这边就直接安装Ubuntu 24.04LTS了,当然Linux的其他发行版也是ok的(因为之前做深度学习一直用的Ubuntu,所以对他比较熟些)。腾讯云是自带一个终端的,可以直接从网页远程登录。
安装Caddy2
因为考虑到后面可能要做反向代理,实现多站点管理,所以我就先把Caddy2装上了(不装Nginx是觉得Caddyfile的管理模式和自动SSL比较戳我心,其实Nginx也很好用)。安装教程可以参考官方文档:安装 — Caddy v2中文文档 (dengxiaolong)
我这里给出具体的命令
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy
如果有问题,可以看看别的帖子都怎么解决的,这里常见的报错可能是因为网络问题导致下载中断,多运行几次导致中断的命令,让它下载好就好了。
2. 域名配置
域名购买
域名可有可无,如果学校能分配子域名,那是非常好的。可惜我们这没有这种先例,于是乎我就打算买个域名了。为了让域名看上去比较符合中国人认知(显得网站不那么三流),于是买个了域名,考虑方便也是直接在腾讯云买了,一年33大洋,非常有性价比了。当然,买域名之前,还是要请示下导师,导师也是爽快答应了。
ICP备案
国内服务器绑定域名必须要经过ICP备案才可以访问,不然会直接被封。大一的时候折腾过一次,所以这次拿到域名的第一件事,就是去申请工信部的ICP备案。以我两次备案的经验来说:网站按个人主体走,不要带盈利功能、评论功能、强交互功能的,都会比较容易过。中间要保持电话畅通,腾讯云会初审一次,工信部再审一次,顺利的话20-30天,ICP备案就能下来。具体备案过程可以参考腾讯云的这个文档:腾讯云备案_个人域名备案_网站备案_企业备案-腾讯云 (tencent)
公安备案
网站只有经过公安备案,才能在保证后续稳定,不然可能会被直接被找去喝茶了。ICP备案过程中,就可以同步先把公安备案的主体先提交审核了,这个阶段是不需要网站信息的,等待当地公安的网安部门审核后,就可以申请网络内容备案了。这里的流程可以参考腾讯云的文档:ICP 备案 公安备案流程-公安备案与经营性备案-文档中心-腾讯云 (tencent)
DNS解析
ICP备案过了后,就可以设置子域名了,我是把www子域名分给主页的,在腾讯云里填写下,记录值就是轻量服务器的公网ip地址
反向代理和SSL证书
这里就可以去使用Caddy2来操作了,Caddy2的好处就是可以自动SSL,也就是让http变成https,防止网站报“不安全”(让人觉得你的网站是不是有风险hhhh)。 具体教程可以参考caddy2官方文档:Caddyfile教程 — Caddy v2中文文档 (dengxiaolong)
首先用find命令找到自己安装的Caddyfile位置(如果没有Caddyfile那就随便找个位置新建一个)
sudo find / -name "Caddyfile"
然后在Caddyfile里写上(xxx是我买的域名名字)
www.xxx {
reverse_proxy 127.0.0.1:1313
}
这里1313端口是下面我们用HugoBlox默认开放的本地端口号。退出编辑后在Caddyfile同级目录下输入重载命令:
caddy reload
3. HugoBlox配置
这里主要参考了HugoBlox官方文档💻 Edit your Hugo site locally | Hugo Blox Docs
安装Go语言和Git
官方让我们用snap安装,但腾讯云的ubuntu似乎不支持snap,所以我们可以直接用apt来安装
sudo apt update
sudo apt install golang-go
sudo apt install git
安装Hugo
注意,这里安装的hugo是拓展版,不是普通版,这里我直接给出下载链接:
https://github/gohugoio/hugo/releases/download/v0.143.1/hugo_extended_0.143.1_linux-amd64.deb可以使用wget命令来下载,不过可能会比较慢。也可以先挂梯子下载好,然后用winscp等软件上传到服务器,这样较快。我采用的是后者。下载好后在同一目录下输入命令完成安装
sudo dpkg -i hugo_extended_0.143.1_linux-amd64.deb
使用如下命令来验证是否安装成功了
hugo version
出现以下内容,表示安装成功了
Hugoblox模版下载
从Hugoblox官网下载一个你喜欢的模板,找到对应的github链接,下载完整的文件到服务器。这里我用是这个模板:HugoBlox/theme-research-group: 👥 轻松创建研究组或组织网站 Easily create a stunning Research Group, Team, or Business Website with no-code (github)
启动Hugo
进入对应下载的模板文件夹,输入如下命令即可启动
hugo server -D
如下显示,即为启动成功,然后输入对应网址,就可以访问了
如果想让服务器一直挂在后台,可以使用nohup命令,就可以一直挂着了
nohup hugo server -D > hugo.log 2>&1 &
4. 网页内容修改
使用Vscode远程编辑
这样做的好处是,不用在服务器上下载、修改、上传,直接在本地使用ssh远程链接服务器就可以了,这里需要借助vscode的插件Remote-SSH。具体流程可以参考csdn上的博客:使用VS Code远程连接服务器,在VS Code上编辑服务器文件。超级简单_vscode编辑远程服务器文件-CSDN博客
修改网页标题
在模板文件夹/config/hugo.yaml 中修改
修改网页内容
主要修改模板文件夹/content/中的各种文件,大家摸索摸索就会啦,这块不用细说。
修改完记得保存,然后在网页中按ctrl+F5进行刷新,是不用重启hugo server的,十分方便。
0.前言
导师的需求
本人大三,前段时间和导师聊天,和他说了想帮忙建一个实验室主页的想法,得到了他的支持,说干就干。导师的需求很简单,提了以下3点:
1. 能展示实验室的一些图片(做实验的、出去开会的、团建的等等)
2. 每个人都能有自己的简介页
3. 能显示实验室发表的学术成果
需求调研
在网上查询了一些资料后,发现目前实验室主页搭建主要可以分为以下三类:
第一类:使用商业化成熟的第三方平台,如LabXing。这类平台的优点是,不需要懂代码,把各种功能都封装好了,比较方便录入各种数据,对用户权限的管理也比较好。缺点是不少好用的功能需要付费,域名也不能自定义,而且数据都在人家服务器里,多多少少有点不放心。
第二类:购买云服务器,并使用经典web开发的一些方法。我之前写过vue+springboot做过前后端开发的,虽然感觉可玩性很强,但复杂的代码量让我不想再去写一遍了,就算写了,以后别人怎么去维护呢,想想还是放弃了。
第三类:使用HugoBlox+Github托管的方式。这种方案的好处是网页内容更改,只需要去修改Markdown文档就行,相对好上手(用Latex写过论文再用Markdown,感觉书写的思维模式还是很好接受的),而且好维护,套用模板后基本改少量代码就行。缺点是网页可能比较素,对审美有要求要改的会很多。而且github.io访问速度也太慢了,感觉用起来始终不得劲,使用github.io要求源码全部公开,隐私上我可能比较担忧。
综合考虑了下,我决定采用HugoBlox+云服务器的方式。这样我可以利用HugoBlox这种好上手的开发方式,而且买个国内带公网ip的轻量服务器,剩下的空间还可以搞搞别的应用开发,还是很不错的。
1.轻量服务器配置
轻量服务器购买
目前国内比较知名的服务器商有腾讯云、阿里云、华为云,三家我都用过,感觉都还挺不错。之前大二给公司做项目一直用的腾讯云,操作也熟练些,就决定是腾讯云的轻量应用服务器了。购买的话可以去特惠那边看看,一般都有活动:腾讯云最新活动_腾讯云促销优惠_代金券-腾讯云官网入口 (tencent)
购买的话,新人有个特惠,如果只做一个实验室网页的话,买2核2G的就够了。我自己是因为后面还想做一些小应用开发,所以用的就是2核4G的了,一年188大洋,属实不贵了。考虑速度我就买的国内大陆的服务器了,只不过审核会严格一些。
安装Linux系统
买完以后就是安装系统了,初始的时候会让你选择安装什么系统,我这边就直接安装Ubuntu 24.04LTS了,当然Linux的其他发行版也是ok的(因为之前做深度学习一直用的Ubuntu,所以对他比较熟些)。腾讯云是自带一个终端的,可以直接从网页远程登录。
安装Caddy2
因为考虑到后面可能要做反向代理,实现多站点管理,所以我就先把Caddy2装上了(不装Nginx是觉得Caddyfile的管理模式和自动SSL比较戳我心,其实Nginx也很好用)。安装教程可以参考官方文档:安装 — Caddy v2中文文档 (dengxiaolong)
我这里给出具体的命令
sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy
如果有问题,可以看看别的帖子都怎么解决的,这里常见的报错可能是因为网络问题导致下载中断,多运行几次导致中断的命令,让它下载好就好了。
2. 域名配置
域名购买
域名可有可无,如果学校能分配子域名,那是非常好的。可惜我们这没有这种先例,于是乎我就打算买个域名了。为了让域名看上去比较符合中国人认知(显得网站不那么三流),于是买个了域名,考虑方便也是直接在腾讯云买了,一年33大洋,非常有性价比了。当然,买域名之前,还是要请示下导师,导师也是爽快答应了。
ICP备案
国内服务器绑定域名必须要经过ICP备案才可以访问,不然会直接被封。大一的时候折腾过一次,所以这次拿到域名的第一件事,就是去申请工信部的ICP备案。以我两次备案的经验来说:网站按个人主体走,不要带盈利功能、评论功能、强交互功能的,都会比较容易过。中间要保持电话畅通,腾讯云会初审一次,工信部再审一次,顺利的话20-30天,ICP备案就能下来。具体备案过程可以参考腾讯云的这个文档:腾讯云备案_个人域名备案_网站备案_企业备案-腾讯云 (tencent)
公安备案
网站只有经过公安备案,才能在保证后续稳定,不然可能会被直接被找去喝茶了。ICP备案过程中,就可以同步先把公安备案的主体先提交审核了,这个阶段是不需要网站信息的,等待当地公安的网安部门审核后,就可以申请网络内容备案了。这里的流程可以参考腾讯云的文档:ICP 备案 公安备案流程-公安备案与经营性备案-文档中心-腾讯云 (tencent)
DNS解析
ICP备案过了后,就可以设置子域名了,我是把www子域名分给主页的,在腾讯云里填写下,记录值就是轻量服务器的公网ip地址
反向代理和SSL证书
这里就可以去使用Caddy2来操作了,Caddy2的好处就是可以自动SSL,也就是让http变成https,防止网站报“不安全”(让人觉得你的网站是不是有风险hhhh)。 具体教程可以参考caddy2官方文档:Caddyfile教程 — Caddy v2中文文档 (dengxiaolong)
首先用find命令找到自己安装的Caddyfile位置(如果没有Caddyfile那就随便找个位置新建一个)
sudo find / -name "Caddyfile"
然后在Caddyfile里写上(xxx是我买的域名名字)
www.xxx {
reverse_proxy 127.0.0.1:1313
}
这里1313端口是下面我们用HugoBlox默认开放的本地端口号。退出编辑后在Caddyfile同级目录下输入重载命令:
caddy reload
3. HugoBlox配置
这里主要参考了HugoBlox官方文档💻 Edit your Hugo site locally | Hugo Blox Docs
安装Go语言和Git
官方让我们用snap安装,但腾讯云的ubuntu似乎不支持snap,所以我们可以直接用apt来安装
sudo apt update
sudo apt install golang-go
sudo apt install git
安装Hugo
注意,这里安装的hugo是拓展版,不是普通版,这里我直接给出下载链接:
https://github/gohugoio/hugo/releases/download/v0.143.1/hugo_extended_0.143.1_linux-amd64.deb可以使用wget命令来下载,不过可能会比较慢。也可以先挂梯子下载好,然后用winscp等软件上传到服务器,这样较快。我采用的是后者。下载好后在同一目录下输入命令完成安装
sudo dpkg -i hugo_extended_0.143.1_linux-amd64.deb
使用如下命令来验证是否安装成功了
hugo version
出现以下内容,表示安装成功了
Hugoblox模版下载
从Hugoblox官网下载一个你喜欢的模板,找到对应的github链接,下载完整的文件到服务器。这里我用是这个模板:HugoBlox/theme-research-group: 👥 轻松创建研究组或组织网站 Easily create a stunning Research Group, Team, or Business Website with no-code (github)
启动Hugo
进入对应下载的模板文件夹,输入如下命令即可启动
hugo server -D
如下显示,即为启动成功,然后输入对应网址,就可以访问了
如果想让服务器一直挂在后台,可以使用nohup命令,就可以一直挂着了
nohup hugo server -D > hugo.log 2>&1 &
4. 网页内容修改
使用Vscode远程编辑
这样做的好处是,不用在服务器上下载、修改、上传,直接在本地使用ssh远程链接服务器就可以了,这里需要借助vscode的插件Remote-SSH。具体流程可以参考csdn上的博客:使用VS Code远程连接服务器,在VS Code上编辑服务器文件。超级简单_vscode编辑远程服务器文件-CSDN博客
修改网页标题
在模板文件夹/config/hugo.yaml 中修改
修改网页内容
主要修改模板文件夹/content/中的各种文件,大家摸索摸索就会啦,这块不用细说。
修改完记得保存,然后在网页中按ctrl+F5进行刷新,是不用重启hugo server的,十分方便。