从零开始搭建 VuePress 静态博客

1. 安装 Git(opens new window)
2. 安装 Node.js (opens new window)，版本 >=8.6
3. 安装 Yarn(opens new window)
4. 注册 GitHub(opens new window)

$ yarn config set registry https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org --global
$ npm config set disturl https://npm.taobao.org/dist --global

为了方便，在 GitHub 上新建两个仓库

• vuepress-blog（源码备份）
• cnguu.github.io（博客部署）

在根目录中新建以下文件：

• .gitattributes（指定仓库主要语言）
• .gitignore（Git 提交需要忽略的目录与文件）
• deploy.sh（博客部署脚本）
• package.json（项目配置）
• README.md（仓库说明书）

.gitattributes 示例：

*.sh linguist-language=Vue

.gitignore 示例：

.idea
.DS_Store
*.log
node_modules
dist
yarn.lock
package-lock.json

deploy.sh 示例：

#!/usr/bin/env bash
#
# VuePress 通用部署脚本
#
# Windows 无法执行 .sh 文件，需要安装 git 客户端
#
# Author: cnguu
# Email: www@cnguu.cn
#

# 开始
set -e

# 编译
# package.json 中需要有这一句："build": "vuepress build docs"
yarn build

# 删除 dist_temp 文件夹
rm -fr dist_temp

# 复制 dist 文件夹到 dist_temp 文件夹
cp -ir dist dist_temp

# 复制 README.md 文件到 dist_temp 文件夹
cp -i README.md dist_temp

# 进入 dist_temp 目录
cd dist_temp

# 新建 CNAME 文件，并写入 gleehub.com 域名
echo gleehub.com > CNAME

# 初始化仓库
git init

# 添加
git add -A

# 提交
git commit -m deploy

# 强制推送到 cnguu.github.io 仓库的 master 分支
git push -f git@github.com:cnguu/cnguu.github.io.git master

# 多仓库部署开始 ------

# 删除 CNAME
#rm CNAME

# 新建 CNAME 文件，并写入 www.gleehub.com 域名
#echo www.gleehub.com > CNAME

# 添加
#git add -A

# 提交
#git commit -m deploy

# 强制推送到 cnguu.github.io 仓库的 master 分支
#git push -f git@git.dev.tencent.com:cnguu/cnguu.coding.me.git master

# 多仓库部署结束 ------

# 返回上一级目录
cd ../

# 删除 dist_temp 文件夹
rm -fr dist_temp

# 结束
cd -

package.json 示例：

{
  "name": "blog",
  "version": "1.0.0",
  "description": "cnguu's blog",
  "keywords": [
    "cnguu",
    "gleehub",
    "blog"
  ],
  "author": "cnguu",
  "license": "Mozilla",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git@github.com:cnguu/vuepress-blog.git"
  },
  "main": "index.js",
  "scripts": {
    "start": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "./deploy.sh"
  },
  "dependencies": {
    "vuepress": "^1.1.0"
  }
}

README.md 示例：

# VuePress Blog

$ yarn install

• 在根目录下新建文件夹 docs（存放博文、静态资源和配置）
• 在 docs 下新建任意名文件夹 test（一个文件夹代表一个分类，建议全英文名）
• 在 docs 下新建文件夹 .vuepress（存放静态资源和配置）
• 在 .vuepress 下新建文件夹 public（存放静态资源）
• 在 .vuepress 下新建文件 config.js（站点配置文件）

$ yarn deploy