开源了一款可灵活配置,轻松部署的个人主页模板~
发表于
浏览量1020
评论数1
开源了一款可灵活配置,轻松部署的个人主页模板~
remio-home:一款个人主页,有以下特点
- Next.js构建,服务端渲染,较好的SEO
- 部署方便,支持docker,vercel快速部署
- 配置方便,修改一个文件基本就可完成
- PWA(Progressive_web_apps)支持,也可进行配置
- 移动端适配...
预览图:
移动端:
在线预览地址:index.remio.cc,index.kasuie.cc
项目开源地址:remio-home
注意:b站视频和语音如果不是最新版本的博客:kasuie.cc,则无法进行显示。
部署
容器部署
打包了适用于
linux
的镜像,不清楚其他系统是否使用,兼容性问题可以反馈,我再针对打包一下。
拉取镜像
docker pull kasuie/remio-home
因为有些不是必须的,比如是否自定义PWA
,是否支持站点统计,所以启动需要根据情况自行选择合适的命令,其中挂载目录,宿主端口和配置文件实际路径注意修改~
- 按默认启动容器,默认是都不支持的
docker run --name remio-home -p 3000:3000 -v /usr/local/config:/remio-home/config -d kasuie/remio-home:latest
- 如果都需要支持,需要配置
PWA
的图标挂载路径和用于统计分析的环境变量
直接启动容器:
docker run --name remio-home -p 3004:3000 --env-file /usr/local/.env -v /usr/local/config:/remio-home/config -v /usr/local/icons:/remio-home/public/icons -d kasuie/remio-home:latest
将/usr/local/.env
替换为自己环境变量的文件,文件中每行对应一个环境变量,格式为 key=value
,例如:
GTMID=value # Google Tag Manager
GTAGID=value # Google Analytics
BAIDUID=value # 百度统计
说明:
GTAGID
为Google Analytics处获取的id,GTMID
为Google Tag Manager处获取的id,BAIDUID
为百度统计处获取的id,如果用GTMID
不必再用其它两个了,根据自己需要来。
也可使用docker compose
运行,配置文件docker-compose.yml
如下:
version: "3"
services:
remio-home:
image: kasuie/remio-home
container_name: remio-home
ports:
- "3000:3000"
environment:
- TZ=Asia/Shanghai
- GTMID=value # Google Tag Manager
- GTAGID=value # Google Analytics
- BAIDUID=value # 百度统计
volumes:
- /usr/local/config:/remio-home/config
- /usr/local/icons:/remio-home/public/icons
restart: unless-stopped
在文件docker-compose.yml
目录下,运行命令:
docker-compose up -d remio-home
- 仅需要支持统计分析,指定环境变量
docker run --name remio-home -p 3000:3000 -e GTAGID=value -e GTMID=value -e BAIDUID=value -v /usr/local/config:/remio-home/config -d kasuie/remio-home:latest
如果你嫌加在命令上麻烦或者怕重启忘记id,可以考虑从文件中读取环境变量:
docker run --name remio-home -p 3000:3000 --env-file /usr/local/.env -v /usr/local/config:/remio-home/config -d kasuie/remio-home:latest
- 自定义
pwa
图标,则需多挂载一个icons
目录
docker run --name remio-home -p 3004:3000 -v /usr/local/config:/remio-home/config -v /usr/local/icons:/remio-home/public/icons -d kasuie/remio-home:latest
注意替换根据自己情况替换其中的挂载目录,环境变量路径和变量,也包含端口~
Vercel快速部署
点击上方Deploy
按钮即可开始部署~ 关于统计相关的环境变量也可在部署之前设置,如果不能找到设置的地方,也可以在部署完成后,在 vercel后台,找到刚刚部署的项目,在设置里设置对应环境变量,只是可能设置后还需要重新部署一下才会生效。
完成后,回到自己创建的仓库里,按需修改 /src/config/config.json
文件即可~
配置说明
{
"name": "KASUIEの主页✨",
"favicon": "/favicon.ico",
"domain": "",
"keywords": "remio,个人主页,主页",
"description": "兴趣至上,内容随缘,个人主页",
"avatarConfig": {
"src": "https://cdn.jsdelivr.net/gh/pixlips/picx-images-hosting@master/web/kasuie_new.5du9br5ow240.webp",
"size": 128,
"round": "full",
"hoverAnimate": "rotate"
},
"bgConfig": {
"bg": "",
"mbg": "",
"bgStyle": "snow",
"blur": ""
},
"layoutConfig": {
"istTransition": true,
"gapSize": "lg"
},
"subTitle": "https://v1.hitokoto.cn?c=a&c=b&c=c",
"subTitleConfig": {
"typing": true,
"loopTyping": true,
"shadow": true,
"typingCursor": true,
"showFrom": true
},
"socialConfig": {
"autoAnimate": true
},
"footer": "© 2020 - 2024 By KASUIE",
"links": [
{
"title": "qq",
"color": "#dfba00",
"url": "http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=zIvBSvLDRr4MvqFSHcioDwS090ljUYHT&authKey=THHoVVpDZWHfnpZoNf57rDWzwrXmTWtnlN70ljCM6cG9eZ5KTIJcTxrvc7%2B7YdVI&noverify=0&group_code=793752494",
"icon": "qq"
},
{
"title": "github",
"color": "#000000",
"url": "https://github.com/kasuie",
"icon": "github"
}
],
"sites": [
{
"icon": "https://cs.kasuie.cc/icons/1419ac35-0a57-4359-bb2f-55a26fc52bd8.png!cover",
"title": "Mio 导航",
"url": "https://nav.kasuie.cc",
"desc": "Mio 网站导航"
},
{
"icon": "https://cs.kasuie.cc/icons/d5570e8a-a826-47be-91b2-f6949b743111.webp!cover",
"title": "KASUIEのDocs",
"url": "https://docs.kasuie.cc",
"desc": "文档服务"
},
{
"icon": "https://cs.kasuie.cc/icons/a8cb45a8-c0ec-41e7-ab8f-ff4fe8817230.jpg!cover",
"title": "杂七杂八",
"desc": "阿巴阿巴..."
},
{
"icon": "https://cs.kasuie.cc/icons/1419ac35-0a57-4359-bb2f-55a26fc52bd8.png!cover",
"title": "喜好生成表",
"url": "https://like.kasuie.cc",
"desc": "个人喜好生成表"
}
],
"sitesConfig": {
"hoverBlur": false,
"hoverScale": false,
"modal": true
}
}
配置项说明:
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
name | string | 是 | 站点标题 |
favicon | string | 否 | 站点图标 |
domain | string | 否 | 站点链接 |
keywords | string | 否 | 站点关键词 |
description | string | 否 | 站点描述性信息 |
avatarConfig | AvatarConfig | 否 | 主页头像相关配置 |
LayoutConfig | LayoutConfig | 否 | 布局相关的一些配置 |
BgConfig | BgConfig | 否 | 背景相关的一些配置 |
subTitle | string | 否 | 站点头像下的次标题。可填入一言API,例如:https://v1.hitokoto.cn?c=a&c=b&c=c |
footer | string | 否 | 底部文字 |
links | Link[] | 是 | 社交媒体的链接 |
sites | Site[] | 是 | 项目或者其他站点链接 |
sitesConfig | SitesConfig | 否 | sites 渲染组件配置项 |
subTitleConfig | SubTitleConfig | 否 | 次标题渲染组件配置项 |
socialConfig | SocialConfig | 否 | 社交媒体的链接渲染组件配置项 |
AvatarConfig 类型说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
src | string | 否 | 头像资源路径 |
size | string | 否 | 头像尺寸 |
round | string | 否 | 圆角程度,可选full ,3xl ,xl ,sm ,md 和lg ,默认full |
hoverAnimate | string | 否 | 头像hover 时效果动画,可选top 和 rotate ,默认为空没有动画 |
BgConfig 类型说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
bg | string | 否 | pc背景图 |
mbg | string | 否 | 移动端背景图 |
bgStyle | string | 否 | 背景飘浮风格。可选值:sakura (樱花) 或 snow :(雪花),也可自行填写飘浮物资源图片 |
blur | string | 否 | 背景模糊程度,可选none ,sm ,md 和lg ,默认sm |
LayoutConfig 类型说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
istTransition | boolean | 否 | 是否开启渲染过渡动画,默认开启 |
gapSize | string | 否 | 布局,可选sm ,md 和lg ,默认md |
Link 类型说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
title | string | 是 | 标题 |
color | string | 否 | 颜色 |
url | string | 是 | 链接 |
icon | string | 否 | 图标链接 |
Site 类型说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
icon | string | 是 | 图标链接 |
title | string | 是 | 标题 |
url | string | 否 | 链接,url 为空,该元素在数组中后面的元素都会展示在弹框modal 中 |
desc | string | 否 | 描述 |
关于icon
目前内置有图标:
github, twitter, qq, telegram, email, steam, bilibili, discord, instargram, x,
Link
类型中icon
字段填写图标名即可使用,如果没有你需要的,也可以填写图标的资源链接使用
SubTitleConfig 类型说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
heart | boolean | 否 | 是否显示右上角爱心图标,默认:true |
typing | boolean | 否 | 是否开启打字效果,默认:false |
loopTyping | boolean | 否 | 是否支持切换一言,typing 为true 生效,默认:false |
shadow | boolean | 否 | 是否显示文字阴影效果,默认:false |
typingGap | number | 否 | 一言间隔多久开始清除,单位秒(s),默认为10s,最小3s |
typingCursor | boolean | 否 | 是否展示打字光标,typing 为true 生效,默认:true |
showFrom | boolean | 否 | 是否显示一言来源,默认:true |
SocialConfig 类型说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
autoAnimate | boolean | 否 | 是否开启涟漪动画,默认:true |
SitesConfig 类型说明
字段 | 类型 | 必填 | 说明 |
---|---|---|---|
hoverBlur | boolean | 否 | hover状态下是否模糊 |
hoverScale | boolean | 否 | hover状态下是否调整比例 |
modal | boolean | 否 | 是否显示modal |
本地启动
如果你需要本地启动,或者自行打包部署可参考以下命令,使用 pnpm 管理依赖
安装依赖
pnpm install // 需要先安装pnpm: https://pnpm.io/
本地启动
pnpm dev
打包
pnpm build
补充
在你部署后,可在部署域名后面加上/api/config
查看目前的配置信息,可以在修改配置后检查是否是你修改的配置。
待开发
- 卡片风格扩展多一点样式,可供配置
- 音乐播放
- 天气展示
- 主题色切换
我也没啥设计天赋,还是蛮难的,如果有什么好的想法,可以私信告诉我,谢谢~
写在最后;
地点: 成都
时间: 2024-06-03 15:45:57
心情:日复一日,明日何其少