Ubuntu搭建VuePress

发表于2022-11-08更新于2022-11-10字数统计408阅读时长2分

什么是VuePress

VuePress由两部分组成：一个以 Vue驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持Vue子项目的文档需求而创建的。

开始搭建

更新安装node

1
2
3
4
5
6
7
sudo apt update
#下载Ubuntu下的nodejs
sudo apt install nodejs
#安装新版的node 和npm
sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

安装yarn

这里我们选择使用yarn，因为新版本使用npm创建树结构可能会报错

1
sudo apt install yarn

搭建VuePress

  1. 创建并进入一个新目录

    1
    mkdir vuepress-starter && cd vuepress-starter

  2. 使用yarn进行初始化

    1
    yarn init

  3. 将VuePress安装为本地依赖

    1
    yarn add -D vuepress

  4. 创建你的第一篇文档

    1
    mkdir docs && echo '# Hello VuePress' > docs/README.md

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

    1
    2
    3
    4
    5
    6
    {
        "scripts": {
            "docs:dev": "vuepress dev docs",
            "docs:build": "vuepress build docs"
        }
    }

  6. 在本地启动服务器

    1
    yarn docs:dev

    此时，VuePress会在 http://localhost:8080 启动一个热重载的开发服务器

部署VuePress

刚才完成的步骤，只是启动了一个本地的服务；当服务器重启或者仅仅断开了和服务器的远程连接，这个本地服务都会关闭。因此，我们需要将VuePress打包部署。

1
yarn docs:build

会在package.json目录下生成一个ROOT目录，这个ROOT就相当于前端文件dist，你可以使用自己喜欢的方式将VuePress部署到自己的服务器上（比如我使用的Nginx）。

root文件