linux（docker）下使用VuePress从零开始搭建自己的博客（一）：VuePress环境搭建

目标：在linux centos下使用VuePress搭建博客系统，最好能利用docker进行备份和迁移。
本节内容：本节主要讲述VuePress的环境搭建过程，VuePress的基本配置以及备份和迁移。详细记录了从零开始搭建的过程，以及搭建过程中遇到的各种错误和解决过程。

软硬件环境：
宿主机：centos
docker（centos镜像）

参考：https://hellogitlab.com/about/blog/build_your_vuepress_blog.html

一、安装docker

docker的安装过程参考我另一篇博客：
https://blog.csdn.net/AnChenliang_1002/article/details/125397467
该链接的文章中第2.2节记录了docker的安装过程。

二、在docker 的centos中安装vuepress

2.1 docker中安装centos 7

docker pull centos:7.8.2003

然后运行该镜像生成容器：

docker run  -it -p 8080:8080 afb6fca791e0 bash

2.2 安装node.js

curl --silent --location https://rpm.nodesource.com/setup_8.x | bash -
yum install nodejs -y

如下

查看node.js版本信息node --version

2.3 安装yarn

#添加yarn的yum源
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo
#安装yarn
yum install yarn -y

结果如下

查看yarn版本

2.4 全局安装VuePress

使用yarn工具安装VuePress。

yarn global add vuepress

报错如下：

warning url-loader@1.1.2: Invalid bin field for "url-loader".
error chalk@4.1.2: The engine "node" is incompatible with this module. Expected version ">=10". Got "8.17.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/global for documentation about this command.

看错误是node版本不匹配，需要的是10以上的版本，但是现在的版本是8.17.0.

解决办法：

 yum clean all && yum makecache fast
 yum install -y gcc-c++ make
 curl -sL https://rpm.nodesource.com/setup_12.x | bash -
 yum install nodejs

安装时再次报错：

nodejs-12.22.12-1nodesource.x8 FAILED
https://rpm.nodesource.com/pub_10.x/el/7/x86_64/nodejs-12.22.12-1nodesource.x86_64.rpm: [Errno 14] HTTPS Error 404 - Not Found0 B  --:--:-- ETA
Trying other mirror.
To address this issue please refer to the below wiki article

https://wiki.centos.org/yum-errors

If above article doesn't help to resolve this issue please use https://bugs.centos.org/.



Error downloading packages:
  2:nodejs-12.22.12-1nodesource.x86_64: [Errno 256] No more mirrors to try.

报错原因：
之前系统中已经安装了nodejs，系统中有重复文件，导致无法安装

解决方法：
1、yum命令清除缓存，执行下列命令：

yum clean all

清除后，再次执行安装命令

yum install nodejs

可以发现安装成功，版本是10.24.1

然后再安装yarn：

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo
yum install yarn -y
yarn -v

再次安装yarn global add vuepress，如果你可以安装成功就不用看下面的了。

我这边发现发现还是报错版本不匹配：

没办法了，只能忽略版本检测了。

 yarn config set ignore-engines true

再次安装yarn global add vuepress发现可以了：

查看vuepress命令是否可用

whereis vuepress
ls -lah /usr/local/bin/vuepress 

添加软链接

ln -s /usr/local/bin/vuepress /usr/bin/vuepress

查看vuepress的版本信息

vuepress -v

2.5 创建VuePress项目

初始化项目

[root@9c1fcbc836fd /]# cd /home/
[root@9c1fcbc836fd home]# ls
[root@9c1fcbc836fd home]# mkdir myblog && cd myblog
[root@9c1fcbc836fd myblog]# yarn init -y
yarn init v1.22.19
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
Done in 0.07s.
[root@9c1fcbc836fd myblog]# ls
package.json
[root@9c1fcbc836fd myblog]# cat package.json
{
  "name": "myblog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

新建docs文件夹
docs文件夹作为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹。

[root@9c1fcbc836fd myblog]# mkdir docs
[root@9c1fcbc836fd myblog]# ls -lah
total 16K
drwxr-xr-x 3 root root 4.0K Apr  9 06:07 .
drwxr-xr-x 1 root root 4.0K Apr  9 06:05 ..
drwxr-xr-x 2 root root 4.0K Apr  9 06:07 docs
-rw-r--r-- 1 root root   87 Apr  9 06:05 package.json

设置package.json

VuePress中有两个命令，vuepress dev docs命令运行本地服务，通过访问http://localhost:8080即可预览网站，vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。

在package.json中添加以下内容

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

添加后，内容如下:

[root@9c1fcbc836fd myblog]# vim package.json
[root@9c1fcbc836fd myblog]# cat package.json
{
  "name": "myblog",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "license": "MIT"
}

创建README.md
在docs目录下新建README.md文件，并写入内容：

[root@9c1fcbc836fd myblog]# echo '# Hello VuePress!' > docs/README.md
[root@9c1fcbc836fd myblog]# cat docs/README.md
# Hello VuePress!
[root@9c1fcbc836fd myblog]#

运行项目
使用yarn docs:dev运行项目
运行时报错：

[root@6203b9b0d483 myblog]# yarn docs:dev
yarn run v1.22.19
$ vuepress dev docs
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
Error: Cannot find module 'vue-template-compiler'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.resolve (internal/modules/cjs/helpers.js:33:19)
    at loadFromContext (/usr/local/share/.config/yarn/global/node_modules/vue-loader/lib/compiler.js:30:26)
    at loadTemplateCompiler (/usr/local/share/.config/yarn/global/node_modules/vue-loader/lib/compiler.js:37:12)
    at exports.resolveCompiler (/usr/local/share/.config/yarn/global/node_modules/vue-loader/lib/compiler.js:25:23)
    at VueLoaderPlugin.apply (/usr/local/share/.config/yarn/global/node_modules/vue-loader/lib/plugin-webpack4.js:91:22)
    at webpack (/usr/local/share/.config/yarn/global/node_modules/webpack/lib/webpack.js:51:13)
    at DevProcess.createServer (/usr/local/share/.config/yarn/global/node_modules/@vuepress/core/lib/node/dev/index.js:241:22)
    at resolve (/usr/local/share/.config/yarn/global/node_modules/@vuepress/core/lib/node/App.js:477:14)
    at new Promise (<anonymous>)
    at App.dev (/usr/local/share/.config/yarn/global/node_modules/@vuepress/core/lib/node/App.js:470:25)
    at process._tickCallback (internal/process/next_tick.js:68:7)

出现这个问题的原因是缺少了 ‘vue-template-compiler’ 模块，解决办法：
在myblog目录下安装vue-template-compiler’：

[root@6203b9b0d483 myblog]# pwd
/home/myblog
[root@6203b9b0d483 myblog]# npm install vue-template-compiler
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN myblog@1.0.0 No description
npm WARN myblog@1.0.0 No repository field.

+ vue-template-compiler@2.7.14
added 3 packages from 2 contributors and audited 3 packages in 3.554s
found 0 vulnerabilities

然后再运行 yarn docs:dev即可成功：

访问http://你的ip或域名:8080/ 此时可以在界面上面看到"Hello VuePress!"，说明一个基础的VuePress博客就配置好。

生成静态文件
使用yarn docs:build命令生成静态文件。
默认情况下，文件将会被生成在 .vuepress/dist，当然，你也可以通过 .vuepress/config.js 中的 dest 字段来修改，生成的文件可以部署到任意的静态文件服务器上。

[root@6203b9b0d483 myblog]# yarn docs:build
yarn run v1.22.19
$ vuepress build docs
wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

✔ Client
  Compiled successfully in 11.72s

✔ Server
  Compiled successfully in 7.37s

wait Rendering static HTML...
success Generated static files in docs/.vuepress/dist.

Done in 14.23s.

[root@6203b9b0d483 myblog]# ls docs/
README.md
[root@6203b9b0d483 myblog]# ls -a docs/
.  ..  README.md  .vuepress

此时，生成了.vuepress目录。

• docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
• docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。

创建config.js

进入到.vuepress目录中，然后创建config.js，config.js是VuePress必要的配置文件，它导出为一个javascript对象。

[root@6203b9b0d483 myblog]# cd docs/
[root@6203b9b0d483 docs]# ls -a
.  ..  README.md  .vuepress
[root@6203b9b0d483 docs]# cd .vuepress/
[root@6203b9b0d483 .vuepress]# ls
dist
[root@6203b9b0d483 .vuepress]# vim config.js
[root@6203b9b0d483 .vuepress]#
[root@6203b9b0d483 .vuepress]#
[root@6203b9b0d483 .vuepress]#
[root@6203b9b0d483 .vuepress]#
[root@6203b9b0d483 .vuepress]# cat config.js
module.exports = {
    title: 'Hello ACL VuePress',
    description: 'Just playing around'
}
[root@6203b9b0d483 .vuepress]#

创建public文件夹
进入到.vuepress目录中，然后创建public文件夹，此文件夹主要放静态资源文件，例如favicons和PWA的图标。

[root@6203b9b0d483 .vuepress]# mkdir -p public/{img,css}
[root@6203b9b0d483 .vuepress]# ls
config.js  dist  public
[root@6203b9b0d483 .vuepress]# ls public/
css  img
[root@6203b9b0d483 .vuepress]#

img存放图片，css存放样式文件。此时，项目的结构差不多就出来了。

myblog
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       │   ├── img
│       │   └── css
│       └── config.js
└── package.json

以上只是简单了搭建了一下博客的开发环境，接下来是博客主要的基本配置config.js，也是必须要做的。

此时回到mylog目录下yarn docs:dev运行项目，打开http://你的ip或域名:8080/ 查看到界面如下图所示:

三、VuePress基本配置

一个docs/.vuepress/config.js的主要配置包括网站的标题、描述、主题、端口号的配置。这里简单的列举一下常用配置。

3.1 网站信息

我们对docs/.vuepress/config.js进行一些修改，首先设置网站的标题和网站的描述信息。

module.exports = {
    title: '个人主页', 
    description: '乘凉的博客',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
    ]
}

• title：网站标题
• description：网站描述
• head：额外的需要被注入到当前页面的HTML"head"中的标签，其中路径的"/"就是public资源目录。

具体配置详情请看文档：https://hellogitlab.com/about/blog/build_your_vuepress_blog.html#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE

3.2 端口号设置

VuePress默认的端口号是8080，通过以下设置可以将端口设置为80，并将logo.png图片放到/home/myblog/docs/.vuepress/public/img下面

module.exports = {
    title: '个人主页', 
    description: '乘凉的博客',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
    ],
    port: 80
}

备注：如果你是在容器内进行修改的端口，则需要对该容器进行重新端口映射，因为启动容器时只对8080端口进行了映射。重新映射端口的方法，建议使用docker commit对容器生成镜像，再用新生成的镜像生成新容器，生成新容器时端口选择80即可。可参考下面第四节网站备份和迁移过程。

此时回到mylog目录下yarn docs:dev运行项目，打开http://你的ip或域名/ 查看到界面如下图所示:

3.3 Markdown显示代码行号

 vim docs/.vuepress/config.js

[root@f32a88ff5dc6 myblog]# vim docs/.vuepress/config.js
[root@f32a88ff5dc6 myblog]# cat docs/.vuepress/config.js
module.exports = {
    title: '个人主页',
    description: '乘凉的博客',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
    ],
   port: 80,
   markdown: {
        lineNumbers: true,  // 代码显示行号
    }
}

3.3 主题配置

3.3.1 导航栏设置

导航栏设置配置themeConfig.nav属性。参考：https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F-logo

[root@f32a88ff5dc6 myblog]# vim docs/.vuepress/config.js
[root@f32a88ff5dc6 myblog]# cat docs/.vuepress/config.js
module.exports = {
    title: '个人主页',
    description: '乘凉的博客',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
    ],
   port: 80,
   markdown: {
        lineNumbers: true,  // 代码显示行号
    },
    themeConfig: {
        nav: [
            { text:'首页', link: '/'},
            {
                text: '博文',
                items: [
                    { text: 'Python', link: '/python/' },
                    { text: 'Golang', link: '/golang/' },
                    { text: 'Web', link: '/web/' }

                ]
            },
            { text:'关于', link: '/about/'},
            { text: 'Github', link: 'https://www.github.com/meizhaohui' }
        ]
    }
}

• 导航栏配置nav，此配置主要用于配置导航栏的链接，例如以上首页的link为"/"，默认是根目录(docs目录)下的README.md。
• "/python/"链接到根目录docs下的python文件夹下的README.md文件。
• "/golang/"链接到根目录docs下的golang文件夹下的README.md文件。
• "/web/"链接到根目录docs下的web文件夹下的README.md文件。
• "/about/"链接到根目录docs下的about文件夹下的README.md文件。

准备博文或关于页面的基础数据，在docs目录下面新建python,golang,web,about等文件夹，并在各文件夹下面创建README.md文件。

[root@f32a88ff5dc6 myblog]# cd docs/
[root@f32a88ff5dc6 docs]# mkdir -p ./{python,golang,web,about}
[root@f32a88ff5dc6 docs]# echo "# test:Python Docs" > python/README.md
[root@f32a88ff5dc6 docs]# echo "# test:Golang Docs" > golang/README.md
[root@f32a88ff5dc6 docs]# echo "# test:web Docs" > web/README.md
[root@f32a88ff5dc6 docs]# echo "# test:About Docs" > about/README.md
[root@f32a88ff5dc6 docs]#

以上首先创建几个子文件夹，然后在各目录中创建README.md文件。

此时回到mylog目录下yarn docs:dev运行项目，打开http://你的ip或域名/ 查看到界面如下图所示:

可以看到在右上角出现了导航栏，可以看到多出了"首页"、“博文”、“关于”、“Github"等导航，我们点击"博文”，可以看到下拉框中显示了我们定义的"Python"、“Golang”、"Web"三个超链接。

点击相应的超链接，可以打开各自的页面，如打开"Python"超链接，跳转到 http://anchenliang.com/python/页面：

3.4 侧边栏设置

想要使侧边栏（Sidebar）生效，需要配置themeConfig.sidebar，基本的配置，需要一个包含了多个链接的数组。

侧边栏设置示例:

[root@f32a88ff5dc6 myblog]# vim docs/.vuepress/config.js
[root@f32a88ff5dc6 myblog]# cat docs/.vuepress/config.js
module.exports = {
    title: '个人主页',
    description: '乘凉的博客',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
    ],
    port: 80,
    markdown: {
        lineNumbers: true // 代码显示行号
    },
    themeConfig: {
        nav: [
            { text:'首页', link: '/'},
            {
                text: '博文',
                items: [
                    { text: 'Python', link: '/python/' },
                    { text: 'Golang', link: '/golang/' },
                    { text: 'Web', link: '/web/' }
                ]
            },
            { text:'关于', link: '/about/'},
            { text: 'Github', link: 'https://www.github.com/meizhaohui' }
        ],
        sidebar: {
            '/python/': [
                {
                    title: 'Python基础知识',
                    collapsable: false,  // 是否可折叠，默认可折叠true
                    children: [
                        "python1",
                        "python2",
                        "python3"
                    ]
                },
                {
                    title: 'Python Web',
                    collapsable: false,
                    children: [
                        "python4",
                        "python5",
                        "python6"
                    ]
                },
            ],
            '/golang/': [
                "",
                "golang1",
                "golang2",
                "golang3"
            ],
            '/web/': [
                "",
                "web1"
            ],
        },
        sidebarDepth: 2, // 侧边栏显示深度，默认为1，即显示一级标题
    }
}
[root@f32a88ff5dc6 myblog]#

• sidebar用于设置侧边栏，‘/python/’、 ‘/golang/’、'/web/'与导航栏类似，分别指代docs根目录下的python,golang,web等文件夹。
• '/python/'定义下，通过在list中定义两个json数据进行侧边栏分组，将"python1"、“python2”、“python3"分到’Python基础知识’组中，将"python4”、“python5”、"python6"分到’Python Web’组中。
• collapsable: false表示侧边栏是否可折叠，false为不可折叠，默认为true，表示可折叠，可参加golang或web侧边栏的效果。
  ‘- /python/’、 ‘/golang/’、'/web/'的定义就组成了多个侧边栏，不同的博文子类的侧边栏显示不一样。
• 侧边栏children列表中定义的是Markdown文件对应的名称，如"python1"对应python文件夹下面python1.md文件，"python2"对应python文件夹下面python2.md文件，"golang1"对应golang文件夹下面golang1.md文件。
• sidebarDepth嵌套的标题链接深度，默认的深度为1。

准备侧边栏的基础数据：

[root@f32a88ff5dc6 docs]# echo "# python1" > python/python1.md
[root@f32a88ff5dc6 docs]# echo "# python2" > python/python2.md
[root@f32a88ff5dc6 docs]# echo "# python3" > python/python3.md
[root@f32a88ff5dc6 docs]# echo "# python4" > python/python4.md
[root@f32a88ff5dc6 docs]# echo "# python5" > python/python5.md
[root@f32a88ff5dc6 docs]# echo "# python6" > python/python6.md
[root@f32a88ff5dc6 docs]# echo -e "# Golang 1\n## 二级标题\n" > golang/golang1.md
[root@f32a88ff5dc6 docs]# echo -e "# Golang 2\n## 二级标题\n" > golang/golang2.md
[root@f32a88ff5dc6 docs]# echo -e "# Golang 3\n## 二级标题\n" > golang/golang3.md
[root@f32a88ff5dc6 docs]# echo -e "# web 1\n ## head 2" > web/web1.md
[root@f32a88ff5dc6 docs]#

此时回到mylog目录下yarn docs:dev运行项目，打开http://你的ip或域名/python 查看到界面如下图所示:

可以看到Python相关的侧边栏正常显示出来了，并且进行了分组显示。

打开http://你的ip或域名/golang` 查看到界面如下图所示:

可以看到golang相关的侧边栏正常显示出来了，并且进行了分组显示。

3.5 自定义页面

默认的主题提供了一个首页（Homepage）的布局(用于这个网站的主页)。想要使用它，需要在你的根级 README.md设置home: true，然后添加数据。

重新定义一下docs目录下的README.md文件：

[root@f32a88ff5dc6 myblog]# vim docs/README.md
[root@f32a88ff5dc6 myblog]#
[root@f32a88ff5dc6 myblog]# cat docs/README.md
---
home: true
heroImage: img/logo.png
actionText: 查看我的博文 →
actionLink: /python/
features:
- title: Hello Python
  details: 欢迎学习python
- title: Hello Golang
  details: 欢迎学习Golang
- title: Hello Web
  details: 欢迎学习web
footer: MIT Licensed | Copyright © 2019-present Chenliang An
---
[root@f32a88ff5dc6 myblog]#

此时回到mylog目录下yarn docs:dev运行项目，打开http://你的ip或域名/ 查看到界面如下图所示:

四、VuePress的备份和迁移

我选择在docker中安装VuePress，目的就是方便网站的备份和迁移，思路是直接对配置好VuePress的容器commit生成镜像文件，使用该镜像文件就可以在任意设备上进行迁移了。

在宿主机上进行如下操作：

[root@VM-8-3-centos VuePress]# docker ps
CONTAINER ID   IMAGE          COMMAND   CREATED              STATUS              PORTS                                              NAMES
8573841b0f63   1d80b997d056   "bash"    About a minute ago   Up About a minute   0.0.0.0:80->80/tcp, :::80->80/tcp, 8080-8081/tcp   reverent_burnell
[root@VM-8-3-centos VuePress]#
[root@VM-8-3-centos VuePress]# docker commit -a "anchenliang" -m "creat new vuepress img" 8573841b0f63  vuepress:v1.2
sha256:f263a905063f420d853dfdbf49abd9f641739ed76ffeda21bd67846cf96f0fa8
[root@VM-8-3-centos VuePress]#
[root@VM-8-3-centos VuePress]# docker images
REPOSITORY      TAG        IMAGE ID       CREATED         SIZE
vuepress        v1.2       f263a905063f   7 seconds ago   1.22GB
vuepress        v1.1       1d80b997d056   2 hours ago     1.22GB
vuepress        v1.0       619973d5bf32   3 hours ago     1.22GB
vuepress_0409   latest     9862b7a7ff70   5 hours ago     1.22GB
centos          7.8.2003   afb6fca791e0   2 years ago     203MB

以上docker commit指令的含义是：对8573841b0f63 容器进行commit操作，生成vuepress:v1.2镜像，该镜像的作者是anchenliang，该镜像的描述是creat new vuepress img。可以看到宿主机内有了新的镜像，id是f263a905063f420d853dfdbf49abd9f641739ed76ffeda21bd67846cf96f0fa8。
将该镜像导出为tar文件：

#将vuepress:v1.2镜像导出，以vorepress_bak_0409.tar命名

[root@VM-8-3-centos VuePress]# docker save -o vorepress_bak_0409.tar vuepress:v1.2
[root@VM-8-3-centos VuePress]# ls
vorepress_bak_0409.tar

在当前目录下生成了vuepress_bak.tar文件。
将此文件保存下来，将其导入到另一台服务器设备；
使用docker load -i vorepress_bak_0409.tar导入镜像，如下所示：

然后运行该容器生成镜像：

docker run -it -p 80:80 f263a905063f bash

进入容器后，启动项目即可：

cd /home/myblog/
yarn docs:dev

访问本机ip查看效果：

需要注意的是，使用容器里运行vuePress有个缺点，那就是如果退出终端页面，此程序就会结束，因此为了能维持程序的声明周期，可以通过tmux；首先在宿主机上输入tmux（如果没有该命令，那就安装一下：yum install tmux），然后就会出现一个终端页面，在此终端里进入容器，启动项目，这样即使关闭中断，程序也不会断。

那么在关闭终端后，想要再次进入该终端，该怎么办呢？
先用tmux ls查看刚刚关闭的终端的id，然后tmux a -t +id即可恢复，如下图所示