一键搭建VuePress博客，部署到Github Pages，小白也能轻松拥有个人博客！

前端

2023-07-23 20:40:46

用 VuePress 和 GitHub Pages 一键搭建你的博客，实现自动部署

在如今信息爆炸的时代，拥有个人博客已成为刚需。分享你的知识、记录生活，博客是你的理想之选。但对新手而言，搭建博客是一大难题，需要购买域名、服务器，还要安装和配置各种软件，着实令人头疼。

不要担心！本文将介绍如何使用 VuePress 和 GitHub Pages ，一键搭建你的个人博客，并实现自动部署。

什么是 VuePress？

VuePress 是一个基于 Vue.js 的静态网站生成器，让你轻松使用 Markdown 撰写博客文章，并自动生成静态网站。

什么是 GitHub Pages？

GitHub Pages 是一个免费的静态网站托管平台，可以轻松地将你的博客部署到网上。

搭建 VuePress 博客

1. 安装 VuePress

npm install -g vuepress

2. 创建项目

vuepress init my-blog

3. 配置项目

运行以下命令生成配置文件：

vuepress dev

然后，你可以在浏览器中访问你的博客。

4. 部署到 GitHub Pages

a. 创建 GitHub 仓库

b. 添加 docs 文件夹

在仓库根目录下创建 docs 文件夹，并复制你的博客代码到该文件夹中。

c. 创建 CNAME 文件

在仓库根目录下创建 CNAME 文件，并将其内容设置为你的域名。

现在，你的博客已部署到 GitHub Pages，可以通过你的域名访问。

实现自动部署

每次更新博客后，需要手动推送到仓库并部署到 GitHub Pages，很麻烦。我们可以使用以下脚本来实现自动部署：

#!/bin/bash

# 获取当前分支
branch=$(git rev-parse --abbrev-ref HEAD)

# 检查当前分支是否为 master
if [ "$branch" != "master" ]; then
  echo "当前分支不是 master，请切换到 master 分支！"
  exit 1
fi

# 构建静态网站
vuepress build

# 将构建好的静态网站复制到 docs 文件夹
cp -r docs/* ../docs

# 将代码推送到 GitHub 仓库
git add .
git commit -m "更新博客"
git push

# 部署到 GitHub Pages
cd ../
git subtree push --prefix docs origin gh-pages

# 提示部署成功
echo "博客部署成功！"