我的个人博客是怎么搭建的

记录从零开始搭建个人博客的全过程，适合新手参考

1. 项目初始化

• 新建一个空文件夹作为博客项目目录。
• 使用 git init 初始化 Git 仓库，方便版本管理。
• 创建远程仓库（如 GitHub），并用 git remote add origin <仓库地址> 关联。
• 配置 .gitignore，忽略 node_modules、日志等不需要提交的文件。

2. 安装 Node.js 和 nvm

• 推荐使用 nvm 管理 Node.js 版本，保证本地和云端环境一致。
• 安装 Node.js 16 或 18 版本。
• 用 nvm alias default 18 设置默认 Node 版本。(我用的18)

3. 安装 VuePress

• 在项目根目录下执行：

  npm init -y
  npm install vuepress@1.x vue@2.x vue-template-compiler@2.x --save-dev
  
• 在 package.json 里添加脚本：

  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
  

4. 目录结构设计

• 创建 docs/ 目录，作为博客内容的主目录。
• 在 docs/.vuepress/ 下新建 config.js 配置文件。
• 设计首页（docs/README.md），并分为：
  • 网络日志（Blog）
  • 文集：我有一个朋友系列
  • 木木成长报道
• 每个板块下新建对应的子目录和文章。

5. 配置 VuePress

• 在 config.js 里设置：
  • 网站标题、描述、导航栏、侧边栏
  • 主题色、平滑滚动、最后更新时间等
• 自定义首页布局和样式（docs/.vuepress/styles/index.styl），实现卡片式分区、响应式设计。

6. 本地预览与调试

• 运行 npm run dev，本地预览博客效果。
• 持续优化首页布局、样式和内容结构。

7. Git 提交与推送

• 用 git add .、git commit -m "xxx"、git push 提交和同步代码到远程仓库。

8. 部署到 Vercel

• 注册并登录 Vercel。
• 通过“New Project”导入 GitHub 仓库。
• 配置 vercel.json：

  {
    "buildCommand": "npm run build",
    "outputDirectory": "docs/.vuepress/dist"
  }
  
• 一键部署，自动生成访问链接。
• 每次推送代码，Vercel 会自动重新部署。

9. 持续优化与内容创作（期望）

• 持续输出高质量原创内容。
• 根据反馈不断优化页面结构和样式。
• 关注 SEO 数据，提升搜索引擎收录和排名。

总结：

本博客从项目初始化、环境配置、内容结构、样式美化、自动化部署到 SEO 优化，全部采用 VuePress + Vercel 的现代前端方案。整个过程简单高效，非常适合个人技术博客和成长记录。

发布时间：2025-07-23标签：博客搭建, VuePress, Vercel, 前端, 教程