发布于 

vuepress上手

1.创建并进入一个新目录

1
mkdir xxx && cd xxx

2.选择喜欢的包管理器进行初始化

1
yarn init & # npm init

3.将Vuepress安装为本地依赖(不推荐全局安装)

1
yarn add -D vuepress & # npm i -D vuepress

4.创建第一篇文档

1
mkdir docs && echo '# Hello worde' > docs/README.md

5.在packgae.json中添加scripts

1
2
3
4
5
6
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

5.在本地启动服务器

1
yarn docs:dev & # npm run docs:dev

6.在docs中新建.vuepress文件夹及config.js文件

1
mkdir .vuepress && cd .vuepress/ && touch config.js

7.在.vuepress文件夹新建public

1
mkdir public  // 用来放网页标签的图标

8.在config.js中写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
module.exports = {
    title: '名字',    // 网页标题
    description: 'xxx',  // 随便起
    // 注入到当前页面的 HTML <head> 中的标签
    head: [
      ['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一个自定义的 favicon(网页标签的图标)
    ],
    base: '/xxx/', // github仓库地址
    markdown: {
      lineNumbers: true // 代码块显示行号
    },
    themeConfig: {
      sidebarDepth: 2, // e'b将同时提取markdown中h3 和 h3 标题，显示在侧边栏上。
      lastUpdated: 'Last Updated',// 文档更新时间：每个文件git最后提交的时间
   //   主页导航栏
      nav:[
        { text: 'xxx', link: 'xxx' }, // link处添外部链接（仓库地址码云或者github）
        // 下拉列表
        {
          text: 'xxx',
          items: [
            { text: 'xxx', link: 'xxx' },
            {
              text: 'xxx',
              link: 'xxxx'
            }
          ]
      }
       ],
        // 侧边栏
        sidebar: [
          ['/', 'xxx'],    // README.md
          {
            title: 'xxx',
            collapsable: false,
            children:[
                ['/help/one.md', '标题名'],
            ]
          },     
        ]
          }
    }

9.在你的项目(根目录)中创建一个deploy.sh文件（请自行判断去掉高亮行的注释）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/usr/bin/env sh

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

# 生成静态文件
npm run docs: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 git@github.com:<USERNAME>/<USERNAME>.github.io.git master

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

cd -

10.写完之后运行sh打包上传

1
sh deploy.sh
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。