VuePress的博客搭建并自动部署页面到码云（Gitee）

一、VuePress 简介

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

二、快速搭建博客

2.1本地博客搭建命令

a.npm 博客搭建

npm install @vuepress-reco/theme-cli -g  #插件安装 
theme-cli init hch-blog  #项目初始化 
cd  hch-blog 
npm install  #安装依赖 
npm run dev  #项目运行 
npm run build  #项目构建

b.yarn 博客搭建

npm  install -g cnpm --registry=https://registry.npm.taobao.org  #安装淘宝镜像 
cnpm install -g yarn  #安装yarn 
yarn global add @vuepress-reco/theme-cli  #插件安装 
theme-cli init hch-blog  # init #项目初始化 
cd  hch-blog 
yarn install  #安装依赖 
yarn dev  #项目运行 
yarn build  #项目构建

项目运行效果：
在这里插入图片描述

3.1.2.代码推送到码云（Gitee）

a.Gitee创建项目

找到hch-blog\docs.vuepress\config.js 添加一行代码

base: '/hch-blog/' ,  #设置站点根路径

b.推送的代码到Gitee

git clone https://gitee.com/huangchunhongzZ/hch-blog.git  #克隆空项目到本地 
cp hch-blog\public  hch-blog  #项目public是打包后的资源，复制打包的资源到hch-blog下 
cd  hch-blog  
git status  #git 状态 
git add .  #添加当前目录所有文件 
git commit -m"init blog"   #提交文件 
git push  #推送代码 
history   #git操作历史 `

c.设置自动部署 deploy.sh
创建deploy.sh添加以下代码
跑bash deploy.sh即可打包，并推送代码到gitee仓库

cd hch-blog # 打开项目
yarn build # 生成静态文件
git status #git 状态
git add . #添加当前目录所有文件
git commit -m "自动部署" #提交文件
git push #推送代码
history #git操作历史

d.设置Gitee Pages

进入 Gitee 的 hch-blog 仓库，选择"服务"–>"Gitee Pages
在这里插入图片描述

不需要填写任何内容，点击"启动"就行。
在这里插入图片描述

2.2.官方文档教程

VuePress链接的官方教程其实特别详细

cd  myblog
npm init -y 
npm install -D vuepress  #本地依赖安装 
mkdir docs  #新建一个 docs 文件夹，此目录保存markdown文章 
npm run docs:dev  #启动项目 
npm run docs:build  #打包项目 `

最终项目的目录结构如下图：

├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json