从零开始搭建 VuePress 静态博客

# 环境准备

安装 Git
安装 Node.js ，版本 >=8.6
安装 Yarn
注册 GitHub

如果使用 Yarn 或者 Npm 下载慢，使用以下命令全局加速

代码语言：javascript复制

$ 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

# 仓库准备

以下以账号 cnguu 为例，注意替换为自己的账号

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

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

# 开始使用 VuePress

# 基础目录与文件

新建文件夹：C:vuepress-blog，表示为根目录

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

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

.gitattributes 示例：

代码语言：javascript复制

*.sh linguist-language=Vue

.gitignore 示例：

代码语言：javascript复制

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

deploy.sh 示例：

注意修改对应的配置

代码语言：javascript复制

#!/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 示例：

代码语言：javascript复制

{
  "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 示例：

代码语言：javascript复制

# VuePress Blog

# 安装

代码语言：javascript复制

$ yarn install

# 配置

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

注意备份：使用 Git 提交到源码备份仓库

# 部署

代码语言：javascript复制

$ yarn deploy

如果部署失败，可以手动输入部署脚本里的命令，或者使用自动化部署

javascript git github yarn 开源

0 人点赞