使用vuepress搭建博客使用GitHub部署

vuepress

Vue 驱动的静态网站生成器
以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
这个框架比较简洁，非常好用。
效果如下


我的博客线上地址 https://shuaipengge.github.io/

搭建环境

# 将 VuePress 作为一个本地依赖安装
npm install -D vuepress
# 新建一个 docs 文件夹
mkdir docs

在docs里创建 README.md 写入 ‘# Hello VuePress!’ (markdown)格式
在 package.json 里加一些脚本

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

在README.md里开始写作

本地运行博客

预览效果

npm run docs:build

此时会在本地启动一个服务器，端口默认为8080

在docs里创建.vuepress文件夹 cd进入后创建public 用于存放静态文件
新建config.js 这个文件来设置网站布局内容

module.exports = {
  title: 'Peng の Blog',
  head:[
    ['link', {rel:'icon', href:'/img/favicon.ico'}]
  ],
  description: 'shuaipenge blog',
  themeConfig: {
    nav: [
    // 网站导航
      { text: '首页', link: '/' },
      { text: '导航', link: '/goto/' },
      { text: 'GitHub', link: 'https://github.com/shuaipengge/shuaipengge.github.io' },
    ],
    sidebar: {
    // 显示侧边导航
      "/goto/": [""],
      "/web/HTML/": [""],
      "/web/CSS/": [""]
  }
}

导航由对应的文件夹对应，文件夹里创建README.json文件用于默认显示内容

部署博客

在GitHub创建一个 以你的GitHub名字开头以github.io结尾的库，不要初始化库。

在package.json同级目录创建deploy.sh

#!/usr/bin/env sh

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

# 生成静态文件
npm run docs:build

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

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

# 如果发布到 https://<USERNAME>.github.io  填写你刚刚创建的仓库地址
git push -f https://github.com/------.git master

cd -

在package.json中添加

"scripts": {
    "deploy": "bash deploy.sh"
  },

# 部署
npm run deploy

运行成功后博客会部署到GitHub
使用你的库名即可访问
但我这里出现了404，再次部署即可解决