first commit

This commit is contained in:
wandoubaba 2024-11-03 12:26:45 +08:00
commit 57afa11d29
13 changed files with 2917 additions and 0 deletions

5
.env Normal file
View File

@ -0,0 +1,5 @@
IMAGE_NAME=vitepressbook
IMAGE_TAG=latest
CONTAINER_NAME=vitepressbook
CONTAINER_PORT=7001
HOST_PORT=7001

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
docs/.vitepress/dist
node_modules
!.gitignore

10
Dockerfile Normal file
View File

@ -0,0 +1,10 @@
# 使用指定的基础镜像
FROM quay.io/wandoubaba517/nginx:1.27
# 将本地的 docs/.vitepress/dist/ 目录下的所有内容复制到 nginx 的站点根目录
COPY docs/.vitepress/dist/ /usr/share/nginx/html/
# 将本地的 nginx 目录内容复制到容器内的 /etc/nginx/ 目录
COPY nginx/ /etc/nginx/
WORKDIR /usr/share/nginx/html

65
README.md Normal file
View File

@ -0,0 +1,65 @@
# 可以用docker一键启动的 VitePress 文档工程
本项目提供了一种简单的方式来容器化 VitePress 文档网站。通过使用 Docker 和一些辅助脚本,您可以方便地构建、管理和部署您的文档项目。
## 介绍
本工程可以自动将VitePress生成的静态站点打包到docker镜像内包括自定义的nginx配置文件当镜像构建成功后可以直接分发到目标主机不需要携带任何额外的主机文件。
## 系统依赖
- docker
- nodenpm、npx
## 项目结构
- `server.sh`:用于管理 Docker 容器的脚本。
- `build.sh`:用于构建 Docker 镜像的脚本。
- `Dockerfile`:定义了 Docker 镜像的构建过程。
- `.env`:环境变量配置文件,用于存储容器和镜像的相关信息。
## 功能介绍
### server.sh
`server.sh` 脚本用于管理 VitePress 文档网站的 Docker 容器。它支持以下操作:
- **start**:启动 VitePress 文档容器,如果容器已存在且正在运行,则会提示相应消息。
- **stop**:停止并删除正在运行的 VitePress 文档容器。
- **restart**:重启容器,包括构建新的镜像和替换容器。
- **clear**:清理容器及其所有同名镜像,执行前会请求用户确认。
#### 使用方法
```bash
./server.sh start # 启动容器
./server.sh stop # 停止并删除容器
./server.sh restart # 构建新镜像并重启容器
./server.sh clear # 清理容器和所有同名镜像,需确认
```
### build.sh
`build.sh` 脚本用于构建 `Docker` 镜像。它读取 `Dockerfile` 并根据定义的步骤构建出适用于 `VitePress` 文档的网站镜像。该脚本在开始时会检查必要的文件和依赖环境,确保镜像构建的成功。
### Dockerfile
`Dockerfile` 用于定义 `Docker` 镜像的结构和行为。它指定了基础镜像、安装依赖、复制源代码以及设置启动命令等步骤。该文件是构建 `VitePress` 镜像的基础,`build.sh` 会利用它来生成最终镜像。
### .env 文件
`.env` 文件用于存储环境变量,包括容器名称、镜像名称和标记等。通过在 `server.sh``build.sh` 脚本中加载这些变量,可以灵活管理镜像和容器信息。例如,您可以在 `.env` 文件中定义以下变量:
```dotenv
CONTAINER_NAME=my-vitepress-docs
IMAGE_NAME=my-vitepress-image
IMAGE_TAG=latest
```
这些信息在容器管理和镜像构建过程中被引用,以确保操作一致性。
## 总结
本项目通过脚本和 Docker 自动化了 VitePress 文档的管理、构建和部署过程,使得文档开发的流程更加高效。您只需根据提供的使用说明即可轻松启动和管理您的文档项目。
如有任何问题,欢迎提问或提交问题反馈。

35
build.sh Executable file
View File

@ -0,0 +1,35 @@
#!/bin/bash
# 加载 .env 文件里的变量
export $(grep -v '^#' .env | xargs)
# 每次构建前执行 npx 打包
echo "开始执行 npx 打包..."
npx vitepress build docs # 请根据你的项目调整这个命令
if [ $? -ne 0 ]; then
echo "npx 打包失败,终止构建镜像。"
exit 1
fi
# 构建新的镜像
echo "构建新的镜像: $IMAGE_NAME:$IMAGE_TAG"
docker build -t $IMAGE_NAME:$IMAGE_TAG .
if [ $? -ne 0 ]; then
echo "镜像构建失败。"
exit 1
fi
echo "镜像构建成功: $IMAGE_NAME:$IMAGE_TAG"
# 清理镜像:删除名称为 $IMAGE_NAME 且标签不是 $IMAGE_TAG 的旧镜像
echo "清理旧镜像..."
OLD_IMAGES=$(docker images --filter=reference="$IMAGE_NAME:*" --format '{{.Repository}}:{{.Tag}}' | grep -v "$IMAGE_NAME:$IMAGE_TAG")
if [ -n "$OLD_IMAGES" ]; then
echo "删除以下旧镜像:"
echo "$OLD_IMAGES"
# 删除旧镜像
echo "$OLD_IMAGES" | xargs docker rmi -f
fi

View File

@ -0,0 +1,28 @@
import { defineConfig } from 'vitepress'
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "VitePress Book",
description: "A VitePress Site",
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Home', link: '/' },
{ text: 'Examples', link: '/markdown-examples' }
],
sidebar: [
{
text: 'Examples',
items: [
{ text: 'Markdown Examples', link: '/markdown-examples' },
{ text: 'Runtime API Examples', link: '/api-examples' }
]
}
],
socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }
]
}
})

49
docs/api-examples.md Normal file
View File

@ -0,0 +1,49 @@
---
outline: deep
---
# Runtime API Examples
This page demonstrates usage of some of the runtime APIs provided by VitePress.
The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
```md
<script setup>
import { useData } from 'vitepress'
const { theme, page, frontmatter } = useData()
</script>
## Results
### Theme Data
<pre>{{ theme }}</pre>
### Page Data
<pre>{{ page }}</pre>
### Page Frontmatter
<pre>{{ frontmatter }}</pre>
```
<script setup>
import { useData } from 'vitepress'
const { site, theme, page, frontmatter } = useData()
</script>
## Results
### Theme Data
<pre>{{ theme }}</pre>
### Page Data
<pre>{{ page }}</pre>
### Page Frontmatter
<pre>{{ frontmatter }}</pre>
## More
Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

25
docs/index.md Normal file
View File

@ -0,0 +1,25 @@
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home
hero:
name: "VitePress Book"
text: "A VitePress Site"
tagline: My great project tagline
actions:
- theme: brand
text: Markdown Examples
link: /markdown-examples
- theme: alt
text: API Examples
link: /api-examples
features:
- title: Feature A
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
- title: Feature B
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
- title: Feature C
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
---

85
docs/markdown-examples.md Normal file
View File

@ -0,0 +1,85 @@
# Markdown Extension Examples
This page demonstrates some of the built-in markdown extensions provided by VitePress.
## Syntax Highlighting
VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
**Input**
````md
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
````
**Output**
```js{4}
export default {
data () {
return {
msg: 'Highlighted!'
}
}
}
```
## Custom Containers
**Input**
```md
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::
```
**Output**
::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::
## More
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

50
nginx/conf.d/default.conf Normal file
View File

@ -0,0 +1,50 @@
server {
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
listen 7001;
listen [::]:7001;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
# try_files $uri $uri.html $uri/ =404;
}
error_page 404 /404.html;
error_page 403 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}

2413
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

10
package.json Normal file
View File

@ -0,0 +1,10 @@
{
"devDependencies": {
"vitepress": "^1.4.3"
},
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
}
}

139
server.sh Executable file
View File

@ -0,0 +1,139 @@
#!/bin/bash
# 加载 .env 文件里的变量
export $(grep -v '^#' .env | xargs)
# 函数:检查容器是否存在并返回状态
check_container() {
if [ "$(docker ps -q -f name=$CONTAINER_NAME)" ]; then
return 0 # 容器正在运行
elif [ "$(docker ps -aq -f name=$CONTAINER_NAME)" ]; then
return 1 # 容器存在但未运行
else
return 2 # 容器不存在
fi
}
# 函数:检查镜像是否存在并返回状态
check_image() {
if [ "$(docker images -q $IMAGE_NAME:$IMAGE_TAG)" ]; then
return 0 # 镜像存在
else
return 1 # 镜像不存在
fi
}
# 函数:启动容器
start_container() {
check_container
case $? in
0)
echo "容器 $CONTAINER_NAME 已存在并正在运行。"
;;
1)
echo "容器 $CONTAINER_NAME 已存在,但未运行,尝试启动..."
docker start $CONTAINER_NAME
if [ $? -eq 0 ]; then
echo "容器 $CONTAINER_NAME 已启动。"
else
echo "启动容器 $CONTAINER_NAME 失败。"
exit 1
fi
;;
2)
echo "容器 $CONTAINER_NAME 不存在,检查镜像..."
check_image
if [ $? -ne 0 ]; then
echo "镜像不存在: $IMAGE_NAME:$IMAGE_TAG,开始构建镜像..."
./build.sh
if [ $? -ne 0 ]; then
echo "镜像构建失败,终止操作。"
exit 1
fi
else
echo "镜像已存在: $IMAGE_NAME:$IMAGE_TAG,直接启动容器。"
fi
echo "启动新的容器..."
docker run -d --name $CONTAINER_NAME -p $HOST_PORT:$CONTAINER_PORT $IMAGE_NAME:$IMAGE_TAG
if [ $? -eq 0 ]; then
echo "容器 $CONTAINER_NAME 已启动,已映射 $HOST_PORT 端口。"
else
echo "启动容器 $CONTAINER_NAME 失败,请检查错误信息。"
exit 1
fi
;;
esac
}
# 函数:停止并删除容器
stop_container() {
if check_container; then
echo "停止并删除容器 $CONTAINER_NAME..."
docker stop $CONTAINER_NAME
docker rm $CONTAINER_NAME
echo "容器 $CONTAINER_NAME 已停止并删除。"
else
echo "容器 $CONTAINER_NAME 不存在。"
fi
}
# 函数:清理容器和所有同名镜像
clear_container() {
read -p "你确定要清理容器 $CONTAINER_NAME 和所有同名镜像吗?(y/n): " choice
if [[ "$choice" != "y" ]]; then
echo "清理操作已取消。"
return
fi
stop_container
echo "删除所有同名镜像..."
OLD_IMAGES=$(docker images --filter=reference="$IMAGE_NAME:*" --format '{{.Repository}}:{{.Tag}}')
if [ -n "$OLD_IMAGES" ]; then
echo "删除以下镜像:"
echo "$OLD_IMAGES"
echo "$OLD_IMAGES" | xargs docker rmi -f
else
echo "没有找到同名镜像。"
fi
}
# 函数:重启容器
restart_container() {
echo "开始构建新的镜像..."
./build.sh
if [ $? -ne 0 ]; then
echo "镜像构建失败,无法重启容器。"
exit 1
fi
stop_container
start_container
}
# 确保参数存在
if [ "$#" -ne 1 ]; then
echo "使用方法: $0 start|stop|restart|clear"
exit 1
fi
# 根据参数执行相应的操作
case "$1" in
start)
start_container
;;
stop)
stop_container
;;
restart)
restart_container
;;
clear)
clear_container
;;
*)
echo "无效参数: $1"
echo "使用方法: $0 start|stop|restart|clear"
exit 1
;;
esac