使用Vuepress + Gitee 搭建静态网站

VuePress

Vue 驱动的静态网站生成器

请确保你的 Node.js 版本 >= 8.6。

全局安装npm install -g vuepress

创建项目文件夹mkdir vuepress-demo cd vuepress-demo

初始化项目 npm init -y

改写package.json

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

圈起来的都是自定义的，不一定是项目必需要的

修改 config.js

module.exports = {
    title: '极.简',
    description: '发现生活的美',
    base: '/',
    head: [
        ['link', {
            rel: 'icon',
            href: `/favicon.ico`
        }]
    ],
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            { text: '成果', link: '/guide/' },
            {
                text: 'Languages',
                items: [
                    { text: 'Chinese', link: '/language/chinese' },
                    { text: 'English', link: '/language/english' }
                ]
            },
            { text: 'External', link: 'https://www.baidu.com' },
        ],
        sidebarDepth: 2,
        sidebar: [
            {
                title: '网上地址',
                collapsable: false,
                children: ['/guide/']
            }
        ]
    },
    dest: './docs/.vuepress/dist',
    ga: '',
    evergreen: true,
}

修改README.md

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

运行npm run docs:dev

每个文件夹下的README.md就是当前目录的内容；

## This is guide
content...

### title3
content...

### title3-01

## small title
content...

通过config.js文件配置相应导航

themeConfig: {
        nav: [
          { text: 'Home', link: '/' },
          { text: 'Guide', link: '/guide/' },
          {
            text: 'Languages',
            items: [
              { text: 'Chinese', link: '/language/chinese' },
              { text: 'English', link: '/language/english' }
            ]
          },
          { text: 'External', link: 'https://www.baidu.com' },
        ]
    }

配置侧边栏

sidebarDepth: 2,
sidebar: [
  {
    title: 'Guide',
    collapsable: false,
    children: ['/guide/']
  }         
]

使用 Gitee

打包npm run docs:build

将生成的 dist 目录下的文件复制一份

新建仓库，名字命名为自己 gitee 的用户名，点击创建，

git clone '项目地址' 这时粘贴上自己刚刚复制好的文件

git add . git commit -m 'init blog' git push,

我这里已经开启了。没有开启点击按钮即可部署。

http://suiboyu.gitee.io/

这样就可以了。

---

参考文章

https://blog.csdn.net/huaairen/article/details/103133685

https://www.jianshu.com/p/2ac5727947cd