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

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

预览：

演示 Demo (国内) 演示 Demo (国外) 演示 Demo (Vercel)

1. 拉取镜像

docker pull kasuie/remio-home

# 如果因为网络原因拉取不到，可考虑阿里云镜像，运行下面这个

docker pull registry.cn-shanghai.aliyuncs.com/remio/remio-home

2. 启动容器

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

• 创建项目目录，存放环境变量和配置文件

# 创建目录并进入该目录
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

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

编写环境变量文件后，然后运行：

# 这里映射的宿主机端口为 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.png和favicon512.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

然后运行命令启动：

docker-compose up -d remio-home

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

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

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

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

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

以下是一些参数说明：

目前内置有图标：

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

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

安装依赖

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

本地启动

pnpm dev

打包

pnpm build

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