LiveTerm: A Next.js Terminal-Style Website Template

5月6日 Published inWebsite Builders

LiveTerm is a minimalist, terminal-themed website template powered by Next.js. It is designed to be highly customizable and straightforward to manage. You can launch your own personal command-line site in minutes by editing a single file: config.json.

LiveTerm requires the Yarn package manager. To get started, run the following command in your terminal:

sh -c "$(curl -fsSL https://raw.github.com/Cveinnt/LiveTerm/main/install/install.sh)"

This script installs LiveTerm into your current directory. Once the process is complete, navigate into the project folder and launch the development server:

cd LiveTerm && yarn dev

You can now open config.json to begin customizing your site. Any changes you save will reflect instantly in your browser.

Alternatively, you can clone the repository manually:

git clone https://github.com/Cveinnt/LiveTerm.git && cd LiveTerm

Then, install the dependencies and start the development environment:

yarn install && yarn dev

Using Docker

To use Docker, clone the project and configure your config.json. Then, start the container in the background:

docker-compose up -d

If you are familiar with containerization, you can modify the Dockerfile and docker-compose.yml to better suit your environment.

Basic Configuration

Most of LiveTerm’s primary settings are located in config.json:

{
  "readmeUrl": "Link to a GitHub README!",
  "title": "Your site title",
  "name": "Your name (appears in the 'about' command)",
  "ascii": "ASCII art to display",
  "social": {
    "github": "Your GitHub username",
    "linkedin": "Your LinkedIn username"
  },
  "email": "Your email",
  "ps1_hostname": "liveterm",
  "ps1_username": "visitor",
  "resume_url": "../resume.pdf",
  "non_terminal_url": "W",
  "colors": {
    "light": { ... },
    "dark": { ... }
  }
}

Feel free to adjust these values to personalize your site’s identity and functionality.

Themes

LiveTerm includes several preconfigured themes in themes.json. To use one, copy the color values from your preferred theme and paste them into the colors section of config.json. These themes are inspired by popular terminal color schemes found across the web.

Favicon

The site favicon is stored in the public/ folder. You can also place any other static assets you want to host on your site within this directory.

Banner

If you want to change the output of the banner command, simply paste your generated ASCII art into src/utils/bin/commands.ts.

Deployment

Vercel offers the most straightforward deployment path for Next.js applications. You can deploy by installing the Vercel CLI and following the prompts, or by connecting your GitHub account to Vercel to enable automatic deployments whenever you push code.