从零开始搭建 VuePress 静态博客

环境准备

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

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

$ 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 示例：

*.sh linguist-language=Vue

.gitignore 示例：

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

deploy.sh 示例：

::: warning 注意修改对应的配置 :::

#! /bin/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（站点配置文件）

config.js 示例：

module.exports = {
    base: '/',
    title: '凉风有信',
    description: '凉风有信的个人技术博客',
    head: [
        ['meta', {
            name: 'viewport',
            content: 'width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0',
        }],
        ['meta', { name: 'X-UA-Compatible', content: 'ie=edge' }],
        ['meta', { name: 'keywords', content: 'cnguu,gleehub,凉风有信,博客' }],
        ['meta', { name: 'theme-color', content: '#1890ff' }],
        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
        ['meta', { name: 'msapplication-TileImage', content: '/images/touch/homeScreen144.png' }],
        ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
        ['meta', { name: 'google-site-verification', content: 'OWBsrn63nZ2iOOLgb9nDDZTZq9FiorbohFe91f0h_H8' }],
        ['link', { rel: 'icon', href: '/favicon.ico' }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
        ['link', { rel: 'apple-touch-icon', href: '/images/touch/homeScreen144.png' }],
    ],
    host: 'localhost',
    port: '2234',
    dest: 'dist',
    locales: {
        '/': {
            lang: 'zh-CN',
            title: '凉风有信',
        },
    },
    theme: 'yur',
    evergreen: true,
    themeConfig: {
        nav: [
            { text: '测试分类', link: '/test/' },
        ],
    },
    markdown: {
        lineNumbers: true,
        anchor: { permalink: true, permalinkBefore: true, permalinkSymbol: '#' },
        externalLinks: { target: '_blank', rel: 'noopener noreferrer' },
        toc: { includeLevel: [2, 3] },
    },
};

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

主题使用

• vuepress-theme-yur 使用教程

部署

$ yarn deploy

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