网站搭建过程
整体步骤
网站是纯静态网站,建设过程大概有以下几步:
静态网站生成框架和主题
使用的框架为Hugo,主题在Hextra上进行修改。也可以使用其它主题,或者其它框架如Hexo。
将静态文件部署到服务器
网站源码用Github托管,Web服务部署在Cloudflare Pages上并自定义域名。
图床(可选)
用阿里云OSS和自定义Python脚本实现。
评论系统(可选)
Waline + MongoDB + Render + UptimeRobot
前排推荐渺软公益 CDN,直接替换对应CDN的base URL即可,十分方便。
- https://jsd.onmicrosoft.cn (回源 jsDelivr)
- https://npm.onmicrosoft.cn (回源 UNPKG)
- https://cdnjs.onmicrosoft.cn (回源 cdnjs)
框架和主题
准备工作
注册github,建议同时添加SSH密钥方便使用。教程很多,略。然后创建一个仓库,名字任意。
安装git。教程很多,略。
安装hugo。可以下载Hugo可执行文件(extend版本)到本地,加入环境变量后即可在命令行中使用。例如把解压后的hugo.exe
放到D:\Tools\hugo
文件夹下,再把D:\Tools\hugo
添加到环境变量中的Path
即可。
本地文件
将仓库clone到本地,下面称为网站根目录,并在里面新建themes
文件夹。
在themes
文件夹下新建hextra
文件夹,然后下载Hextra到本地,将里面除了exampleSite
之外的内容全复制到hextra
文件夹下,最后将exampleSite
的内容复制到网站根目录。
打开命令行,cd
到网站根目录,执行hugo server --bind 127.0.0.1 --port 1314 --baseURL http://127.0.0.1:1314 --disableFastRender
即可在http://127.0.0.1:1314
预览网站。
网站的主体内容在content
文件夹内,每个markdown文件对应网站的一个页面,可以增加或者修改。markdown文件的组织方式和其对应的页面也可以查看Hugo文档,也可以先查看更简洁的Hextra文档。
推送到github
网站内容有了变化之后可以推送到github,在设置了下一步自动化部署之后,每一次推送Cloudflare都会自动更新网站内容。
推送三步走:
git add .
git commit -m "我是备注"
git push origin
git pull origin
一下。自动化部署
网上的教程中用的最多的自动化部署流程是github actions + github pages,但是有两个缺点:仓库必须公开且仓库名必须按照规定来;github actions需要写脚本。
Cloudflare Pages就简便很多。
部署
注册Cloudflare账号,在Workers & Pages中新建Pages,选择连接到git,然后根据提示进行即可,基本上就是一直点next,而且网站框架有现成的Hugo选项,直接选择即可。简单无脑。
自定义域名
Cloudflare Pages分配的默认域名是xxxx.pages.dev
,不太好看而且好像不太容易访问到,可以通过自定义域名来解决。
先注册域名,然后将域名托管到Cloudflare。
在Cloudflare Pages页面添加Custom Domain即可。
图床
图床用的阿里云OSS存储,存储空间费用5年45块,40GB。流量费大概5毛/GB,请求费用1分/1W次,没什么人看的小网站约等于不要钱。
创建存储空间获取access key。教程很多,略。
上传没有使用PicGo等工具,自己写脚本实现,这样可以让图床的文件结构和本地一样,方便管理。
创建一个图床文件夹,用于放置脚本和要上传的图片,需要的文件如下:
-
-
- aliyun_oss_config.json — 配置
- aliyun_oss_push.py — 上传脚本
说明:
- 在图床根目录下的图片不会被上传
- 需要python环境,且不大于3.10(oss2包不兼容)
- 需要
pip install oss2
在图床根目录下执行python aliyun_oss_push.py
即可上传新的图片,上传成功后会在命令行输出图片的URL,复制到需要导入的地方即可。同时会生成aliyun_oss_rec.json
,记录已上传的图片。为了防止部分编辑器在打开该文件时从OSS读取图片进行预览,base URL和图片相对路径分开存储,使用时将图片路径拼接到.base_url
之后即可。
配置文件说明:
- 只会上传
image_suffix
指定的后缀的文件 exclude
中的路径下的文件不会被上传,格式为相对于图床根目录的相对路径。
评论系统
评论系统采用waline,需要部署数据库和服务端,然后在前端引入waline客户端。
数据库
数据库使用MongoDB部署,有512MB的免费空间,对评论系统来说足够用了。配置Access IP时填写0.0.0.0
,不然waline服务端访问不到。
服务端
服务端使用Render部署,步骤参考waline文档中Railway的部署过程,部署方式选择docker。环境变量填写MongoDB地址时,可以在MongoDB选择上一步部署的数据库,点击Connect,选择Drivers,Node.js,2.0.14 or early,示例代码中会给出相应地址。
Render部署的服务15分钟不访问会休眠,可以使用UptimeRobot每隔十分钟访问一次保持服务开启。
引入客户端
客户端引入方式见waline文档,注意将https://unpkg.com
替换为https://npm.onmicrosoft.cn
,unpkg目前在国内不可用。serverURL
填写上一步Render部署的地址。