笔记

# VuePress文档博客

# 为什么使用VuePress构建文档博客

  • 之前使用hexo构建博客，操作太繁琐了，不喜欢。
  • VuePress 由vue驱动的极简静态网站生成器，熟悉vue所以用了。
  • 喜欢把学习的内容记录成静态文章，不需要花里胡哨的样式内容。
  • 主题内容适配手机。
  • 博客源文件内容参考 GitHub (opens new window)，实际效果访问 笔记 (opens new window)

# 构建本地博客

  1. 新建名为blog目录中初始化项目(该项目命名为blog_src，初始化后上传到GitHub中方便后面跨平台记录)参考vuepress官网指南中的快速上手 (opens new window)。为修改自己熟悉的项目启动命令，我修改的如下：
{
  "name": "blog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^1.9.7"
  }
}

  1. 初始化好项目之后一定要好好看下官网中介绍的VuePress项目的目录结构 (opens new window)。

  2. 添加首页，导航栏，侧边栏等主题配置，参考官网主题中默认主题配置 (opens new window)

  3. 添加图标等好的配置作品参考——vuepress-reco (opens new window)。具体项目线上效果——vuepress-theme-reco (opens new window)

# 手动上线部署

为了方便我博客的管理，blog文件夹下有 blog_src (项目源文件)和 dist (项目打包后需要部署的文件)两个文件夹。

  • 使用gitPage部署。

  1. github (opens new window)中新建一个仓库，名为 xxx.github.io (xxx为你GitHub的用户名)。

  2. 在blog目录下，拉去新建仓库内容，并将项目名称改为dist。

  3. 正常在 blog_src 中将文章写好后，确定本地访问正常。将 blog_src 中内容提交到GitHub中，保留源文件。

  4. 对本地项目进行打包处理，将 blog/docs/.vuepress/dist 中内容复制进入到 blog/dist 中（删除 blog/docs/.vuepress/dist ，保证 blog/dist 中 .git 文件不被删除）。

  5. 进入 blog/dist 执行一下命令将代码提交：

 git add .

 git commit -m 'xxx'   //本地提交的说明

 git push -u origin master // 提交至master分支

代码提交后，等待gitPage自动部署。几分钟后在访问https://xxx.github.io即可看到内容。

# 自动化部署方案

  1. blog_src 项目根目录下创建deploy.sh，进行自动化部署(不用我去手动部署了)。
  2. blog_src 项目根目录下终端运行 sh deploy.sh xxx部署描述完成自动部署。

自动部署脚本内容如下

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# blog_src项目打包
npm run build

# 进入到dist中删除旧内容
cd ../dist

# 删除除了.git 以外的所有文件，不直接复制覆盖是为了避免文件名修改出错。
ls | grep -v .git | xargs rm -rf

# 进入 blog_src 将打包内容复制到 dist 中,删除打包文件
cd ../blog_src

#将打包内容复制到 dist 中
mv docs/.vuepress/dist/* ../dist

# 删除打包文件
rm -rf docs/.vuepress/dist

# 提交 blog_src 中修改到GitHub中
git add .
git commit -m $1
git push -u origin master

# 进入到dist中提交打包内容
cd ../dist

# 提交打包内容到GitHub中
git add .
git commit -m $1
git push -u origin master

← 使用nvm管理node →