我很喜欢摄影，电脑上有将近1.5T的相片，因此一直想有一个前端相册，把一些感觉还行的放上去
之前试过很多方案，包括但不限于：阿里云服务器部署纯PHP应用；本地应用端口+内网穿透；纯静态网站+静态托管（类似我现在的Hexo包括）……但是每一个我都坚持不久，服务器太贵了、内网穿透太不稳定了等等等等，都有其各自的缺点，很难作为我的长久之计
这时想到了用Nextjs搞一个来（哈哈，并不陌生了，Hexohub也是基于Nextjs设计的），又想到肯定有现成的，就去Github搜。结果找了半天没有满意的，要么就是对于图片的管理过于复杂（每张图片都有描述、参数、标签之类的，我要那些乱七八糟的干什么！），那么就是全是BUG的僵尸仓库，要么就是那种很商业化的模板
本着个人使用、极致简约、内容至上的原则，我构建了一个轻量化的相册应用。因为是基于Nextjs，我便给她命名为N-Gallery
安装
克隆仓库(建议空间>350MB)：
1 | git clone https://github.com/forever218/N-Gallery.git |
安装依赖：
1 | npm install |
启动开发服务器，地址localhost:3000：
1 | npm run dev |
构建生产内容：
1 | npm run build |
生产过程：
1 | npm run start |
页面
主页将展示所有图片，图片的位置、大小均为随机布局
相册页面将展示各个相册，进入即可查看各相册下的内容
图片管理
N-Gallery的图片管理非常简单，要新建相册，请在根目录/public/albums下新建对应文件夹。
例如要新建名为旅行的相册，即新建根目录/public/albums/旅行即可，程序会自动创建相册，可以运行开发服务器预览效果
要添加图片，在各相册下直接放入图片即可
得益于Nextjs的高效，可以先启动开发服务器，所有更改均为热更新，随时能查看效果
最佳实践
考虑到访问速度等诸多因素，放在相册里的图片最好经过压缩，每张图不超过500KB为宜
关于部署，目前我觉得（我也这样用的）最好的方案是放在Github上，通过腾讯的EdgeOne构建（免费服务），速度非常快，体验很好
最终的流程就是：在文件夹下放入图片，推送到Github就行了，别的都不用操心，等待EdgeOne的构建即可
Comments