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

news2025/1/12 1:11:16

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

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

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

文章目录

  • 一、安装docker
  • 二、在docker 的centos中安装vuepress
    • 2.1 docker中安装centos 7
    • 2.2 安装node.js
    • 2.3 安装yarn
    • 2.4 全局安装VuePress
    • 2.5 创建VuePress项目
  • 三、VuePress基本配置
    • 3.1 网站信息
    • 3.2 端口号设置
    • 3.3 Markdown显示代码行号
    • 3.3 主题配置
    • 3.3.1 导航栏设置
    • 3.4 侧边栏设置
    • 3.5 自定义页面
  • 四、VuePress的备份和迁移

一、安装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即可恢复，如下图所示
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/416407.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Apache配置与应用

Apache配置与应用

1.基于域名的虚拟主机 为虚拟主机提供域名解析 基于域名&#xff1a;为每个虚拟主机使用不同的域名&#xff0c;但是其对应的 IP 地址是相同的。例如&#xff0c;www.benet.com 和 www.accp.com 站点的 IP 地址都是 192.168.80.10。这是使用最为普遍的虚拟 Web 主机类型。 方法…
阅读更多...
【Java Web】015 -- Maven高级（分模块设计与开发、继承与聚合、私服）

【Java Web】015 -- Maven高级（分模块设计与开发、继承与聚合、私服）

目录 一、分模块设计与开发 1、为什么要分模块设计&#xff1f; 2、实践&#xff1a;分模块开发 ①、实现步骤 3、小结 二、继承与聚合 继承 1、继承关系 ①、为什么要在Maven工程中实现继承&#xff1f; ②、继承关系实现 ③、继承实现小结 ④、maven项目父子工程结构说明 2、…
阅读更多...
Java Stream API 操作完全攻略：让你的代码更加出色 (二)

Java Stream API 操作完全攻略：让你的代码更加出色 (二)

前言 Java Stream 是一种强大的数据处理工具&#xff0c;可以帮助开发人员快速高效地处理和转换数据流。使用 Stream 操作可以大大简化代码&#xff0c;使其更具可读性和可维护性&#xff0c;从而提高开发效率。本文将为您介绍 Java Stream 操作的所有方面&#xff0c;包括 red…
阅读更多...
WMS仓库管理系统,你能操作明白吗？别让＂智能＂变＂滞能＂

WMS仓库管理系统,你能操作明白吗？别让＂智能＂变＂滞能＂

随着社会的进步&#xff0c;智能车间、智能工厂等申报的展开&#xff0c;“智能化”的概念&#xff0c;让企业系统出现更迭。以智能化仓储管理系统为例&#xff0c;企业工厂利用WMS的优势&#xff0c;依照运行的工作标准和运算法则&#xff0c;对仓库进行精细化管理。 WM…
阅读更多...
IC学习笔记22——memory_compilermemory_wrapper

IC学习笔记22——memory_compilermemory_wrapper

一、memory_compiler 1.1 memory_compiler的介绍 memory_compiler为一系列工具的统称，用于生成芯片开发所需要的memory。芯片开发中所需要的memory为sram、rom等。很多公司都有自己开发的memory_compiler工具。 1.2 SRAM基础 sram写操作（写1） 将要写入的数据“1”通过写入…
阅读更多...
Vue学习笔记（3. 基本语法，数据绑定，指令）

Vue学习笔记（3. 基本语法，数据绑定，指令）

1. 基本语法 vue2的基本语法如下&#xff1a; <html> <head> <title>testVUE</title> <script src"https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head><body><div id"app">模板…
阅读更多...
【操作系统】深入理解Linux虚拟内存管理

【操作系统】深入理解Linux虚拟内存管理

【操作系统】深入理解Linux虚拟内存管理 本篇跟大家说说内存管理&#xff0c;内存管理还是比较重要的一个环节&#xff0c;理解了它&#xff0c;至少对整个操作系统的工作会有一个初步的轮廓。 虚拟内存 如果你是电子相关专业的&#xff0c;肯定在大学里捣鼓过单片机。 单片…
阅读更多...
出口欧盟认证机构为什么推荐CE认证

出口欧盟认证机构为什么推荐CE认证

产品做CE证书要什么好处&#xff0c;CE证书要什么作用&#xff1f; 在中国很多中小企业困扰的是&#xff0c;好不容易走出国门接到来自国外的订单。却因为没有相应的产品安全认证而无法顺利取得订单。或者当产品到达目的地后&#xff0c;因为无法提供相应的产品安全认证证明文件…
阅读更多...
网络编程 端口状态都有哪些？

网络编程 端口状态都有哪些？

客户端各个状态&#xff1a; 三次握手阶段 CLOSED&#xff08;持续状态&#xff09; 关闭状态 SYN_SENT &#xff08;非常短暂&#xff09; SYN_SENT状态表示请求连接&#xff0c;当你要访问其它的计算机的服务时首先要发个同步信号给该端口&#xff0c;此时状态为SYN_SENT&a…
阅读更多...
数据库MySQL —— 存储过程

数据库MySQL —— 存储过程

目录 一、介绍 二、基本语法 三、变量 1. 系统变量 2. 用户自定义变量 3. 局部变量 四、流程控制语句 1. if判断 2. 参数 3. case 4. 循环 4.1 while 4.2 repeat 4.3 loop 五、游标 - cursor 六、条件处理程序 - handler 七、存储函数 一、介绍 存储过…
阅读更多...
自学大数据第17天~Hive安装与配置及常用命令

自学大数据第17天~Hive安装与配置及常用命令

嗨咯,好几天没更新了,你以为我不知道吗? 这几天主要还是学习,学习如何再学习! 简述以下这几天都学习了什么~ MongoDB的命令 GaussDB(for Mongo)集群架构与社区版架构的对比 社区版(副本集架构): mongos(路由) config(记录元数据) shard(负责计算和存储) GaussDB(for Mongo)存…
阅读更多...
uni-app--》uni-app的生命周期讲解

uni-app--》uni-app的生命周期讲解

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;uni-app &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&#xf…
阅读更多...
数据库的安全性

数据库的安全性

安全性 安全性保护手段 用户标识与鉴别自主存取控制强制存取控制视图审计和数据加密 数据库的安全性是指保护数据库防止因用户非法使用数据库造成数据泄露、更改或破坏 数据库安全保护分层 物理层人际层网络层操作系统层数据库系统层 物理层的安全性是指计算机系统所位于的节…
阅读更多...
银行数字化转型导师坚鹏：银行数据治理和数据质量问题解决

银行数字化转型导师坚鹏：银行数据治理和数据质量问题解决

银行数据治理和数据质量问题解决 课程背景&#xff1a; 很多银行存在以下问题&#xff1a; 不知道如何准确理解银保监会数据治理相关政策及要求&#xff1f; 不清楚如何有效解决数据治理及数据质量遇到的重要问题&#xff1f; 科技条线不清楚如何配合业务人员更好地提高数据…
阅读更多...
模板方法设计模式(TemplateMethod)

模板方法设计模式(TemplateMethod)

文章目录抽象类语法使用说明注意事项模板方法设计模式代码示例应用抽象类 随着继承层次中一个个新子类的定义&#xff0c;类变得越来越具体&#xff0c;而父类则更一般&#xff0c;更通用。类的设计应该保证父类和子类能够共享特征。有时将一个父类设计得非常抽象&#xff0c;以…
阅读更多...
Centos7安装Navicat15中文

Centos7安装Navicat15中文

1. ubuntu 下制作AppImage镜像 sudo apt-get install libcapstone-devsudo apt-get install cmake git clone https://github.com/keystone-engine/keystone.git cd keystone mkdir build cd build ../make-share.sh sudo make install sudo ldconfigsudo apt-get install rap…
阅读更多...
【行为型模式】模板方法模式

【行为型模式】模板方法模式

文章目录优秀借鉴1、概述2、结构3、实现方式3.1、案例引入3.2、结构分析3.3、具体实现4、模板方法模式优缺点5、应用场景优秀借鉴 黑马程序员Java设计模式详解-模板方法模式概述 1、概述 模板方法模式(Template Method)是一种设计模式&#xff0c;它定义了一个算法的框架&am…
阅读更多...
Nacos 2.2.2 发布，优化启动体验和鉴权提示

Nacos 2.2.2 发布，优化启动体验和鉴权提示

Nacos 社区近期发布了 2.2.0.1 和 2.2.1 版本&#xff0c;对默认鉴权插件做出了较大的改动&#xff0c;详情查看**风险说明 [ 1] **及 **2.2.1 发布 [ 2] **。由于 Nacos 默认控制台 ui 中默认依赖了 token.secret.key&#xff0c;所以在移除了 token.secret.key 的默认值后&am…
阅读更多...
【ROS2指南-9】Bag的record和play操作

【ROS2指南-9】Bag的record和play操作

目标&#xff1a;记录在某个话题上发布的数据&#xff0c;以便您可以随时回放和检查它。 教程级别&#xff1a;初学者 时间&#xff1a; 10分钟 内容 背景 先决条件 任务 1 设置 2 选择一个主题 3 ros2包记录 4 ros2 包信息 5 ros2包玩 概括 下一步 相关内容 背景 r…
阅读更多...
Android 性能优化的重要性~

Android 性能优化的重要性~

随着移动设备和应用程序市场不断发展&#xff0c;Android应用程序变得越来越多&#xff0c;对于开发者来说&#xff0c;他们必须使自己的应用程序与其他应用程序相比更加高效和快速&#xff0c;以吸引用户和确保业务成功。而Android用户期望应用程序如同其他设备上的应用程序一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023