2904 字
15 分钟
remio-home个人主页 搭建文档
remio-home个人主页 搭建文档
2025-09-23
-
-

Remio-Home个人主页#

remio-home(homepage): 基于配置的个人主页

  • Next.js构建,服务端渲染,较好的SEO
  • 部署方便,支持docker,vercel快速部署
  • 配置方便,支持在线配置,文件配置
  • Pwa 支持,也可进行配置
  • 移动端适配…

预览:

WON的小窝

服务器推荐: 服务器推荐

部署#

容器部署#

  1. 拉取镜像
Terminal window
docker pull kasuie/remio-home
# 如果因为网络原因拉取不到,可考虑阿里云镜像,运行下面这个
docker pull registry.cn-shanghai.aliyuncs.com/remio/remio-home
  1. 启动容器

注意:启动容器需要根据自己需要,配置有所不同,请自行选择

  • 创建项目目录,存放环境变量和配置文件
# 创建目录并进入该目录
mkdir remio-home && cd remio-home
  • docker 启动

启动前需要创建一个存放环境变量的文件,包括站点统计和站点密码,避免下次部署的时候忘记了

# 创建文件
touch .env
# 然后编辑环境变量,vim操作可以自行搜一下
vim .env
# 根据需要按需在文件内填写环境变量,一行一个,不要后面注释
GTMID=value #Google Tag Manager
GTAGID=value #Google Analytics
BAIDUID=value #百度统计
PASSWORD=your_password #密码,用于在线访问和编辑配置
BaiduSiteVerify=xxxx #百度站点验证
AMAP_KEY=xxxx #高德地图key

GTAGIDGoogle Analytics处获取的id,GTMIDGoogle Tag Manager处获取的id,BAIDUID百度统计处获取的id,如果用GTMID 不必再用其它两个了,根据自己需要来。

编写环境变量文件后,然后运行:

Terminal window
# 这里映射的宿主机端口为 3004,可自行修改,部署完成后 ip 加端口就可以访问了,然后-v 后面是挂载了三个目录,一个是配置文件的存放目录,一个是 icon 的存放目录,用于自定义 pwa 图标的,一个是 font 字体存放的存放目录,挂载后自动会创建目录
docker run --name remio-home -p 3004:3000 --env-file ./.env -v ./config:/remio-home/config -v ./icons:/remio-home/public/icons -v ./fonts:/remio-home/public/fonts -d kasuie/remio-home
# 如果你是用的阿里云镜像,则运行下面这个
docker run --name remio-home -p 3004:3000 --env-file ./.env -v ./config:/remio-home/config -v ./icons:/remio-home/public/icons -v ./fonts:/remio-home/public/fonts -d registry.cn-shanghai.aliyuncs.com/remio/remio-home

注意挂载目录不要直接挂载到/remio-home/public,这样会覆盖原有的文件,所以挂载其下面的目录,成功后,可以通过自己在线地址+目录名访问目录中的文件,如果需要自定义字体,填相对路径就好

运行成功之后,如果现在ip+端口打开页面,可以看到是默认配置的效果。

  • 自定义

在当前目录下,刷新一下,应该会有一个你挂载的配置目录(/config),修改一下该目录的权限为777,这样才能进行在线配置修改:sudo chmod -R 777 ./config.

然后进入该目录新建config.json文件,就可以在线编辑了,在线上地址后面加上/config进行访问,首次输入刚刚环境变量设置的密码验证通过后可以进行查看编辑配置。

当然你也可以在服务器上编辑config.json文件里,直接填写你站点的配置信息。

可参考仓库里 /src/config/config.json 进行修改,下方有参数说明可进行查看。

  • pwa支持及自定义图标

需要你在挂载目录/usr/local/icons至少上传一张命名为 favicon192.png 的图片,不然pwa不会生效。另外为了还应包含favicon64.png ,favicon128.pngfavicon512.png,这三种不是必须,但是不上传控制台会有报错,后续看情况可能会调整所需尺寸的张数。

以上配置(除了首次上传favicon192.png)修改后不需要重启项目,在页面刷新一下就能看到效果了。

首次上传favicon192.png的时候可能会出现,pwa没有生效,可能需要重启一下容器,运行docker-compose restart

  • docker compose 启动

在刚刚新建的目录下,再创建一个配置文件docker-compose.yml,内容如下:

version: "3"
services:
remio-home:
image: kasuie/remio-home # 阿里云用这个:registry.cn-shanghai.aliyuncs.com/remio/remio-home
container_name: remio-home
ports:
- "3004:3000"
environment:
- GTMID=value # Google Tag Manager
- GTAGID=value # Google Analytics
- BAIDUID=value # 百度统计
- PASSWORD=your password # 密码,用于在线访问和编辑配置
- BaiduSiteVerify=verifycode #百度站点验证
- AMAP_KEY=xxxx #高德地图key
volumes:
- ./config:/remio-home/config
- ./icons:/remio-home/public/icons
- ./fonts:/remio-home/public/fonts
restart: unless-stopped

然后运行命令启动:

Terminal window
docker-compose up -d remio-home

配置也和docker启动一样,注意替换变量

docker基本命令(后续运维用)#

Terminal window
//关闭命令
docker stop remio-home
//启动命令/重启
docker restart remio-home
//更新容器 备份容器中的数据,并停止容器执行删除容器 和拉去镜像
docker rm remio-home
docker pull registry.cn-shanghai.aliyuncs.com/remio/remio-home

部署到Vercel#

注意,在线编辑仅支持docker部署,vercel部署没办法持久化配置文件,所以每一次重新部署,都会重置配置

新增功能:v1.0.6 版本开始,vercel部署如果配置了数据库,也支持在线编辑,数据库仅支持PostgreSQL,在vercel可以免费创建配置数据库,然后在项目环境变量处设置数据量连接的环境变量PG_DATABASE_URL,格式为postgres://xxxxxx,如果连接失败,可以去掉连接url的?后面的参数。

Deploy with Vercel

点击上方按钮即可,填写必要的环境变量,点击创建完成后,回到自己创建的仓库里,按需修改 /src/config/config.json 文件即可。

自定义pwa图标和字体,在/public目录下,上传/public/icons覆盖已有的图标,字体上传到/public/fonts,相对路径/fonts/xxx.ttf就是你上传的字体文件,在配置字体资源路径的地方填写就好了。

以下是一些参数说明:

字段类型必填说明
namestring站点标题
faviconstring站点图标
domainstring站点链接
keywordsstring站点关键词(SEO用)
descriptionstring站点描述性信息(SEO用)
avatarConfigAvatarConfig主页头像相关配置
layoutConfigLayoutConfig布局相关的一些配置
globalStyleGlobalStyle全局样式相关的一些配置,如字体,主题
bgConfigBgConfig背景相关的一些配置
subTitlestring站点头像下的次标题。可填入一言API,例如:https://v1.hitokoto.cn?c=a&c=b&c=c
footerstring/FooterConfig底部设置项
linksLink[]社交媒体的链接
sitesSite[]项目或者其他站点链接
sitesConfigSitesConfigsites 渲染组件配置项
subTitleConfigSubTitleConfig次标题渲染组件配置项
socialConfigSocialConfig社交媒体的链接渲染组件配置项
slidersSlidersConfig技能加点组件配置项
resourcesResources加在第三方资源及添加一些自定义body

AvatarConfig 类型说明#

字段类型必填说明
hiddenboolean是否隐藏该组件,默认false
srcstring头像资源路径
sizenumber头像尺寸
roundstring圆角程度,可选full,3xl,xl,sm,mdlg,默认full
hoverAnimatestring头像hover 时效果动画,可选toprotate,默认为空没有动画
stylestring头像效果动画,可选glintwave,默认为空没有动画
aloneRightboolean头像单独在右侧,layoutConfig.stylehorizontal生效,默认false

BgConfig 类型说明#

字段类型必填说明
bgstring/string[]pc背景资源链接
mbgstring/string[]移动端背景资源链
audiostring背景音乐
bgStylestring背景飘浮风格。可选值:sakura(樱花) 或 snow:(雪花),也可自行填写飘浮物资源图片
blurstring背景模糊程度,可选none,sm,mdlg,默认sm
cardOpacitynumber卡片的透明度,0-1之间,默认0.1
carouselboolean开启图片轮播,背景图片数大于1生效,默认true
carouselGapnumber图片轮播间隔时间,单位s(秒),默认5s,最小3s
transitionTimenumber图片轮播过渡时间,单位s(秒),默认0.7s
transitionStylestring图片轮播过渡动画,可选default,toBottom,toTop,toIn,toInOut,toRighttoLeft,默认default
autoAnimateboolean背景图动画,默认false不开启

LayoutConfig 类型说明#

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

GlobalStyle 类型说明#

字段类型必填说明
fontsFontItem[]自定义字体数组
fallbackstring次要字体,优先级低于自定义字体,做字体垫片
primaryColorstring主题色,十六进制颜色值,默认#229fff(蓝色),没啥大用的样子
themestring主题设置,可选:dark,light,switcherswitcher为开启切换按钮,其他的为固定主题,默认light
weatherboolean是否显示地理天气,默认false不显示

FontItem 类型说明#

字段类型必填说明
srcstring字体文件资源链接
namestring给该字体取个名称,最好英文

FooterConfig 类型说明#

字段类型必填说明
textstring展示文字
urlstring展示文字的链接地址,点击可跳转
ICPstring备案号,填写后会链接到工信部
MPSICPstring公安部备案号,填写后会链接到公安部
directionstring排列方式,可选col,rowcol-reverserow-reverse,默认col
isExternalboolean是否展示链接图标,默认false
字段类型必填说明
titlestring标题
colorstring颜色
urlstring链接
iconstring图标链接

Site 类型说明#

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

SubTitleConfig 类型说明#

字段类型必填说明
heartboolean是否显示右上角爱心图标,默认:true
typingboolean是否开启打字效果,默认:false
loadingstring/boolean出现动画效果,可选wave,默认为空没有动画
loopTypingboolean是否支持切换一言,typingtrue生效,默认:false
shadowboolean是否显示文字阴影效果,默认:false
typingGapnumber一言间隔多久开始清除,单位秒(s),默认为10s,最小3s
typingCursorboolean是否展示打字光标,typingtrue生效,默认:true
showFromboolean是否显示一言来源,默认:true
stylestringlayoutConfig.stylehorizontal 生效,样式风格,可选,desc,default,默认:default
descstringsubTitleConfig.styledesc 生效,描述,如果需要分行展示以;分隔,下同
contentstringsubTitleConfig.styledesc 生效,详细描述内容
gapDelaynumber文字出现间隔,单位秒,默认0.05

SocialConfig 类型说明#

字段类型必填说明
rippleboolean是否开启涟漪动画,默认:true
loadingstring/boolean出现动画效果,可选wave,默认为空没有动画

SlidersConfig 类型说明#

字段类型必填说明
dataSlider[]数据数组
titlestring标题,为空不展示
hiddenboolean是否隐藏该组件
colorstring进度条自定义颜色,默认白色#fff
columnnumber一行展示几列,2-4的范围,默认2

Slider 类型说明#

字段类型必填说明
titlestring标题
colorstring颜色
valuenumber技能掌握程度,0-100之间
iconstring图标链接

关于icon#

目前内置有图标:

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

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

SitesConfig 类型说明#

字段类型必填说明
cardStylestring站点卡片风格,可选default,flip
hoverBlurbooleanhover状态下是否模糊
hoverScalebooleanhover状态下是否调整比例
hoverFlipboolean卡片是否可翻转,默认truecardStyleflip生效
directionstring卡片内容排列方式,可选colrow,默认colcardStyleflip生效
modalboolean是否显示modal
modalTipsstringmodal的提示语
modalTitlestringmodal的标题

Resources 类型说明#

字段类型必填说明
cssstring[]引入外部css
jsstring[]引入外部js
bodyHtmlstring自定义添加一些body内的html

本地启动#

安装依赖

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

本地启动

pnpm dev

打包

pnpm build

补充#

在你部署后,在配置页面输入密码后,可在部署域名后面加上/api/config查看目前的配置信息

这篇文章是否对你有帮助?

发现错误或想要改进这篇文章?

在 GitHub 上编辑此页
remio-home个人主页 搭建文档
作者
WON
发布于
2025-09-23
许可协议
CC BY-NC-SA 4.0