feat: 将模板引擎修改为mkdocs

Author: geekdex

.github/workflows/deploy.yml

@@ -0,0 +1,32 @@
+name: Deploy MkDocs to GitHub Pages
+
+on:
+  push:
+    branches: [ main, master ]
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.x'
+
+      - name: Install dependencies
+        run: |
+          pip install -r requirements.txt
+
+      - name: Deploy to gh-pages
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+          mkdocs gh-deploy --force

.github/workflows/static.yml

@@ -1,55 +1,64 @@
-# 前端工程化解决方案 -- Webpack
+# Webpack 实战教程 - 前端工程化解决方案
 
-```
-├─docs                        文文档目录
-├─src                         示例代码
-├─package.json                npm项目依赖管理配置文件
-└─webpack.config.php          webpack配置文件
-```
+[![Deploy MkDocs to GitHub Pages](https://github.com/webtechwiki/studywebpack/actions/workflows/deploy.yml/badge.svg)](https://github.com/webtechwiki/studywebpack/actions/workflows/deploy.yml)
 
-## 一、前端工程化
+这是一个使用 MkDocs 构建的 webpack 实战教程，采用 Material for MkDocs 主题，提供了现代化的文档阅读体验。
 
-### 1. 小白眼中的前端开发
+## 📖 在线阅读
 
-- 会写 HTML + CSS + JavaScript 就会前端开发
-- 需要美化界面样式，就拽一个 bootstrap 组件过来
-- 需要操作 DOM 或者发起 Ajax 请求，就拽 jQuery 过来
-- 需要快速实现界面布局，就拽 layUI 过来
+访问 [https://webtechwiki.github.io/studywebpack/](https://webtechwiki.github.io/studywebpack/) 在线阅读文档。
 
-### 2. 实际的前端开发
+## 🚀 本地开发
 
-- 模块化（js 模块化、css 模块化、资源模块化）
-- 组件化（复用现有的 UI 结构、样式、行为）
-- 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理）
-- 自动化（自动化构建、自动部署、自动化测试）
+### 安装依赖
 
-### 3.什么是前端工程化
+```bash
+pip install -r requirements.txt
+```
 
-前端工程化是指：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
+### 本地预览
+
+```bash
+mkdocs serve
+```
+
+然后在浏览器中访问 `http://127.0.0.1:8000`
+
+### 构建静态文件
+
+```bash
+mkdocs build
+```
 
-企业开发中的 Vue 和 React 项目，都是基于工程化的方式进行开发的。
+## 📚 内容目录
 
-好处：前端开发自成体系，有一套标准开发方案和流程。
+1. [webpack基础使用](docs/webpack-basic.md) - 了解webpack的基本概念和使用方法
+2. [webpack插件](docs/webpack-plugin.md) - 学习如何使用和配置webpack插件
+3. [webpack加载器](docs/webpack-loader.md) - 掌握各种loader的使用技巧
+4. [打包构建](docs/build.md) - 学习项目的打包和构建流程
+5. [SourceMap](docs/sourcemap.md) - 了解源码映射的配置和使用
+6. [总结](docs/summary.md) - 回顾和总结webpack的核心知识点
 
-### 4. 前端工程化解决方案
+## 🎨 特性
 
-早期的前端工程化解决方案
+- 📱 响应式设计，支持移动端阅读
+- 🌙 支持暗色/亮色主题切换
+- 🔍 全文搜索功能
+- 📝 代码高亮和复制功能
+- 🔗 自动生成导航和目录
+- ⚡ 快速加载和流畅体验
 
-- [grunt](https://www.gruntjs.net)
-- [gulp](https://www.gulpjs.com.cn)
+## 🛠 技术栈
 
-目前流行的前端工程化解决方案
+- [MkDocs](https://www.mkdocs.org/) - 静态站点生成器
+- [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/) - 现代化主题
+- [GitHub Actions](https://github.com/features/actions) - 自动化部署
+- [GitHub Pages](https://pages.github.com/) - 静态网站托管
 
-- [webpack](https://www.webpackjs.com)
-- [parcel](https://zh.parceljs.org)
+## 📄 许可证
 
-> 在本系列文档中，我们将一起来熟悉与使用 Webpack
+本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
 
-## 二、文档列表
+## 🤝 贡献
 
-- [01-webpack的基本使用](./docs/01-webpack-basic.md)
-- [02-webpack中的插件](./docs/02-webpack-plugin.md)
-- [03-webpack中的加载器](./docs/03-webpack-loader.md)
-- [04-打包构建](./docs/04-build.md)
-- [05-SourceMap](./docs/05-sourcemap.md)
-- [06-总结](./docs/06-summary.md)
+欢迎提交 Issue 和 Pull Request 来改进这个项目！