# 本博客网站

# VuePress

Vue 驱动的静态网站生成器

https://www.vuepress.cn/ (opens new window)

# 安装

npm install -g vuepress

WARNING

npm不要随意加sudo，会更改一些文件的权限，切换本地安装和全局安装的时候会出错。

npm需要sudo的话，可以更改全局安装的路径。

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' > ~/.profile
source ~/.profile
npm install -g xxxx

1
2
3
4
5

如果是在wsl中，路径需要更改，不能在home下。

mkdir /mnt/d/npm-global
npm config set prefix '/mnt/d/npm-global'
echo 'PATH=/mnt/d/npm-global/bin:$PATH' >  ~/.profile
source ~/.profile
npm install -g xxxx

1
2
3
4
5

安装依赖库vue-template-compiler

npm install vue-template-compiler

# 创建文件夹

mkdir myblog
cd myblog
npm init -y

1
2
3

在 myblog 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹和README.md文件，在.vuepress中创建 public 文件夹和 config.js 文件。

在 config.js 文件中配置网站标题、描述、主题等信息空格会加载README.md中的内容

module.exports = {
    title: '陶成林', 
    description: 'vuepress',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: [
          { text: '主页', link: '/' },
          { text: 'Github', link: 'https://github.com/taochenglin' } 
        ],
        sidebar: 'auto',
        sidebarDepth: 2,
        displayAllHeaders: true,
        lastUpdated: 'Last Updated' 
      }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在package.json文件中添加如下内容：

{
  "name": "blog",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },
  "keywords": [],
  "author": "陶成林 <happytcl@163.com>",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.9.7"
  },
  "repository": {
    "type": "git",
    "url": "https://git.dev.tencent.com/TaoChenglin/blog.git"
  },
  "dependencies": {
    "vue-template-compiler": "^2.7.9",
    "vuepress-theme-yubisaki": "^3.1.9"
  },
  "directories": {
    "doc": "docs"
  },
  "description": ""
}

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

TIP

其它博客内容放在docs目录下，在config.js中配置对应链接。

# 命令

调试，实时生成

vuepress dev docs

生成静态文件，生成文件在docs/.vuepress/dist/

npm run docs:build

# GitHub Pages

GitHub上创建repository，名字必须叫做username.gihub.io，username为github帐号。

https://pages.github.com/ (opens new window)

把vuepress生成的静态网站push到这个repo下，github pages会自动生成。

语法 →