后端技术 · Develop

从零开始搭建 VuePress 静态博客

小编 · 11月12日 · 2020年

环境准备

  1. 安装 Git(opens new window)
  2. 安装 Node.js (opens new window),版本 >=8.6
  3. 安装 Yarn(opens new window)
  4. 注册 GitHub(opens new window)
从零开始搭建 VuePress 静态博客

如果使用 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 示例:

注意修改对应的配置

#!/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(站点配置文件)

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

部署

$ yarn deploy

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

0 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!