[toc]
shuyxblog
✨ 项目介绍
基于 VitePress 构建的个人博客系统，采用自定义主题设计，提供优雅的阅读体验和丰富的功能特性。支持文章分类、标签管理、图片预览、响应式布局等现代化博客功能。
🚀 核心功能
- 自定义页面和样式：精心设计的UI界面，支持深色/浅色模式切换
- 文章管理：分类与标签双重维度组织内容
- 图片预览：点击图片可放大预览，支持键盘导航
- 响应式设计：完美适配桌面端与移动端
- 性能优化：静态页面生成，加载速度快
- SEO友好：自动生成sitemap和结构化数据
🛠️ 技术栈
- 构建工具：VitePress
- 前端框架：Vue 3
- 样式方案：CSS/SCSS
- 部署工具：GitHub Pages
代码管理
两个脚本的作用不同。
注意需要在git终端下执行下面的命令。
bash
# push脚本用于管理本地代码和远程仓库代码，以及同步的操作
./push.sh
# pushAndBuild脚本用于管理本地代码和远程仓库代码，以及同步的操作，以及构建生产版本
./pushAndBuild.sh📦 安装教程
前置要求
- Node.js ≥ 14.0.0
- npm / yarn / pnpm
安装步骤
- 克隆仓库
bash
git clone https://gitee.com/yourusername/shuyxblog.git
cd shuyxblog- 安装依赖
在项目根目录下执行以下命令安装依赖
bash
npm install
# 或
yarn install- 本地开发
在项目根目录下执行以下命令本地运行
bash
npm run dev- 构建生产版本
在项目根目录下执行以下命令构建生产版本
bash
npm run build部署说明
可以将构建后的静态文件部署到 GitHub Pages 或其他静态站点托管服务（例如Nginx、Apache等）。
📝 使用指南
创建文章
在 blogs/ 目录下创建 .md 文件，使用 Markdown 格式编写文章。
文章配置
在文章头部添加 Frontmatter 配置：
yaml
---
title: 文章标题
date: 2025-01-01
lastUpdated: 2025-01-01
description: 文章描述
categories:
- 分类1
- 分类2
tags:
- 标签1
- 标签2
---主题配置
修改 .vitepress/config.js 文件自定义博客设置，包括导航、侧边栏、页脚等。
📞 联系方式
- 作者：shuyx
- Gitee: suichenTree
🙏 鸣谢
docker 部署说明
当想将该前端页面部署到远程服务器的docker容器上时。
docker目录中包含4个文件：
sh
- ssl目录 # 该目录下需要包含证书文件，用于https访问
- Dockerfile # dockerfile文件，用于构建生产nginx镜像,并将打包产物复制到nginx静态目录，最后暴露端口
- nginx.conf # nginx配置文件，nginx容器需要的配置文件，也会被打包到nginx镜像中
- build_docker_images.sh # 构建docker镜像脚本，并将其推送到远程服务器的Docker仓库中
- docker-compose-remote.yml # 该文件主要在远程服务器中执行，用于启动nginx容器使用顺序：
- 先在项目根目录下，执行
npm run build命令，打包构建出静态文件。 - 先通过build_docker_images.sh脚本构建docker镜像文件,其中会读取nginx.conf文件，将其打包到nginx镜像中。最后将镜像文件推送到远程服务器的Docker仓库中。
- 然后将docker-compose-remote.yml文件上传到远程服务器中。
- 然后执行docker-compose-remote.yml文件，启动nginx容器。此时镜像文件已经存在远程服务器的Docker仓库中。
- 访问
https://域名 或 http://域名即可查看部署后的页面。