LiveTerm:几分钟搭建终端风格网站的 Next.js 模板
LiveTerm 是一个高度可定制、易用且极简的终端风格网站模板,由 Next.js 驱动。克隆仓库后运行 yarn install && yarn dev,仅需编辑一个 config.json 文件即可在几分钟内完成网站搭建,可用于个人网站、浏览器起始页、项目页面甚至浏览器音乐播放器。
社区作者 · zZz
它解决什么问题
LiveTerm 是一个终端(Terminal)风格的网站模板项目,基于 Next.js 构建,主打高度可定制、易用和极简。按 README 说明,使用 LiveTerm 搭建一个简单网站只需要几分钟,并且你只需要操作一个文件:config.json。克隆仓库后,运行 yarn install && yarn dev,然后开始编辑 config.json 即可搭建网站。
项目用途(来源明确列出):个人网站(personal website)、浏览器起始页(browser startpage)、项目页面(project page),或者只是一个很酷的浏览器音乐播放器等,鼓励发挥创意。README 提供了在线 web demo 可体验。
配图 1 为项目仓库 demo 目录中的演示动图(demo.gif),展示 LiveTerm 的实际运行效果;配图 2(cveinnt.png)为作者使用 LiveTerm 搭建的个人网站截图,属于 README 的 Showcase 部分,同时展示了不同主题(themes)下的 LiveTerm 效果。
配置方式:LiveTerm 约 90% 的配置通过 config.
json 完成,其中包含 readmeUrl(创建一个 GitHub README 并链接到此)、title(网站标题)、name(你的名字,会出现在 about 命令中)、ascii(要显示的 ASCII 艺术字)、social(github / linkedin 昵称)、email(邮箱)、ps1_hostname(提示符中的主机名,示例默认 liveterm)、ps1_username(提示符中的用户名,示例默认 visitor)、resume_url(简历路径,示例 ./resume.
pdf)、non_terminal_url、colors(包含 light 与 dark 两套配色,可沿用 themes.json 中已有模板或自定义)。
主题:themes.json 中提供若干预配置主题,可把其中喜欢的配色替换进 config.json 的 colors 中;主题基于 README 所述某网站的主题,README 建议查看 demo 文件夹中的图片以获得更好的主题预览。
图标与其他资源:Favicons 位于 public/ 目录,与其他想上传到网站的文件放在一起,作者使用某网站生成 favicons;如需修改 banner 命令的输出,把生成的 banner 粘贴到 src/utils/bin/commands.ts 中。
进阶配置:如果想进一步自定义页面,可以按自己的喜好修改源代码。
部署:最简单的方式是使用 Next.js 官方团队提供的 Vercel 平台,可安装 vercel cli 并按指引操作,也可把 GitHub 账号连接到 Vercel,让其自动部署该 GitHub 仓库。
致谢:Based on M4TT72's awesome Terminal。
— 本文由 AI 根据公开来源辅助整理,命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
准备环境:需要 yarn 包管理器(README 给出安装 yarn 的入口链接)。以下步骤按来源顺序整理。
方式一:脚本安装(README 标题为“不到 5 分钟上线你的 LiveTerm 站点”)
- 在终端中运行以下命令,将 LiveTerm 安装到当前目录:
sh -c "$(curl -fsSL https://raw.github.com/Cveinnt/LiveTerm/main/install/install.sh)"- 进入目录并启动开发服务器:
cd LiveTerm && yarn dev- 首次运行后,开始编辑 config.json,保存文件即可看到更新后的变化。
方式二:克隆仓库到自选位置
- 克隆并进入目录:
git clone https://github.com/Cveinnt/LiveTerm.git && cd LiveTerm- 安装依赖并启动开发:
yarn install && yarn dev方式三
Docker 使用- 先克隆项目,并按需编辑 config.json。
docker-compose up -d
- 运行以下命令在后台启动容器:
- 如果你清楚自己在做什么,也可以尝试修改 Dockerfile 与 docker-compose.yml(README 提供 Docker 学习链接)。
部署到 Vercel
- 最简单的方式是使用 Next.js 官方团队提供的 Vercel 平台。
- 可以安装 vercel cli 并按指引操作;也可以将 GitHub 账号连接到 Vercel,由 Vercel 自动部署该 GitHub 仓库。
常见问题与易错点(均来自来源正文)
- 配置集中在 config.json,约 90% 的配置项都在该文件内,编辑后保存即可预览。
- 配色可在 themes.json 中挑选预配置主题后替换 config.json 的 colors,或完全自定义。
- Favicons 放在 public/ 目录,该目录也用于存放其他要上传到网站的文件。
- 想改 banner 命令的输出,把生成的 banner 粘贴到 src/utils/bin/commands.ts。
- 想进一步自定义页面,需要直接修改源代码。