一个基于VuePress的赛博朋克风格技术博客
CyberDev Blog是一个采用赛博朋克风格设计的个人技术博客，基于VuePress构建。博客专注于JavaScript和Java技术栈的教程和技巧分享，为开发者提供高质量的技术内容。
- 🎨 赛博朋克风格: 独特的视觉设计，霓虹灯效果和未来感界面
- 📚 系统化内容: JavaScript教程/技巧系列、Java基础/SSM/SpringBoot系列
- 🚀 简单写作: 只需编写Markdown文件即可发布文章
- 📱 响应式设计: 完美适配各种设备和屏幕尺寸
- ⚡ 快速加载: 静态网站生成，访问速度极快
- 🔍 搜索功能: 内置搜索，快速找到需要的内容
- 框架: VuePress 2.x
- 主题: 自定义赛博朋克主题
- 样式: CSS3 + 动画效果
- 构建: Vite
- 部署: 支持GitHub Pages、Netlify、Vercel等
- Node.js 14.0+
- npm 6.0+ 或 yarn 1.0+
# 克隆项目
git clone https://github.com/your-username/cyberpunk-blog.git
cd cyberpunk-blog
# 安装依赖
npm install
# 或
yarn install# 启动开发服务器
npm run dev
# 或
yarn dev访问 http://localhost:8080 查看博客。
# 构建生产版本
npm run build
# 或
yarn build构建完成后，静态文件将生成在 docs/.vuepress/dist 目录中。
cyberpunk-blog/
├── docs/ # 文档目录
│ ├── .vuepress/ # VuePress配置
│ │ ├── config.js # 主配置文件
│ │ └── public/ # 静态资源
│ │ └── styles/ # 自定义样式
│ │ └── cyberpunk.css # 赛博朋克主题样式
│ ├── README.md # 首页
│ ├── about/ # 关于页面
│ ├── javascript/ # JavaScript系列
│ │ ├── tutorials/ # 教程系列
│ │ └── tips/ # 技巧系列
│ └── java/ # Java系列
│ ├── basics/ # 基础系列
│ ├── ssm/ # SSM框架系列
│ └── springboot/ # SpringBoot系列
├── package.json # 项目配置
└── README.md # 项目说明
- 在相应的目录下创建Markdown文件
- 在文件开头添加Front Matter（可选）
- 编写文章内容
- 更新导航配置（如需要）
---
title: 文章标题
date: 2024-01-01
tags:
- JavaScript
- 教程
categories:
- 前端开发
---支持标准Markdown语法，以及VuePress扩展语法：
# 一级标题
## 二级标题
### 代码块
```javascript
console.log('Hello, World!');::: tip 提示 这是一个提示框 :::
::: warning 警告 这是一个警告框 :::
::: danger 危险 这是一个危险提示框 :::
## 🎨 自定义样式
### 赛博朋克主题特色
- **霓虹灯效果**: 标题和链接的发光效果
- **暗色主题**: 深色背景配合亮色文字
- **未来感字体**: 使用等宽字体增强科技感
- **动画效果**: 悬停动画和渐变效果
- **网格背景**: 科幻风格的背景图案
### 自定义CSS变量
```css
:root {
--cyber-primary: #00ffff; /* 主色调 - 青色 */
--cyber-secondary: #ff00ff; /* 次色调 - 品红 */
--cyber-accent: #ffff00; /* 强调色 - 黄色 */
--cyber-bg-dark: #0a0a0a; /* 深色背景 */
--cyber-text-primary: #00ffff; /* 主文字颜色 */
--cyber-text-secondary: #ffffff; /* 次文字颜色 */
}
- 变量与数据类型详解
- 函数详解
- 对象与数组
- 异步编程
- 模块化开发
- 数组方法大全
- 异步编程最佳实践
- 解构赋值技巧
- 性能优化技巧
- 面向对象编程核心概念
- 集合框架详解
- 多线程编程
- 异常处理
- SpringBoot快速入门指南
- 自动配置原理
- 数据访问技术
- Web开发实战
- 在GitHub上创建仓库
- 推送代码到仓库
- 在仓库设置中启用GitHub Pages
- 选择
gh-pages分支作为源
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -- 连接GitHub仓库
- 设置构建命令:
npm run build - 设置发布目录:
docs/.vuepress/dist - 部署
- 导入GitHub仓库
- 框架选择: Other
- 构建命令:
npm run build - 输出目录:
docs/.vuepress/dist - 部署
我们欢迎各种形式的贡献！
- 内容贡献: 提交技术文章、修正错误
- 功能改进: 优化用户体验、增加新功能
- 样式优化: 改进视觉设计、修复样式问题
- 文档完善: 改进文档、添加示例
- Fork本仓库
- 创建特性分支:
git checkout -b feature/amazing-feature - 提交更改:
git commit -m 'Add some amazing feature' - 推送分支:
git push origin feature/amazing-feature - 提交Pull Request
- 使用2个空格缩进
- 遵循ESLint规则
- 提交信息使用英文
- 添加适当的注释
本项目采用 MIT License 许可证。
感谢以下开源项目：
- Email: contact@cyberdev.blog
- GitHub: @cyberdev
- Issues: GitHub Issues
⭐ 如果这个项目对你有帮助，请给它一个星标！
在代码的海洋中航行，在技术的星空中探索。Welcome to the Cyber World! 🌌