网站搭建过程

 2024-01-01
 2632字

整体步骤

网站是纯静态网站,建设过程大概有以下几步:

静态网站生成框架和主题

使用的框架为Hugo,主题在Hextra上进行修改。也可以使用其它主题,或者其它框架如Hexo。

将静态文件部署到服务器

网站源码用Github托管,Web服务部署在Cloudflare Pages上并自定义域名。

图床(可选)

用阿里云OSS和自定义Python脚本实现。

评论系统(可选)

Waline + MongoDB + Render + UptimeRobot

前排推荐渺软公益 CDN,直接替换对应CDN的base URL即可,十分方便。

框架和主题

准备工作

注册github,建议同时添加SSH密钥方便使用。教程很多,略。然后创建一个仓库,名字任意。

安装git。教程很多,略。

安装hugo。可以下载Hugo可执行文件(extend版本)到本地,加入环境变量后即可在命令行中使用。例如把解压后的hugo.exe放到D:\Tools\hugo文件夹下,再把D:\Tools\hugo添加到环境变量中的Path即可。

信息

推荐使用scoop包管理工具,涵盖大部分常用的工具类和命令行类软件。

用scoop安装hugo只需要scoop install hugo即可,会自动创建环境变量。git也可以用scoop安装。

scoop的具体用法可以参考这篇教程

不推荐用scoop安装VScode和steam这种会自动更新的软件。

本地文件

将仓库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中的路径下的文件不会被上传,格式为相对于图床根目录相对路径
        TODO:清理脚本。本地删除图片时,删除OSS上的对应图片。

        评论系统

        评论系统采用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部署的地址。