kasuie page cover

开源了一款可灵活配置,轻松部署的个人主页模板~

发表于

浏览量1020

评论数1

开源了一款可灵活配置,轻松部署的个人主页模板~

remio-home:一款个人主页,有以下特点

  • Next.jsNext.js构建,服务端渲染,较好的SEO
  • 部署方便,支持dockerdockervercelvercel快速部署
  • 配置方便,修改一个文件基本就可完成
  • PWA(Progressive_web_apps)PWA(Progressive_web_apps)支持,也可进行配置
  • 移动端适配...

预览图:

prev
prev
移动端:
移动端预览

在线预览地址:index.remio.ccindex.remio.ccindex.kasuie.ccindex.kasuie.cc

项目开源地址:remio-homeremio-home

关于部署和配置效果制作了一期视频,里面大概讲了一下部署和配置过程以及主页的效果,如有兴趣可以看一下 派蒙

注意:b站视频和语音如果不是最新版本的博客:kasuie.cckasuie.cc,则无法进行显示。

好,接下来就开始说说怎么使用吧~ 可莉

部署

容器部署

打包了适用于linux的镜像,不清楚其他系统是否使用,兼容性问题可以反馈,我再针对打包一下。

拉取镜像

docker pull kasuie/remio-home

因为有些不是必须的,比如是否自定义PWA,是否支持站点统计,所以启动需要根据情况自行选择合适的命令,其中挂载目录,宿主端口和配置文件实际路径注意修改~

  1. 按默认启动容器,默认是都不支持的
docker run --name remio-home -p 3000:3000 -v /usr/local/config:/remio-home/config -d kasuie/remio-home:latest
  1. 如果都需要支持,需要配置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 # 百度统计

说明: GTAGIDGoogle AnalyticsGoogle Analytics处获取的id,GTMIDGoogle Tag ManagerGoogle 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
  1. 仅需要支持统计分析,指定环境变量
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
  1. 自定义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快速部署

vercel.com

Deploy with Vercel

点击上方Deploy按钮即可开始部署~ 关于统计相关的环境变量也可在部署之前设置,如果不能找到设置的地方,也可以在部署完成后,在 vercelvercel后台,找到刚刚部署的项目,在设置里设置对应环境变量,只是可能设置后还需要重新部署一下才会生效。

完成后,回到自己创建的仓库里,按需修改 /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
  }
}

配置项说明:

字段类型必填说明
namestring站点标题
faviconstring站点图标
domainstring站点链接
keywordsstring站点关键词
descriptionstring站点描述性信息
avatarConfigAvatarConfig主页头像相关配置
LayoutConfigLayoutConfig布局相关的一些配置
BgConfigBgConfig背景相关的一些配置
subTitlestring站点头像下的次标题。可填入一言API,例如:https://v1.hitokoto.cn?c=a&c=b&c=c
footerstring底部文字
linksLink[]社交媒体的链接
sitesSite[]项目或者其他站点链接
sitesConfigSitesConfigsites 渲染组件配置项
subTitleConfigSubTitleConfig次标题渲染组件配置项
socialConfigSocialConfig社交媒体的链接渲染组件配置项

AvatarConfig 类型说明

字段类型必填说明
srcstring头像资源路径
sizestring头像尺寸
roundstring圆角程度,可选full,3xl,xl,sm,mdlg,默认full
hoverAnimatestring头像hover 时效果动画,可选toprotate,默认为空没有动画

BgConfig 类型说明

字段类型必填说明
bgstringpc背景图
mbgstring移动端背景图
bgStylestring背景飘浮风格。可选值:sakura(樱花) 或 snow:(雪花),也可自行填写飘浮物资源图片
blurstring背景模糊程度,可选none,sm,mdlg,默认sm

LayoutConfig 类型说明

字段类型必填说明
istTransitionboolean是否开启渲染过渡动画,默认开启
gapSizestring布局,可选sm,mdlg,默认md

Link 类型说明

字段类型必填说明
titlestring标题
colorstring颜色
urlstring链接
iconstring图标链接

Site 类型说明

字段类型必填说明
iconstring图标链接
titlestring标题
urlstring链接,url 为空,该元素在数组中后面的元素都会展示在弹框modal
descstring描述

关于icon

目前内置有图标:

github, twitter, qq, telegram, email, steam, bilibili, discord, instargram, x,

Link类型中icon 字段填写图标名即可使用,如果没有你需要的,也可以填写图标的资源链接使用

SubTitleConfig 类型说明

字段类型必填说明
heartboolean是否显示右上角爱心图标,默认:true
typingboolean是否开启打字效果,默认:false
loopTypingboolean是否支持切换一言,typingtrue生效,默认:false
shadowboolean是否显示文字阴影效果,默认:false
typingGapnumber一言间隔多久开始清除,单位秒(s),默认为10s,最小3s
typingCursorboolean是否展示打字光标,typingtrue生效,默认:true
showFromboolean是否显示一言来源,默认:true

SocialConfig 类型说明

字段类型必填说明
autoAnimateboolean是否开启涟漪动画,默认:true

SitesConfig 类型说明

字段类型必填说明
hoverBlurbooleanhover状态下是否模糊
hoverScalebooleanhover状态下是否调整比例
modalboolean是否显示modal

本地启动

如果你需要本地启动,或者自行打包部署可参考以下命令,使用 pnpmpnpm 管理依赖

安装依赖

pnpm install // 需要先安装pnpm: https://pnpm.io/

本地启动

pnpm dev

打包

pnpm build

补充

在你部署后,可在部署域名后面加上/api/config查看目前的配置信息,可以在修改配置后检查是否是你修改的配置。

待开发

  • 卡片风格扩展多一点样式,可供配置
  • 音乐播放
  • 天气展示
  • 主题色切换

我也没啥设计天赋,还是蛮难的,如果有什么好的想法,可以私信告诉我,谢谢~

波奇酱

写在最后;

地点: 成都

时间: 2024-06-03 15:45:57

心情:日复一日,明日何其少

甘雨

留下你的评论吧

http(s)://

回到顶部