搭建个人博客

github博客地址
https://xiaoping027.github.io

准备工作

初始化

yarn init 或者 npm init

按照提示一步一步即可

安装VuePress

yarn add -D vuepress 
或者
npm install -D vuepress

package.json

{
    "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
    }
}

分别是dev和build模式

新建文件夹

mkdir docs

├── docs/
├── package.json
└── yarn.lock

cd docs

mkdir .vuepress

├── docs
│   └── .vuepress
├── package.json
└── yarn.lock

在 .vueress文件夹下 新建 config.js

// .vuepress/config.js
module.exports = {
  title: "前端学习记录",
  description: "前端进阶,前端学习",
  head: [["link", { rel: "icon", href: "/logo.png" }]],
  lang: "zh-CN",
  themeConfig: {
    nav: [
      { text: "主页", link: "/" },
      { text: "React | Vue", link: "/react/" }
    ],
    sidebar: "auto",
    sidebarDepth: 4,
    activeHeaderLinks: true,
    lastUpdated: "Last Updated"
  }
};

新建react 文件夹
新建 md文件

默认指向 README.md

├── docs
│   ├── .vuepress
│   │   └── config.js
│   ├── README.md
│   └── react
│       └── README.md
├── package.json
└── yarn.lock

yarn docs:dev 
# 或者
npm run docs:dev

配置

https://vuepress.vuejs.org/zh…

https://vuepress.vuejs.org/zh…

具体配置可以查看官方文档

默认主题

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

导航栏设置

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'External', link: 'https://google.com' },
    ]
  }
}

或者

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Languages',
        ariaLabel: 'Language Menu',
        items: [
          { text: 'Chinese', link: '/language/chinese/' },
          { text: 'Japanese', link: '/language/japanese/' }
        ]
      }
    ]
  }
}

嵌套的情况

module.exports = {
  themeConfig: {
    nav: [
      {
        text: 'Languages',
        items: [
          { text: 'Group1', items: [/*  */] },
          { text: 'Group2', items: [/*  */] }
        ]
      }
    ]
  }
}

侧边栏设置

// .vuepress/config.js

module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Group 1',   // 必要的
        path: '/foo/',      // 可选的, 应该是一个绝对路径
        collapsable: false, // 可选的, 默认值是 true,
        sidebarDepth: 1,    // 可选的, 默认值是 1
        children: [
          '/'
        ]
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ]
      }
    ]
  }
}

项目部署

#!/usr/bin/env sh

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

# 生成静态文件
yarn build

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

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

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

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

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