refactor: docs files struct

2025-05-11 02:15:48 +02:00 · 2023-05-05 13:43:04 +08:00 · 2023-05-05 13:43:04 +08:00 · 82704733a4
commit 82704733a4
parent 1ee5700aa0
29 changed files with 1830 additions and 376 deletions
--- a/docs/.gitignore
+++ b/docs/.gitignore
@ -0,0 +1,4 @@
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+.pnp.*
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@ -0,0 +1,103 @@
+import {defineConfig} from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+
+function thisYear() {
+    return new Date().getFullYear()
+}
+
+export default defineConfig({
+    lang: 'en-US',
+    title: 'Nginx UI',
+    description: 'Yet another Nginx Web UI',
+
+    lastUpdated: true,
+
+    locales: {
+        root: {
+            label: 'English',
+            lang: 'en'
+        },
+        zh_CN: {
+            label: '简体中文',
+            lang: 'zh_CN'
+        }
+    },
+
+    themeConfig: {
+        // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            {text: 'Home', link: '/'},
+            {text: 'Guide', link: '/guide/about'},
+            {text: 'Demo', link: 'https://demo.nginxui.com'}
+        ],
+
+        sidebar: sidebar(),
+
+        editLink: {
+            pattern: 'https://github.com/0xJacky/nginx-ui/edit/master/frontend/docs/:path'
+        },
+
+        search: {
+            provider: 'local'
+        },
+
+        footer: {
+            message: 'Released under the AGPL-3.0 License.',
+            copyright: 'Copyright © 2021-' + thisYear() + ' Nginx UI Team'
+        },
+
+        socialLinks: [
+            {icon: 'github', link: 'https://github.com/0xJacky/nginx-ui'}
+        ]
+    }
+})
+
+function sidebar() {
+    return {
+        '/guide/': [
+            {
+                text: 'Introduction',
+                collapsed: false,
+                items: [
+                    {text: 'What is Nginx UI?', link: '/guide/about'},
+                    {text: 'Getting Started', link: '/guide/getting-started'},
+                    {text: 'Nginx Proxy Example', link: '/guide/nginx-proxy-example'},
+                    {text: 'Contributing', link: '/guide/contributing'},
+                    {text: 'License', link: '/guide/license'}
+                ]
+            },
+            {
+                text: 'Configuration',
+                collapsed: false,
+                items: [
+                    {text: 'Server', link: '/guide/config-server'},
+                    {text: 'Nginx Log', link: '/guide/config-nginx-log'},
+                    {text: 'Open AI', link: '/guide/config-openai'}
+                ]
+            }
+        ],
+        '/zh_CN/guide/': [
+            {
+                text: '介绍',
+                collapsed: false,
+                items: [
+                    {text: '何为 Nginx UI?', link: '/zh_CN/guide/about'},
+                    {text: '即刻开始', link: '/zh_CN/guide/getting-started'},
+                    {text: 'Nginx 代理示例', link: '/zh_CN/guide/nginx-proxy-example'},
+                    {text: '贡献代码', link: '/zh_CN/guide/contributing'},
+                    {text: '开源协议', link: '/zh_CN/guide/license'}
+                ]
+            },
+            {
+                text: '配置',
+                collapsed: false,
+                items: [
+                    {text: '服务端', link: '/zh_CN/guide/config-server'},
+                    {text: 'Nginx 日志', link: '/zh_CN/guide/config-nginx-log'},
+                    {text: 'Open AI', link: '/zh_CN/guide/config-openai'}
+                ]
+            }
+        ]
+    }
+}
--- a/docs/guide/about.md
+++ b/docs/guide/about.md
@ -0,0 +1,79 @@
+<script setup>
+import { VPTeamMembers } from 'vitepress/theme'
+
+const members = [
+  {
+    avatar: 'https://www.github.com/0xJacky.png',
+    name: '0xJacky',
+    title: 'Creator',
+    links: [
+      { icon: 'github', link: 'https://github.com/0xJacky' },
+    ]
+  },
+{
+    avatar: 'https://www.github.com/Hintay.png',
+    name: 'Hintay',
+    title: 'Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/Hintay' },
+    ]
+  },
+]
+</script>
+
+# What is Nginx UI?
+
+![Dashboard](/dashboard_en.png)
+
+Nginx UI is a comprehensive web-based interface designed to simplify the management and configuration of Nginx servers.
+It offers real-time server statistics, AI-powered ChatGPT assistance, one-click deployment, automatic renewal of Let's
+Encrypt certificates, and user-friendly editing tools for website configurations. Additionally, Nginx UI provides
+features such as online access to Nginx logs, automatic testing and reloading of configuration files, a web terminal,
+dark mode, and responsive web design. Built with Go and Vue, Nginx UI ensures a seamless and efficient experience for
+managing your Nginx server.
+
+## Our Team
+
+<VPTeamMembers size="small" :members="members" />
+
+## Demo
+
+URL：[https://demo.nginxui.com](https://demo.nginxui.com)
+
+- Username：admin
+- Password：admin
+
+## Features
+
+- Online statistics for server indicators such as CPU usage, memory usage, load average, and disk usage.
+- Online ChatGPT Assistant
+- One-click deployment and automatic renewal Let's Encrypt certificates.
+- Online editing websites configurations with our self-designed **NgxConfigEditor** which is a user-friendly block
+  editor for nginx configurations or **Ace Code Editor** which supports highlighting nginx configuration syntax.
+- Online view Nginx logs
+- Written in Go and Vue, distribution is a single executable binary.
+- Automatically test configuration file and reload nginx after saving configuration.
+- Web Terminal
+- Dark Mode
+- Responsive Web Design
+
+## Internationalization
+
+- English
+- Simplified Chinese
+- Traditional Chinese
+
+We welcome translations into any language.
+
+## Built With
+
+- [The Go Programming Language](https://go.dev)
+- [Gin Web Framework](https://gin-gonic.com)
+- [GORM](http://gorm.io)
+- [Vue 3](https://v3.vuejs.org)
+- [Vite](https://vitejs.dev)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Ant Design Vue](https://antdv.com)
+- [vue3-gettext](https://github.com/jshmrtn/vue3-gettext)
+- [vue3-ace-editor](https://github.com/CarterLi/vue3-ace-editor)
+- [Gonginx](https://github.com/tufanbarisyildirim/gonginx)
--- a/docs/guide/config-nginx-log.md
+++ b/docs/guide/config-nginx-log.md
@ -0,0 +1,50 @@
+# Nginx Log
+
+Nginx logs are essential for monitoring, troubleshooting, and maintaining your web server. They provide valuable
+insights into server performance, user behavior, and potential issues. In this section, we will discuss the two primary
+types of logs: access logs and error logs.
+
+For Nginx-UI Docker users who are upgrading from v1.5.2 or earlier versions, it is crucial to add separate `access_log`
+and `error_log` directives in your `nginx.conf` before configuring the `app.ini`.
+
+In the Nginx-UI container, `/var/log/nginx/access.log` is a symlink pointing to `/dev/stdout`,
+and `/var/log/nginx/error.log`
+is a symlink pointing to `/dev/stderr`. This setup allows you to view both the Nginx and Nginx-UI logs using the `docker
+logs nginx-ui` command. However, these two devices do not support the tail command, so it is necessary to use additional
+log files to record Nginx logs.
+
+Example:
+
+```nginx
+error_log /var/log/nginx/error.log notice;
+error_log /var/log/nginx/error.local.log notice;
+
+http {
+...
+    access_log /var/log/nginx/access.log main;
+    access_log /var/log/nginx/access.local.log main;
+...
+}
+```
+
+Additionally, set nginx access log and error log path in `app.ini` and restart nginx-ui.
+
+Example:
+
+```ini
+[nginx_log]
+AccessLogPath = /var/log/nginx/access.local.log
+ErrorLogPath = /var/log/nginx/error.local.log
+```
+
+## AccessLogPath
+
+- Type: `string`
+
+This option is used to set the path of nginx access log for Nginx UI, so we can view the log content online.
+
+## ErrorLogPath
+
+- Type: `string`
+
+This option is used to set the path of nginx error log for Nginx UI, so we can view the log content online.
--- a/docs/guide/config-openai.md
+++ b/docs/guide/config-openai.md
@ -0,0 +1,32 @@
+# Open AI
+
+This section is for setting up ChatGPT configurations. Please be aware that we do not check the accuracy of the
+information you provide. If the configuration is incorrect, it might cause API request failures, making the ChatGPT
+assistant unusable.
+
+## BaseUrl
+
+- Type: `string`
+
+This option is used to set the base url of the api of Open AI, leave it blank if you do not need to change the url.
+
+## Token
+
+- Type: `string`
+
+This option is used to set the token of the api of Open AI.
+
+## Proxy
+
+- Type: `string`
+
+This option is used to configure the proxy for OpenAI's API. If you are unable to access OpenAI's API in your country or
+region, you can use an HTTP proxy and set this option to the corresponding URL.
+
+## Model
+
+- Type: `string`
+- Default: `gpt-3.5-turbo`
+
+This option is used to set the ChatGPT model. If your account has the privilege to access the gpt-4 model, you can
+configure this option accordingly.
--- a/docs/guide/config-server.md
+++ b/docs/guide/config-server.md
@ -0,0 +1,79 @@
+# Server
+
+The server section of the Nginx UI configuration deals with various settings that control the behavior and operation of
+the Nginx UI server. In this section, we will discuss the available options, their default values, and their purpose.
+
+## HttpPort
+
+- Type: `int`
+- Default: `9000`
+
+Nginx UI server listen port. This option is used to configure the port on which the Nginx UI server listens for incoming
+HTTP requests. Changing the default port can be useful for avoiding port conflicts or enhancing security.
+
+## RunMode
+
+- Type: `string`
+- Supported value: `release`, `debug`
+
+::: tip
+At present, we have not yet adapted to this option, and there will be no significant differences between release and
+debug in terms of usage.
+:::
+
+## HTTPChallengePort
+
+- Type: `int`
+- Default: `9180`
+
+This option is used to set the port for backend listening in the HTTP01 challenge mode when obtaining Let's Encrypt
+certificates. The HTTP01 challenge is a domain validation method used by Let's Encrypt to verify that you control the
+domain for which you're requesting a certificate.
+
+## Database
+
+- Type: `string`
+- Default: `database`
+
+This option is used to set the name of the sqlite database used by Nginx UI to store its data.
+
+## StartCmd
+
+- Type: `string`
+- Default: `login`
+
+This option is used to set the start command of the web terminal.
+
+::: warning
+For security reason, we use `login` as the start command, so you have to log in via the default authentication method of
+the Linux. If you don't want to enter your username and password for verification every time you access the web
+terminal, please set it to `bash` or `zsh` (if installed).
+:::
+
+## PageSize
+
+- Type: `int`
+- Default: 10
+
+This option is used to set the page size of list pagination in the Nginx UI. Adjusting the page size can help in
+managing large amounts of data more effectively, but a too large number can increase the load on the server.
+
+## CADir
+
+- Type: `string`
+
+When applying for a Let's Encrypt certificate, we use the default CA address of Let's Encrypt. If you need to debug or
+obtain certificates from other providers, you can set CADir to their address.
+
+::: tip
+Please note that the address provided by
+CADir needs to comply with the `RFC 8555` standard.
+:::
+
+## GithubProxy
+
+- Type: `string`
+- Suggestion: `https://ghproxy.com/`
+
+For users in mainland China who may experience difficulties downloading resources from Github, this option allows them
+to set a proxy for github.com to improve accessibility.
--- a/docs/guide/contributing.md
+++ b/docs/guide/contributing.md
@ -0,0 +1,13 @@
+# Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any
+contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also
+simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@ -0,0 +1,171 @@
+# Getting Started
+
+## Before Use
+
+The Nginx UI follows the Debian web server configuration file standard. Created site configuration files will be placed
+in the `sites-available` folder that under the Nginx configuration folder (auto-detected). The configuration files for
+an enabled site will create a soft link to the `sites-enabled` folder. You may need to adjust the way the configuration
+files are organised.
+
+For non-Debian (and Ubuntu) systems, you may need to change the contents of the `nginx.conf` configuration file to the
+Debian style as shown below.
+
+```nginx
+http {
+	# ...
+	include /etc/nginx/conf.d/*.conf;
+	include /etc/nginx/sites-enabled/*;
+}
+```
+
+For more
+information: [debian/conf/nginx.conf](https://salsa.debian.org/nginx-team/nginx/-/blob/master/debian/conf/nginx.conf#L59-L60)
+
+## Installation
+
+Nginx UI is available on the following platforms:
+
+- Mac OS X 10.10 Yosemite and later (amd64 / arm64)
+- Linux 2.6.23 and later (x86 / amd64 / arm64 / armv5 / armv6 / armv7)
+    - Including but not limited to Debian 7 / 8, Ubuntu 12.04 / 14.04 and later, CentOS 6 / 7, Arch Linux
+- FreeBSD
+- OpenBSD
+- Dragonfly BSD
+- Openwrt
+
+You can visit [latest release](https://github.com/0xJacky/nginx-ui/releases/latest) to download the latest distribution,
+or just use [installation scripts for Linux](#script-for-linux).
+
+## Usage
+
+In the first runtime of Nginx UI, please visit `http://<your_server_ip>:<listen_port>/install`
+in your browser to complete the follow-up configurations.
+
+### From Executable
+
+**Run Nginx UI in Terminal**
+
+```shell
+nginx-ui -config app.ini
+```
+
+Press `Control+C` in the terminal to exit Nginx UI.
+
+**Run Nginx UI in Background**
+
+```shell
+nohup ./nginx-ui -config app.ini &
+```
+
+Stop Nginx UI with the follow commond.
+
+```shell
+kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
+```
+
+### With Systemd
+
+If you are using the [installation script for Linux](#script-for-linux), the Nginx UI will be installed as `nginx-ui`
+service in systemd. Please use the `systemctl` command to control it.
+
+**Start Nginx UI**
+
+```shell
+systemctl start nginx-ui
+```
+
+**Stop Nginx UI**
+
+```shell
+systemctl stop nginx-ui
+```
+
+**Restart Nginx UI**
+
+```shell
+systemctl restart nginx-ui
+```
+
+### With Docker
+
+Our docker image [uozi/nginx-ui:latest](https://hub.docker.com/r/uozi/nginx-ui) is based on the latest nginx image and
+can be used to replace the Nginx on the host. By publishing the container's port 80 and 443 to the host,
+you can easily make the switch.
+
+#### Note
+
+1. When using this container for the first time, ensure that the volume mapped to /etc/nginx is empty.
+2. If you want to host static files, you can map directories to container.
+
+**Docker Deploy Example**
+
+```bash
+docker run -dit \
+  --name=nginx-ui \
+  --restart=always \
+  -e TZ=Asia/Shanghai \
+  -v /mnt/user/appdata/nginx:/etc/nginx \
+  -v /mnt/user/appdata/nginx-ui:/etc/nginx-ui \
+  -v /var/www:/var/www \
+  -p 8080:80 -p 8443:443 \
+  uozi/nginx-ui:latest
+```
+
+## Manual Build
+
+On platforms that do not have an official build version, they can be built manually.
+
+### Prerequisites
+
+- Make
+
+- Golang 1.19+
+
+- node.js 18+
+
+  ```shell
+  npx browserslist@latest --update-db
+  ```
+
+### Build Frontend
+
+Please execute the following command in `frontend` directory.
+
+```shell
+yarn install
+yarn build
+```
+
+### Build Backend
+
+Please build the frontend first, and then execute the following command in the project root directory.
+
+```shell
+go build -o nginx-ui -v main.go
+```
+
+## Script for Linux
+
+### Basic Usage
+
+**Install and Upgrade**
+
+```shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install
+```
+
+The default listening port is `9000`, and the default HTTP Challenge port is `9180`.
+If there is a port conflict, please modify `/usr/local/etc/nginx-ui/app.ini` manually,
+then use `systemctl restart nginx-ui` to reload the Nginx UI service.
+
+**Remove Nginx UI, except configuration and database files**
+
+```shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
+```
+
+### More Usage
+
+````shell
+bash <(curl -L -s https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
+````
--- a/docs/guide/license.md
+++ b/docs/guide/license.md
@ -0,0 +1,6 @@
+# License
+
+This project is provided under a GNU Affero General Public License v3.0 license that can be found in
+the [LICENSE](https://github.com/0xJacky/nginx-ui/blob/master/LICENSE) file. By using, distributing, or contributing to
+this project, you agree to the terms and
+conditions of this license.
--- a/docs/guide/nginx-proxy-example.md
+++ b/docs/guide/nginx-proxy-example.md
@ -0,0 +1,62 @@
+# Example of Nginx Reverse Proxy
+
+In this guide, we'll walk you through the process of configuring an Nginx server to redirect HTTP traffic to HTTPS and
+set up a reverse proxy for the Nginx UI running on `http://127.0.0.1:9000/`.
+
+```nginx
+server {
+    listen          80;
+    listen          [::]:80;
+
+    server_name     <your_server_name>;
+    rewrite ^(.*)$  https://$host$1 permanent;
+}
+
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    ''      close;
+}
+
+server {
+    listen  443       ssl http2;
+    listen  [::]:443  ssl http2;
+
+    server_name         <your_server_name>;
+
+    ssl_certificate     /path/to/ssl_cert;
+    ssl_certificate_key /path/to/ssl_cert_key;
+
+    location / {
+        proxy_set_header    Host                $host;
+        proxy_set_header    X-Real-IP           $remote_addr;
+        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+        proxy_set_header    X-Forwarded-Proto   $scheme;
+        proxy_http_version  1.1;
+        proxy_set_header    Upgrade             $http_upgrade;
+        proxy_set_header    Connection          $connection_upgrade;
+        proxy_pass          http://127.0.0.1:9000/;
+    }
+}
+```
+
+The configuration file consists of two Nginx server blocks. The first server block listens on port 80 (HTTP) and
+redirects all incoming HTTP requests to HTTPS. It also listens for IPv6 addresses. Replace `<your_server_name>` with
+your
+server name.
+
+The second server block listens on port 443 (HTTPS) along with the HTTP/2 protocol. Again, it listens for IPv6 addresses
+as well. Replace `<your_server_name>` with your server name and the paths for the SSL certificate and key with
+`/path/to/ssl_cert` and `/path/to/ssl_cert_key`.
+
+::: warning
+We might need to remove `http2` in `listen 443 ssl http2;` and `listen  [::]:443 ssl http2;` to avoid the warning in
+Nginx v1.24+ versions.
+:::
+
+Additionally, the configuration includes a map directive for setting the value of the `$connection_upgrade` variable
+based on the $http_upgrade variable, which is used for WebSocket connections.
+
+Within the second server block, the location `/` section contains proxy settings to forward requests to the local port
+`9000`. The proxy settings also include a number of headers for proper handling of the forwarded requests, such
+as `Host`,
+`X-Real-IP`, `X-Forwarded-For`, `X-Forwarded-Proto`, `Upgrade`, and `Connection`.
--- a/docs/index.md
+++ b/docs/index.md
@ -0,0 +1,53 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+title: Nginx UI
+titleTemplate: Yet another Nginx Web UI
+
+hero:
+    name: "Nginx UI"
+    text: "Yet another Nginx Web UI"
+    tagline: Simple, powerful, and fast.
+    actions:
+        -   theme: brand
+            text: Get Started
+            link: /guide/about
+        -   theme: alt
+            text: View on Github
+            link: https://github.com/0xJacky/nginx-ui
+
+features:
+    -   icon: 📊
+        title: Online Statistics for Server Indicators
+        details: Monitor CPU usage, memory usage, load average, and disk usage in real-time.
+    -   icon: 💬
+        title: Online ChatGPT Assistant
+        details: Get assistance from an AI-powered ChatGPT directly within the platform.
+    -   icon: 🖱️
+        title: One-Click Deployment and Automatic Renewal
+        details: Easily deploy and auto-renew Let's Encrypt certificates with just one click.
+    -   icon: 🛠️
+        title: Online Editing Websites Configurations
+        details: Edit configurations using our NgxConfigEditor block editor or Ace Code Editor with nginx syntax highlighting.
+    -   icon: 📜
+        title: Online View Nginx Logs
+        details: Access and view your Nginx logs directly online.
+    -   icon: 💻
+        title: Written in Go and Vue
+        details: The platform is built with Go and Vue, and distributed as a single executable binary.
+    -   icon: 🔄
+        title: Automatically Test and Reload Configurations
+        details: Test configuration files and reload nginx automatically after saving changes.
+    -   icon: 🖥️
+        title: Web Terminal
+        details: Access a web-based terminal for easy management.
+    -   icon: 🌙
+        title: Dark Mode
+        details: Enable dark mode for a comfortable user experience.
+    -   icon: 📱
+        title: Responsive Web Design
+        details: Enjoy a seamless experience on any device with responsive web design.
+
+---
+
--- a/docs/package.json
+++ b/docs/package.json
@ -0,0 +1,12 @@
+{
+    "name": "docs",
+    "packageManager": "yarn@3.5.0",
+    "scripts": {
+        "docs:dev": "vitepress dev",
+        "docs:build": "vitepress build",
+        "docs:preview": "vitepress preview"
+    },
+    "dependencies": {
+        "vitepress": "^1.0.0-alpha.75"
+    }
+}
--- a/docs/public/dashboard_en.png
+++ b/docs/public/dashboard_en.png
--- a/docs/public/dashboard_zh_CN.png
+++ b/docs/public/dashboard_zh_CN.png
--- a/docs/public/dashboard_zh_TW.png
+++ b/docs/public/dashboard_zh_TW.png
--- a/docs/public/favicon.ico
+++ b/docs/public/favicon.ico
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
--- a/docs/zh_CN/guide/about.md
+++ b/docs/zh_CN/guide/about.md
@ -0,0 +1,76 @@
+<script setup>
+import { VPTeamMembers } from 'vitepress/theme'
+
+const members = [
+  {
+    avatar: 'https://www.github.com/0xJacky.png',
+    name: '0xJacky',
+    title: '创始人',
+    links: [
+      { icon: 'github', link: 'https://github.com/0xJacky' },
+    ]
+  },
+{
+    avatar: 'https://www.github.com/Hintay.png',
+    name: 'Hintay',
+    title: '开发者',
+    links: [
+      { icon: 'github', link: 'https://github.com/Hintay' },
+    ]
+  },
+]
+</script>
+
+# 何为 Nginx UI?
+
+![Dashboard](/dashboard_zh_CN.png)
+
+Nginx UI 是一个全新的 Nginx 网络管理界面，旨在简化 Nginx 服务器的管理和配置。它提供实时服务器统计数据、ChatGPT
+助手、一键部署、Let's Encrypt 证书的自动续签以及用户友好的网站配置编辑工具。此外，Nginx UI 还提供了在线访问 Nginx
+日志、配置文件的自动测试和重载、网络终端、深色模式和自适应网页设计等功能。Nginx UI 采用 Go 和 Vue 构建，确保在管理 Nginx
+服务器时提供无缝高效的体验。
+
+## 我们的团队
+
+<VPTeamMembers size="small" :members="members" />
+
+## 在线预览
+
+网址：[https://demo.nginxui.com](https://demo.nginxui.com)
+
+- 用户名：admin
+- 密码：admin
+
+## 特色
+
+- 在线查看服务器 CPU、内存、系统负载、磁盘使用率等指标
+- 在线 ChatGPT 助理
+- 一键申请和自动续签 Let's encrypt 证书
+- 在线编辑 Nginx 配置文件，编辑器支持 Nginx 配置语法高亮
+- 在线查看 Nginx 日志
+- 使用 Go 和 Vue 开发，发行版本为单个可执行的二进制文件
+- 保存配置后自动测试配置文件并重载 Nginx
+- 基于网页浏览器的高级命令行终端
+- 支持深色模式
+- 自适应网页设计
+
+## 国际化
+
+- 英语
+- 简体中文
+- 繁体中文
+
+我们欢迎您将项目翻译成任何语言。
+
+## 构建基于
+
+- [The Go Programming Language](https://go.dev)
+- [Gin Web Framework](https://gin-gonic.com)
+- [GORM](http://gorm.io)
+- [Vue 3](https://v3.vuejs.org)
+- [Vite](https://vitejs.dev)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Ant Design Vue](https://antdv.com)
+- [vue3-gettext](https://github.com/jshmrtn/vue3-gettext)
+- [vue3-ace-editor](https://github.com/CarterLi/vue3-ace-editor)
+- [Gonginx](https://github.com/tufanbarisyildirim/gonginx)
--- a/docs/zh_CN/guide/config-nginx-log.md
+++ b/docs/zh_CN/guide/config-nginx-log.md
@ -0,0 +1,46 @@
+# Nginx 日志
+
+Nginx 日志对于监控、排查问题和维护您的 Web 服务器至关重要。它们提供了有关服务器性能、用户行为和潜在问题的宝贵见解。在本节中，我们将讨论两种主要类型的日志：访问日志和错误日志。
+
+对于从 v1.5.2 或更早版本升级的 Nginx-UI Docker 用户，在配置 `app.ini` 之前，至关重要的是在您的 `nginx.conf`
+中添加单独的 `access_log` 和 `error_log` 指令。
+
+在 Nginx-UI 容器中，`/var/log/nginx/access.log` 是一个指向 `/dev/stdout` 的符号链接，而 `/var/log/nginx/error.log`
+是一个指向 `/dev/stderr` 的符号链接。这种设置允许您使用 `docker logs nginx-ui` 命令查看 Nginx 和 Nginx-UI 日志。然而，这两个设备不支持
+tail 命令，因此有必要使用额外的日志文件来记录 Nginx 日志。
+
+示例：
+
+```nginx
+error_log /var/log/nginx/error.log notice;
+error_log /var/log/nginx/error.local.log notice;
+
+http {
+...
+    access_log /var/log/nginx/access.log main;
+    access_log /var/log/nginx/access.local.log main;
+...
+}
+```
+
+此外，在 `app.ini` 中设置 nginx 访问日志和错误日志路径，然后重新启动 nginx-ui。
+
+示例：
+
+```ini
+[nginx_log]
+AccessLogPath = /var/log/nginx/access.local.log
+ErrorLogPath = /var/log/nginx/error.local.log
+```
+
+## AccessLogPath
+
+- 类型：`string`
+
+此选项用于为 Nginx UI 设置 Nginx 访问日志的路径，以便我们在线查看日志内容。
+
+## ErrorLogPath
+
+- 类型：`string`
+
+此选项用于为 Nginx UI 设置 Nginx 错误日志的路径，以便我们在线查看日志内容。
--- a/docs/zh_CN/guide/config-openai.md
+++ b/docs/zh_CN/guide/config-openai.md
@ -0,0 +1,30 @@
+# Open AI
+
+本节用于设置 ChatGPT 配置。请注意，我们不会检查您提供的信息的准确性。如果配置错误，可能会导致 API 请求失败，导致 ChatGPT
+助手无法使用。
+
+## BaseUrl
+
+- 类型：`string`
+
+此选项用于设置 Open AI API 的基本 URL，如果不需要更改 URL，则将其保留为空。
+
+## Token
+
+- 类型：`string`
+
+此选项用于设置 Open AI API 的令牌。
+
+## Proxy
+
+- 类型：`string`
+
+此选项用于为 OpenAI 的 API 配置代理。如果您在国家或地区无法访问 OpenAI 的 API，可以使用 HTTP 代理并将此选项设置为相应的
+URL。
+
+## Model
+
+- 类型：`string`
+- 默认值：`gpt-3.5-turbo`
+
+此选项用于设置 ChatGPT 模型。如果您的帐户有权限访问 `gpt-4` 模型，可以相应地配置此选项。
--- a/docs/zh_CN/guide/config-server.md
+++ b/docs/zh_CN/guide/config-server.md
@ -0,0 +1,71 @@
+# 服务端
+
+Nginx UI 配置的服务端部分涉及控制 Nginx UI 服务器的各种设置。在本节中，我们将讨论可用的选项、它们的默认值以及它们的目的。
+
+## HttpPort
+
+- 类型：`int`
+- 默认值：`9000`
+
+Nginx UI 服务器监听端口。此选项用于配置 Nginx UI 服务器监听传入 HTTP 请求的端口。更改默认端口对于避免端口冲突或增强安全性可能很有用。
+
+## RunMode
+
+- 类型：`string`
+- 支持的值：`release`，`debug`
+
+::: tip
+目前，我们尚未适应此选项，在使用方面，`release` 和 `debug` 之间不会有显著差异。
+:::
+
+## HTTPChallengePort
+
+- 类型：`int`
+- 默认值：`9180`
+
+在获取 Let's Encrypt 证书时，此选项用于在 HTTP01 挑战模式中设置后端监听端口。HTTP01 挑战是 Let's Encrypt
+用于验证您控制请求证书的域的域验证方法。
+
+## Database
+
+- 类型：`string`
+- 默认值：`database`
+
+此选项用于设置 Nginx UI 用于存储其数据的 sqlite 数据库的名称。
+
+## StartCmd
+
+- 类型：`string`
+- 默认值：`login`
+
+此选项用于设置 Web 终端的启动命令。
+
+::: warning
+出于安全原因，我们将启动命令设置为 `login`，因此您必须通过 Linux 的默认身份验证方法登录。如果您不想每次访问 Web
+终端时都输入用户名和密码进行验证，请将其设置为 `bash` 或 `zsh`（如果已安装）。
+:::
+
+## PageSize
+
+- 类型：`int`
+- 默认值：10
+
+此选项用于设置 Nginx UI 中列表分页的页面大小。调整页面大小有助于更有效地管理大量数据,但是过大的数量可能会增加服务器的压力。
+
+## CADir
+
+- 类型：`string`
+
+在申请 Let's Encrypt 证书时，我们使用 Let's Encrypt 的默认 CA 地址。如果您需要调试或从其他提供商获取证书，您可以将 CADir
+设置为他们的地址。
+
+::: tip
+请注意，CADir 提供的地址需要符合 `RFC 8555` 标准。
+:::
+
+## GithubProxy
+
+- 类型：`string`
+- 建议：`https://ghproxy.com/`
+
+对于可能在从 Github 下载资源时遇到困难的中国大陆用户，此选项允许他们为 github.com 设置代理，以提高可访问性。
--- a/docs/zh_CN/guide/contributing.md
+++ b/docs/zh_CN/guide/contributing.md
@ -0,0 +1,12 @@
+# 贡献
+
+贡献使开源社区成为学习、启发和创造的绝佳场所。我们**非常感谢**您所做的任何贡献。
+
+如果您有让这个项目变得更强的建议，欢迎 fork 这个仓库并创建一个 Pull Request。您也可以创建一个带有 `enhancement` （优化）标签的
+Issue。最后，不要忘记给我们的项目<del>一键三连</del>点个 Star！再次感谢！
+
+1. Fork 项目
+2. 创建您的分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交您的修改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到您的分支 (`git push origin feature/AmazingFeature`)
+5. 创建一个 Pull Request
--- a/docs/zh_CN/guide/getting-started.md
+++ b/docs/zh_CN/guide/getting-started.md
@ -0,0 +1,167 @@
+# 即刻开始
+
+## 使用前注意
+
+Nginx UI 遵循 Debian 的网页服务器配置文件标准。创建的网站配置文件将会放置于 Nginx
+配置文件夹（自动检测）下的 `sites-available` 中，启用后的网站将会创建一份配置文件软连接到 `sites-enabled`
+文件夹。您可能需要提前调整配置文件的组织方式。
+
+对于非 Debian (及 Ubuntu) 系统，您可能需要将 `nginx.conf` 配置文件中的内容修改为如下所示的 Debian 风格。
+
+```nginx
+http {
+	# ...
+	include /etc/nginx/conf.d/*.conf;
+	include /etc/nginx/sites-enabled/*;
+}
+```
+
+更多信息请参阅：[debian/conf/nginx.conf](https://salsa.debian.org/nginx-team/nginx/-/blob/master/debian/conf/nginx.conf#L59-L60)
+
+## 安装
+
+Nginx UI 可在以下平台中使用：
+
+- Mac OS X 10.10 Yosemite 及之后版本（amd64 / arm64）
+- Linux 2.6.23 及之后版本（x86 / amd64 / arm64 / armv5 / armv6 / armv7）
+    - 包括但不限于 Debian 7 / 8、Ubuntu 12.04 / 14.04 及后续版本、CentOS 6 / 7、Arch Linux
+- FreeBSD
+- OpenBSD
+- Dragonfly BSD
+- Openwrt
+
+您可以在 [最新发行 (latest release)](https://github.com/0xJacky/nginx-ui/releases/latest)
+中下载最新版本，或使用 [Linux 安装脚本](#linux-安装脚本)。
+
+## 使用方法
+
+第一次运行 Nginx UI 时，请在浏览器中访问 `http://<your_server_ip>:<listen_port>/install` 完成后续配置。
+
+#### 通过执行文件运行
+
+**在终端中运行 Nginx UI**
+
+```shell
+nginx-ui -config app.ini
+```
+
+在终端使用 `Control+C` 退出 Nginx UI。
+
+**在后台运行 Nginx UI**
+
+```shell
+nohup ./nginx-ui -config app.ini &
+```
+
+使用以下命令停止 Nginx UI。
+
+```shell
+kill -9 $(ps -aux | grep nginx-ui | grep -v grep | awk '{print $2}')
+```
+
+#### 使用 Systemd
+
+如果你使用的是[Linux 安装脚本](#linux-安装脚本)，Nginx UI 将作为 `nginx-ui` 服务安装在 systemd 中。请使用 `systemctl`
+命令控制。
+
+**启动 Nginx UI**
+
+```shell
+systemctl start nginx-ui
+```
+
+**停止 Nginx UI**
+
+```shell
+systemctl stop nginx-ui
+```
+
+**重启 Nginx UI**
+
+```shell
+systemctl restart nginx-ui
+```
+
+#### 使用 Docker
+
+您可以在 docker 中使用我们提供的 `uozi/nginx-ui:latest` [镜像](https://hub.docker.com/r/uozi/nginx-ui)
+，此镜像基于 `nginx:latest` 构建。您可以直接将其监听到 80 和 443 端口以取代宿主机上的 Nginx。
+
+注意：映射到 `/etc/nginx` 的文件夹应该为一个空目录。
+
+#### 注意
+
+1. 首次使用时，映射到 `/etc/nginx` 的目录必须为空文件夹。
+2. 如果你想要托管静态文件，可以直接将文件夹映射入容器中。
+
+**Docker 部署示例**
+
+```bash
+docker run -dit \
+  --name=nginx-ui \
+  --restart=always \
+  -e TZ=Asia/Shanghai \
+  -v /mnt/user/appdata/nginx:/etc/nginx \
+  -v /mnt/user/appdata/nginx-ui:/etc/nginx-ui \
+  -p 8080:80 -p 8443:443 \
+  uozi/nginx-ui:latest
+```
+
+## 手动构建
+
+对于没有官方构建版本的平台，可以尝试手动构建。
+
+## 依赖
+
+- Make
+
+- Golang 1.19+
+
+- node.js 18+
+
+  ```shell
+  npx browserslist@latest --update-db
+  ```
+
+## 构建前端
+
+请在 `frontend` 目录中执行以下命令。
+
+```shell
+yarn install
+make translations
+yarn build
+```
+
+## 构建后端
+
+请先完成前端编译，再回到项目的根目录执行以下命令。
+
+```shell
+go build -o nginx-ui -v main.go
+```
+
+## Linux 安装脚本
+
+## 基本用法
+
+**安装或升级**
+
+```shell
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) install -r https://ghproxy.com/
+```
+
+一键安装脚本默认设置的监听端口为 `9000`，HTTP Challenge 端口默认为 `9180`
+，如果出现端口冲突请进入 `/usr/local/etc/nginx-ui/app.ini` 修改，并使用 `systemctl restart nginx-ui` 重启 Nginx UI 服务。
+
+**卸载 Nginx UI 但保留配置和数据库文件**
+
+```shell
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) remove
+```
+
+## 更多用法
+
+````shell
+bash <(curl -L -s https://ghproxy.com/https://raw.githubusercontent.com/0xJacky/nginx-ui/master/install.sh) help
+````
--- a/docs/zh_CN/guide/license.md
+++ b/docs/zh_CN/guide/license.md
@ -0,0 +1,4 @@
+# 开源许可
+
+此项目基于 GNU Affero Public License v3.0 (AGPLv3)
+许可，请参阅 [LICENSE](https://github.com/0xJacky/nginx-ui/blob/master/LICENSE) 文件。通过使用、分发或对本项目做出贡献，表明您已同意本许可证的条款和条件。
--- a/docs/zh_CN/guide/nginx-proxy-example.md
+++ b/docs/zh_CN/guide/nginx-proxy-example.md
@ -0,0 +1,57 @@
+# Nginx 反向代理示例
+
+在本指南中，我们将引导您配置 Nginx 服务器以将 HTTP 流量重定向到 HTTPS，并为监听在 `http://127.0.0.1:9000/` 上的 Nginx UI
+设置反向代理。
+
+```nginx
+server {
+    listen          80;
+    listen          [::]:80;
+
+    server_name     <your_server_name>;
+    rewrite ^(.*)$  https://$host$1 permanent;
+}
+
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    ''      close;
+}
+
+server {
+    listen  443       ssl http2;
+    listen  [::]:443  ssl http2;
+
+    server_name         <your_server_name>;
+
+    ssl_certificate     /path/to/ssl_cert;
+    ssl_certificate_key /path/to/ssl_cert_key;
+
+    location / {
+        proxy_set_header    Host                $host;
+        proxy_set_header    X-Real-IP           $remote_addr;
+        proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
+        proxy_set_header    X-Forwarded-Proto   $scheme;
+        proxy_http_version  1.1;
+        proxy_set_header    Upgrade             $http_upgrade;
+        proxy_set_header    Connection          $connection_upgrade;
+        proxy_pass          http://127.0.0.1:9000/;
+    }
+}
+```
+
+配置文件包括两个 Nginx 服务器块。第一个服务器块侦听 80 端口（HTTP），并将所有传入的 HTTP 请求重定向到 HTTPS。它还监听 IPv6
+地址。将 `<your_server_name>` 替换为您的服务器名称。
+
+第二个服务器块监听 443 端口（HTTPS）以及 HTTP/2 协议。同样，它也监听 IPv6 地址。将 `<your_server_name>` 替换为您的服务器名称，并将
+SSL 证书和密钥的路径替换为 `/path/to/ssl_cert` 和 `/path/to/ssl_cert_key`。
+
+::: warning
+为了避免在 Nginx v1.24+ 版本中出现警告，我们需要删除 `listen 443 ssl http2;` 和 `listen  [::]:443 ssl http2;`
+中的 `http2` 指令，因为 `ssl` 指令默认支持 `http2`。
+:::
+
+此外，配置包括一个 `map` 指令，用于根据 `$http_upgrade` 变量设置 `$connection_upgrade` 变量的值，该变量用于 WebSocket 连接。
+
+在第二个服务器块中，`location /` 部分包含代理设置，将请求转发到本地端口 `9000`
+。代理设置还包括一些用于正确处理转发请求的标头，如 `Host`、`X-Real-IP`、`X-Forwarded-For`、`X-Forwarded-Proto`、`Upgrade`
+和 `Connection`。
--- a/docs/zh_CN/index.md
+++ b/docs/zh_CN/index.md
@ -0,0 +1,53 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+title: Nginx UI
+titleTemplate: Yet another Nginx Web UI
+
+hero:
+    name: "Nginx UI"
+    text: "Nginx 网络管理界面的新选择"
+    tagline: 简单、强大、高速
+    actions:
+        -   theme: brand
+            text: 即刻开始
+            link: /zh_CN/guide/about
+        -   theme: alt
+            text: 在 Github 上查看
+            link: https://github.com/0xJacky/nginx-ui
+
+features:
+    -   icon: 📊
+        title: 在线查看服务器指标
+        details: 实时监控服务器 CPU、内存、系统负载、磁盘使用率等指标。
+    -   icon: 💬
+        title: 在线 ChatGPT 助理
+        details: 在平台内直接使用 AI 强化的 ChatGPT 助手。
+    -   icon: 🖱️
+        title: 一键部署和自动续签
+        details: 一键轻松部署并自动续签 Let's Encrypt 证书。
+    -   icon: 🛠️
+        title: 在线编辑网站配置
+        details: 使用 NgxConfigEditor 区块编辑器或支持 Nginx 配置语法高亮的 Ace Code 编辑器编辑配置。
+    -   icon: 📜
+        title: 在线查看 Nginx 日志
+        details: 在线直接访问和查看 Nginx 日志。
+    -   icon: 💻
+        title: 使用 Go 和 Vue 编写
+        details: 平台使用 Go 和 Vue 构建，发行版本为单个可执行的二进制文件。
+    -   icon: 🔄
+        title: 自动测试和重载配置
+        details: 保存更改后自动测试配置文件并重载 Nginx。
+    -   icon: 🖥️
+        title: 网络终端
+        details: 轻松管理的基于网络浏览器的高级命令行终端。
+    -   icon: 🌙
+        title: 深色模式
+        details: 开启深色模式，享受舒适的用户体验。
+    -   icon: 📱
+        title: 自适应网页设计
+        details: 通过自适应网页设计在任何设备上享受无缝体验。
+
+---
+