学习内容—打造专属云笔记
- 使用ECS，快速搭建、管理VuePress静态网站
第一步：安装Node.js
我使用的环境是Centos7.8
1、登录到云服务器
image.png
2、下载Node.js安装包
执行下面的命令
wget https://npm.taobao.org/mirros/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
如图
image.png
3、创建Node.js 安装目录，并将二进制文件解压到该目录
sudo mkdir -p /usr/local/lib/nodejs
sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
image.png
4、验证node.js是否解压成功
进入目录：cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
执行：./node -v
image.png
5、修改环境变量，使得在任意目录下能执行node命令
修改配置文件：vim ~/.bash_profile
找到 PATH = $PATH$ HOME /bin，在PATH=$PATH:$HOME/bin后⾯面添加路路
径:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin，结果为：
PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
保存修改，然后重载⼀一下： source ~/.bash_profile
image.png
6、切换到其他目录验证一下
cd
node -v
npm version
npx -v
image.png
第二部: 安装VuePress
1、全局安装
npm config set registry https://registry.npm.taobao.org
npm install -g vuepress
image.png
2、创建文件夹，作为目录
mkdir try_blogs
cd try_blogs
3、项目初始化
npm init -y
image.png
第三步：配置VuePress
1、设置package.json的脚本配置
vim package.json
修改scripts中的内容如下：
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
image.png
2、在当前目录创建一个文档目录
mkdir docs
3、创建.vuepress⽬录
cd docs
mkdir .vuepress
4、新建⼀个md⽂件
echo '# Hello VuePress - first blog!' >README.md
5、 创建config.js配置⽂件
cd .vuepress
echo >config.js
6、创建public⽬录
mkdir public
image.png
7、回到try_blogs⽬录，执⾏命令
vuepress dev docs
注： VuePress中有两个命令:
vuepress dev docs命令运⾏本地服务，通过访问(http://localhost:8080)即可预览⽹
站
vuepress build docs 命 令 ⽤ 来 ⽣ 成 静 态 ⽂ 件 ， 默 认 情 况 下 ， 放 置 在
docs/.vuepress/dist⽬录中，当然你也可以在docs/.vuepress/config.js中的dest字段
来修改默认存放⽬录。在这⾥将两个命令封装成脚本的⽅式，直接使⽤npm run
docs:dev和npm run docs:build即可。
image.png
第四步：修改首页
修改README.md⽂件，将原来的内容删除后，将以下内容拷贝进去
image.png
刷新浏览器
image.png
