咸鱼翻身记

vuepress安装教程

2021/1/13 vuepress

# 1.概述

  • Vue 驱动的静态网站生成器

  • 基于markdown语法生成网页

  • 可自定义和扩展样式

  • 可以发布至github

  • 详情请看官网vuepress (opens new window)

# 2.效果预览

# 3.前置环境安装

  • 需要node环境和npm支持

  • 如果没有安装环境请移步到[安装node](

# 4.安装初始化

  • 打开cmd,切换到需要存放文件的包下
# wisdom系统下
$ win+R
# 输入cmd回车
#切换到指定目录
F:
1
2
3
4
5
  • 创建文件夹作为根目录
# 该目录作为整本书的项目目录
$ mkdir vuepress-blog
1
2
  • 全局安装或者局部安装
# 全局安装
$ npm install -g vuepress
1
2
# 局部安装-切换到新创建的目录下
$ cd vuepress-blog
# 运行命令
$ npm install -D vuepress
1
2
3
4
  • 项目初始化
$ cd vuepress-blog
$ npm init -y
1
2

初始化后会产生一个package.json文件,修改运行命令。如图：

  • 在当前目录中创建一个docs目录
# 主要存放博客项目书籍内容
$ mkdir docs
1
2

  • 在docs下创建README.md文件作为首页文件

  • 首页内容书写(默认主题提供)

---
home: true
heroImage: /logo.jpg
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 5.核心配置

  • 在docs目录下创建.vuepress目录
# 主要存放配置
$ cd docs
$ mkdir .vuepress
1
2
3
  • 新建总配置文件config.js
# config是整个项目的核心配置文件，所有菜单、栏目相关的配置均配置在该模块中
$ cd .vuepress
$ touch config.js
1
2
3
  • 在config.js中加入内容
module.exports = {
    title: '知码学院',
    description: '君哥带你上王者',
    dest: './dist',
    port: '7777',
    head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: [{
            text: '懵逼指南', link: '/guide/'
        }],
        sidebar: {'/guide/':[
            {
                  title:'新手指南',
                  collapsable: true,
                  children:[
                    '/guide/notes/one',
                  ]
                },
                {
                  title:'知码学院',
                  collapsable: true,
                  children:[
                    '/guide/notes/two',
                  ]
                }
            ]
        },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "有新的内容.",
                buttonText: '更新'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上编辑此页 ！'
    }
}
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

上述配置中themeConfig处有2个关键配置，nav和sidebar，我们后续单独讲解

  • 先启动看看效果
npm run dev
1

# 6.导航栏配置

  • nav配置

    nav是顶部栏目导航

    接下来我们在当前目录创建一个nav.js

# 因为config.js中引入了nav，所以我们要提供一个来存放栏目
$ touch nav.js
1
2

  • 编辑nav.js

    加入如下内容

    module.exports = [
    {
        text: '懵逼指南', link: '/guide/'
    },
    {
        text: '面试宝典', link: '/baodian/',
		items: [
            {text: '初级开发篇', link: '/baodian/zero/'},
            {text: '中高进阶篇', link: '/baodian/high/'},
        ]
    },
    {
        text: '工具箱',
        items: [
			{
                text: '在线编辑',
				items: [
					{text: '图片压缩', link: 'https://tinypng.com/'}
				]
            },
			{
                text: '在线服务',
				items: [
					{text: '阿里云', link: 'https://www.aliyun.com/'},
					{text: '腾讯云', link: 'https://cloud.tencent.com/'}
				]
            },
			{
                text: '博客指南',
				items: [
					{text: '掘金', link: 'https://juejin.im/'},
					{text: 'CSDN', link: 'https://blog.csdn.net/'}
				]
            }
        ]
    }
]
    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

  • nav配置注意点

    • nav可以支持本地目录和链接
    • nav由text、link、items组成
      • text：栏目名（项名）
      • link：链接，可以指向本地目录和http地址
      • items：可以包含多个text和link，可以继续反复套用组成复杂的菜单
    • nav配置时需要与本地的目录对应
    • 如上述我配置了懵逼指南和面试宝典栏目
    • 懵逼指南：对应的事/guide/，则我需要再docs目录下创建一个guide目录
    • 面试宝典：对应的是/baodian/，则我需要在docs目录下创建一个baodian目录
    • baodian子目录：上述配置中baodian下有2个子目录，则我需要在下面新建2个子目录与之对应
    • 对应目录截图

# 7.侧边栏配置

  • sidebar是左侧标题导航，可以指定配置也可以设置为auto
sidebar: 'auto'
1

  • sidebar配置语法

    module.exports = {
	'/guide/': require('../guide/sidebar'),

	'/baodian/zero': require('../baodian/zero/sidebar'),
	'/baodian/high': require('../baodian/high/sidebar'),
}
    1
    2
    3
    4
    5
    6

  • /guide/：该key是与上述的nav中link对应，在请求nav时会自动切换当前的侧边目录，所以需要该配置

    • /baodian/zero同理
    • 后续的require表示引入一个指定目录的sidebar.js文件，其本身可以直接写在这里，但为了方便维护我们需要将每个模块的侧边栏js抽取出来，单独存放在内容模块的目录下

  • 这里我贴出目录：/docs/guide/sidebar.js文件内容

    module.exports = [
 	{
 	  title:'新手指南',
 	  collapsable: true,
 	  children:[
 		'/guide/notes/one',
 	  ]
 	},
 	{
 	  title:'知码学院',
 	  collapsable: true,
 	  children:[
 		'/guide/notes/two',
 	  ]
 	}
 ]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

# 8.静态资源配置

静态资源是最重要的一部分，比如图片，比如js，比如css

vuepress程序默认的图片目录是/docs/.vuepress/public

$ cd .vuepress
$ mkdir public
1
2

  • 图片

    比如我们要指定首页显示图片，那么需要将首页内容中的图片路径更改成如下

# /docs/.vuepress/public目录下有一张 logo.jpg的图片
heroImage: /logo.jpg
1
2

即/logo.jpg就是指/docs/.vuepress/public/logo.jpg

  • css

    css与图片路径一样，比如js中要加载我们指定的css文件，那么可以像如下这样

    • 在public目录下新建一个css目录
    $ cd public
$ mkdir css
$ touch style.css
    1
    2
    3

    编辑css内容，加入如下css做测试（你也可以自定义其他内容）

    a{color:#333;text-decoration:none; }
    1
    • 修改.vuepress下的config.js
    # 修改head属性如下
head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}],
        ["link", { rel: "stylesheet", href: "/css/style.css" }]
    ],
    1
    2
    3
    4
    5
    • 重启看看效果

  • js

    如果我们要自定义一些js动态效果，我们可以也可以像css操作那样

    • 在public目录下新建一个js目录
    $ cd public
$ mkdir js
$ touch main.js
    1
    2
    3

    在js中加入一些测试内容

    function init(){
    console.log("终于可以为所欲为了");
}
//因为界面加载原因，我们延迟500ms再调用init
setTimeout("init()",500)
    1
    2
    3
    4
    5
    • 修改.vuepress下的config.js
    # 修改head属性如下
head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}],
        ["link", { rel: "stylesheet", href: "/css/style.css" }],
        ["script", { charset: "utf-8", src: "/js/main.js" }],//新加入
    ],
    1
    2
    3
    4
    5
    6
    • 重启看看效果

# 9.主题选择

# 10.快速使用vuepress-theme-reco

# init
npm install @vuepress-reco/theme-cli -g
theme-cli init my-blog

# install
cd my-blog
npm install

# run
npm run dev

# build
npm run build
1
2
3
4
5
6
7
8
9
10
11
12
13

# 11.阿里云静态部署

nginx配置

# 所有http的请求，统一发到https请求上
server {
        listen 80;
        server_name www.sunxiaomin.top *.sunxiaomin.top;
        rewrite ^(.*)$  https://$host$1 permanent;
}
# 未带www的请求，统一分发到https://www上
server {
        listen 80;
        listen 443 ssl;
        server_name  sunxiaomin.top;
        return 301 https://www.sunxiaomin.top$request_uri;
}

# https 请求处理
 server {
        listen 443 default_server ssl;
        server_name  www.sunxiaomin.top;
        #域名解析
        ssl_certificate /etc/letsencrypt/sunxiaomin.top/www.sunxiaomin.top.pem;
        ssl_certificate_key /etc/letsencrypt/sunxiaomin.top/www.sunxiaomin.top.key;

        large_client_header_buffers 4 16k;
        client_max_body_size 30m;
        client_body_buffer_size 128k;

        # 域名默认映射到 http://127.0.0.1:7777
        location / {
                #打包后文件放置的位置
                root /home/collective/sunxiaomin.top/web;
                try_files $uri $uri/ /index.html;
                index index.html index.html;
         }	
}
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

# 12.百度统计显示博客浏览量

https://blog.csdn.net/weixin_45732455/article/details/129975128