ECS七天训练营1----搭建静态网站VuePress

清风明月 2020-08-06 AM 1821℃ 0条

**1.下载node.js**
```
wget https://npm.taobao.org/mirrors/node/v14.7.0/node-v14.7.0-linux-x64.tar.xz
```
**2.创建安装目录后解压，查看是否安装从成功**

创建Node.js安装⽬录 
```
sudo mkdir -p /usr/local/lib/nodejs
```
将⼆进制⽂件解压到要安装⽬录 
```
sudo tar -xJvf node-v14.7.0-linux-x64.tar.xz  -C /usr/local/lib/nodejs 
```
使⽤查看node.js版本号命令验证是否解压成功
进⼊⽬录：```cd /usr/local/lib/nodejs/node-v14.7.0-linux-x64/bin```
执⾏行行：```./node -v```

**3.修改环境变量为以下内容，并重载保存**
```
vim ~/.bash_profile
```
```
在 PATH=$PATH:$HOME/bin 后⾯面添加路路径 :/usr/local/lib/nodejs/node-v14.7.0-linux-x64/bin ，结果为：
PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v14.7.0-linux-x64/bin
退出保存（:wq），然后加载
```
```
source ~/.bash_profile
```
>查看是否成功 
```
node -v
```
>显示出版本号即可，v14.7.0
```
npx -v
```
>显示6.14.7即可

**4.安装vuePress**
```
npm config set registry https://registry.npm.taobao.org
npm install -g vuepress
```
**5.创建⼀个⽂件夹作为⽬录，初始化项目**
```
mkdir try_blogs
cd try_blogs
npm init -y
```
<img src="https://blog.6sin.cn/usr/uploads/2020/08/2181382781.png" alt="20200622173310585.png" />

**6.设置package.json的脚本配置**
```
vim package.json
```
修改package.json中的内容如下：
```
{
  "name": "try_blogs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "docs:dev": "vuepress dev docs",##这里进行修改，此为修改后代码
    "docs:build": "vuepress build docs" ##此为修改后代码
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
<img src="https://blog.6sin.cn/usr/uploads/2020/08/491073088.png" alt="20200622173618170.png" />
**7.在当前⽬录中创建⼀个vue目录并新建md文件**
```
mkdir docs
cd docs
mkdir .vuepress
echo '# Hello VuePress - ﬁrst blog!' >README.md 
```
<img src="https://blog.6sin.cn/usr/uploads/2020/08/3961398261.png" alt="20200622173817133.png" />

**8.创建config.js配置文件和相关目录**
```
cd .vuepress
echo >conﬁg.js
mkdir public
```
<img src="https://blog.6sin.cn/usr/uploads/2020/08/2383348962.png" alt="20200622174010557.png" />
<img src="https://blog.6sin.cn/usr/uploads/2020/08/2704948924.png" alt="20200622180240748.png" />
**9.运行本地服务**
> 一定要在 try_blogs 目录下运行启动命令

```
vuepress dev docs
```
<img src="https://blog.6sin.cn/usr/uploads/2020/08/2002875483.png" alt="20200622174055766 (1).png" />
<img src="https://blog.6sin.cn/usr/uploads/2020/08/2282378950.png" alt="20200622174754143.png" />

浏览器中输入 http://ECS公⽹IP:8080

>Tips：项目默认是8080端口，如果端口被占，可以通过.vuepress/config.js中port字段值进行修改
```
module.exports = {
    port: 8081
}
```

标签: 阿里云

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://blog.6sin.cn/aliyun/11.html

上一篇 test

下一篇 ECS七天训练营2----搭建wiki知识库

评论啦~

2021 happy2021年02月08日 21:29:57
开学的第一周2019年08月31日 22:33:56
第一条动态！！！！2019年08月10日 18:39:35

阿里云 Typecho

清风明月清风明月云盘清风明月工具

ECS七天训练营1----搭建静态网站VuePress

评论啦~

栏目分类

博主动态 ~

标签云

友情链接

ECS七天训练营1----搭建静态网站VuePress

 评论啦~

 栏目分类

博主动态 ~

标签云

友情链接

评论啦~

栏目分类

博主动态 ~

标签云

友情链接