开始，写的第一个文章

使用vuepress-reco搭建博客

# vuepress

Vue 驱动的静态网站生成器

# vuepress-them-reco

一款简洁而优雅的 vuepress 博客 & 文档主题。

# 安装踩坑

1.创建目录并初始化

mkdir vuepress-starter && cd vuepress-starter
npm init

1
2

2.安装vuepress

#全局安装 包安装在Node安装目录下的node_modules文件夹中，一般在 \Users\用户名\AppData\Roaming\ 目录下，可以使用npm root -g查看全局安装目录。
npm install -g vuepress
#本地安装 包安装在指定项目的node_modules文件夹下
npm install -D vuepress

1
2
3
4

3.安装主题reco(不使用脚手架)

npm install vuepress-theme-reco --save-dev

4.目录结构

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

1
2
3
4
5
6

5.在 package.json 中添加一些 scripts

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

1
2
3
4
5
6

# config.js配置

module.exports = {
  "title": "",
  "description": "",
  "dest": "public",//build生成静态文件位置，大坑！！！怪不得部署时在默认的dist文件夹下找不到。
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  "head": [
    [
      "link",
      {
        "rel": "icon",
        "href": "/favicon.ico"
      }
    ],
    [
      "meta",
      {
        "name": "viewport",
        "content": "width=device-width,initial-scale=1,user-scalable=no"
      }
    ]
  ],
  "theme": "reco",
  "themeConfig": {
    "nav": [
      {
        "text": "主页",
        "link": "/",
        "icon": "reco-home"
      },
      {
        "text": "时间轴",
        "link": "/timeline/",
        "icon": "reco-date"
      },
      {
            "text": "GitHub",
            "link": "https://github.com/u4250",
            "icon": "reco-github"
      }
    ],
    subSidebar: 'auto',
    "type": "blog",
    "blogConfig": {
      "category": {
        "location": 2,
        "text": "分类"
      },
      "tag": {
        "location": 3,
        "text": "标签"
      }
    },
    "logo": "/logo.png",
    "search": true,
    "searchMaxSuggestions": 10,
    "lastUpdated": "Last Updated",
    "author": "u4250",
    "authorAvatar": "/bg.jpg",
    "record": "xxxx",
    "startYear": "2020"
  },
  "markdown": {
    "lineNumbers": true
  }
}

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

# deploy.sh(发布)

#!/usr/bin/env sh

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

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

# 进入生成的文件夹 config.js里配置
cd public

# 如果是发布到自定义域名
# 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:u4250/blog.git master:gh-pages

cd -
git add -A
git commit -m "ces"
git push

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