kasuie
KASUIEの次元
忘记了曾经的颜色
  • 热门文章
  • 最近文章
  • 最新评论
kasuie
kasuie
kasuie
kasuie
kasuie
Categories
Tags cloud
阿里云
Nginx
脚本
NextUI
美化
文件重命名
前端
SpringBoot
Next.js
CDN
Stylus
笔记
Remio
Docker
踩坑记录
原神
Bilibili
jsDelivr
Thymeleaf
Stylish
Alist
https
Prisma
教程
Vercel
MYSQL
导航
Github
Bot
Vue
插件
Redis
Node.js
又拍云
React
新年快乐
SSR
Pixiv
Linux
BAT
Hexo
Mybatis
Cloudflare
米哈游
Blog information
  • 文章数目
    20
  • 评论数目
    51
  • 运行天数
    1392
  • 总浏览量
    33730
kasuie page cover

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

发表于

浏览量777

评论数1

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

remio-home：一款个人主页，有以下特点

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

预览图：

prev
prev
移动端：
移动端预览

在线预览地址：index.remio.ccindex.remio.cc，index.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 # 百度统计

说明： GTAGID为Google AnalyticsGoogle Analytics处获取的id，GTMID为Google 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[]是项目或者其他站点链接
sitesConfigSitesConfig否sites 渲染组件配置项
subTitleConfigSubTitleConfig否次标题渲染组件配置项
socialConfigSocialConfig否社交媒体的链接渲染组件配置项

AvatarConfig 类型说明

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

BgConfig 类型说明

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

LayoutConfig 类型说明

字段类型必填说明
istTransitionboolean否是否开启渲染过渡动画，默认开启
gapSizestring否布局，可选sm,md和lg，默认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否是否支持切换一言，typing为true生效，默认：false
shadowboolean否是否显示文字阴影效果，默认：false
typingGapnumber否一言间隔多久开始清除，单位秒(s)，默认为10s，最小3s
typingCursorboolean否是否展示打字光标，typing为true生效，默认：true
showFromboolean否是否显示一言来源，默认：true

SocialConfig 类型说明

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

SitesConfig 类型说明

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

本地启动

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

安装依赖

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

本地启动

pnpm dev

打包

pnpm build

补充

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

待开发

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

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

波奇酱

写在最后；

地点： 成都

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

心情：日复一日，明日何其少

甘雨
最后修改：2024年06月03日
Docker
Next.js
Github
Linux
Remio
Vercel
教程
Bilibili

留下你的评论吧

http(s)://

© 2020 - 2024 kasuie.
RSSSiteMap监控
由
upyun
提供CDN加速服务
备案号：蜀ICP备2022014701号
回到顶部