VuePress打造静态博客

目录结构

├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
│  └─ about
│     └─ README.md
│  └─ notes
│     └─ javascript
|       └─ 数组去重.md
|       └─ 数组排序.md
│     └─ vue
|       └─ VuePress打造静态博客.md
└─ node_modules
└─ deploy.sh
└─ package.json

安装

# 新建package.json
npm init -y

# 将 VuePress 作为一个本地依赖安装
npm i vuepress -D

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 编辑package.json
"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}

# 本地预览效果
npm run dev

# 生成静态文件
npm run build

首页模板配置

---
home: true
heroImage: ./img/header.jpg
actionText: 关于我
actionLink: /about/
features:
- title: 装逼
  details: 在这里，你可以看到 zhjgh 在这里无限装逼，所以你可以尽情打脸。就算你懂，没关系，打了脸再说~
- title: 搞笑
  details: 在这里，你可以获得各种学习欢乐，轻松进击前端编程。点滴进步，成就不一样的你。
- title: 深沉
  details: 在这里，你可以收获一个广州自身漂泊的人的情怀，感受在这个烦躁的社会 zhjgh 如何安身立命。
footer: zhjgh 的博客 | Copyright © 2018 不折腾的前端，和咸鱼有什么区别
---

全局配置文件config.js

module.exports = {
  // 左上角标题
  title: 'zhjgh的博客',
  //描述
  description: '前端开发工程师',
  // 头部部署，右上角小图标
  head: [
    // ico 配置
    ['link', {
      rel: 'icon',
      href: '/img/logo.png'
    }]
  ],
  // 主题部署
  themeConfig: {
    /** 
     * 右侧导航条
     * text - 显示字段
     * link - 链接：注意前后带 / 符号
     */
    nav: [
      {
        text: '主页',
        link: '/'
      },
      /**
       * 多级菜单
       * 开头 text 为一级标题
       * 数组内 text 为二级标题
       * link 为链接，注意带 /
       */
      {
        text: '学习文档',
        link: '/notes/',
      },
      {
        text: '关于',
        link: '/about/'
      },
      // 链接到网站
      {
        text: 'Github',
        link: 'https://github.com/zhjgh/'
      },
    ],
    /**
     * 侧边栏配置：侧边栏组
     */
    sidebar: {
      '/note': [
        {
          title:'javascript',
          collapsable: true,
          children:[
            '/notes/javascript/数组去重',
            '/notes/javascript/数组排序',
          ]
        },
        {
          title:'vue',
          collapsable: true,
          children:[
            '/notes/vue/VuePress打造静态博客',
          ]
        },
      ]
    }
  }
}

一键部署

1.新建deploy.sh

touch deploy.sh

2.配置

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
git push -f https://github.com/zhjgh/zhjgh.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

3.新建命令到package.json

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs",
  "deploy": "bash deploy.sh"
},

4.发布

npm run deploy