LiveTerm - 💻ターミナルスタイルのウェブサイトを数分で構築しましょう!

(💻 Build terminal styled websites in minutes!)

Created at: 2022-05-12 20:27:35
Language: TypeScript
License: MIT

💻LiveTerm-ターミナルスタイルのウェブサイトを数分で構築できます!

Next.jsを利用した、高度にカスタマイズ可能で使いやすく、最小限の端末スタイルのWebサイトテンプレート。

LiveTermを使用して簡単なWebサイトを構築するには数分しかかからず、 1つのファイルで作業するだけで済みます

config.json
。このリポジトリのクローンを作成したら、実行
yarn install && yarn dev
して編集を開始
config.json
し、Webサイトを構築します。

LiveTermは、さまざまなWebサイトを構築するために使用できます。

上記のWebデモを自由に試してみてください!

📸ショーケース


さまざまなテーマのLiveTerm


私の個人的なウェブサイト

🚀LiveTermサイトを5分以内に発送します

LiveTermには

yarn
パッケージマネージャーが必要です。
yarn
ここにインストールできます。

ターミナルで次のコマンドを実行するだけです。

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

これにより、LiveTermが現在のディレクトリにインストールされます。あなたはあなたのウェブサイトを構築し始めることができます:

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
。Dockerの詳細については、こちらをご覧ください。

📄構成

基本構成

LiveTermの構成の90%は、

config.json
ファイルを介して行われます。

{
  "readmeUrl": // create a Github README and link it here!
  "title": // title of the website
  "name": // your name, included in 'about' command
  "ascii": // ascii art to display
  "social": {
    "github": // your handle
    "linkedin": // your handle
  },
  "email": // your email
  "ps1_hostname": "liveterm" // hostname in prompt
  "ps1_username": "visitor", // username in prompt
  "resume_url": "../resume.pdf", // path to your resume
  "non_terminal_url": "W",
  "colors": {
    "light": {
      ...
    },
    "dark": {
      ... // you can use existing templates in themes.json or use your own!
    }
  }
}

必要に応じて自由に変更してください。

テーマ

にはいくつかの事前設定されたテーマがあり、の色を好きなテーマ

themes.json
の色に置き換えることができ
config.json
ます!テーマは、このWebサイトのテーマに基づいています。

テーマのプレビューを改善するには、

demo
フォルダー内の画像をチェックアウトしてください。

ファビコン

ファビコンは

public/
、Webサイトにアップロードする可能性のある他のファイルとともににあります。このWebサイトを使用してファビコンを生成しました。

バナー

コマンドの出力を変更することもできます

banner
。これを行うには、生成したバナーをに貼り付けるだけです
src/utils/bin/commands.ts
。このウェブサイトを使用してバナーを作成しました。

高度な構成

ページをさらにカスタマイズしたい場合は、ソースコードをお好みに合わせて変更してください。

🌐Vercelにデプロイ

Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成者が提供するVercelプラットフォームを使用することです

vercel
cliをインストールして、ここの指示に従うことができます。

githubアカウントをvercelに接続して、vercelにgithubリポジトリを自動的にデプロイさせることもできます。

クレジット

M4TT72の素晴らしいターミナルに基づいています。