Day1-VuePress云笔记
基于Centos系统搭建Vuepress云笔记
参考：
1.搭建自己专属的静态网站与云笔记：
https://edu.aliyun.com/course/399?spm=a2c6h.14089369.J_2497364210.8.14f11efc0smG2T
2.Linux环境常用命令：
https://edu.aliyun.com/course/149?spm=5176.10731491.0.0.1e0676d8GncPWO
一、环境准备
环境：阿里云的ECS、本地的虚拟机、其他云的云主机均可
（本次实践基于Centos7+某云云主机）
在云主机的安全组规则添加常用端口：SSH(22)、RDP(3389)、8080(Vuepress的默认端口)
（开放必要的端口很重要！！）
二、安装 Node.js
-
首先登陆ECS，使用SSH工具即可（如Xshell）
登录到ECS之后，执行如下命令，下载Node.js 13.9.0 64位安装包
wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
出现如下所示，表明安装成功！
- 创建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
4. 查看node.js版本号，验证是否解压成功
进⼊⽬录：
cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
执⾏：
./node -v
5. 打开配置文件，按如下方式修改环境变量，使得能在任意目录下执⾏node命令
vim ~/.bash_profile
保存修改，然后重载一下：source ~/.bash_profile
- 到其他⽬录下验证
cd
node -v
npm version
npx -v
⾄此，nodejs安装完毕。
三、安装 VuePress
- 全局安装，采⽤淘宝镜像
配置默认镜像网站：npm config set registry https://registry.npm.taobao.org
下载安装镜像：npm install -g vuepress
2. 创建目录文件夹并初始化项目
mkdir try_blogs
cd try_blogs
npm init -y //项⽬初始化
初始化后会⽣成⼀个package.json⽂件，之后进⼊配置步骤。
四、配置 VuePress
- 基本配置步骤
1. 设置package.json的脚本配置
vim package.json
2. 并按以下所示修改scripts中的内容
注：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即可。
3. 在当前⽬录中创建⼀个⽂档⽬录：
mkdir docs
4. 创建.vuepress⽬录：
cd docs
mkdir .vuepress
5. 新建⼀个md⽂件
echo '# Hello VuePress - first blog!' >README.md
6. 创建config.js配置⽂件
cd .vuepress
echo >config.js
7. 创建public⽬录
mkdir public
完成后的⼯作⽬录如下：
- 回到try_blogs⽬录，执⾏命令：vuepress dev docs
- 在浏览器中运⾏，如下所⽰： http://ECS公⽹IP:8080
五、配置首页
首页的内容主要在README.md文件中配置：
---
home: true
heroText: Vue技术博客初试
tagline: 项目结构，关注讨论，每日分享
actionText: 每日更新 →
actionLink: /testlink/
features:
- title: 项目结构
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: 关注讨论
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 每日分享
details: VuePress 为每个⻚⾯预渲染⽣成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: LearnVueonECS Licensed | Copyright © 2020-present
---
最终效果：
补充：初学者建议手动敲入配置命令。上述步骤也可以通过web配置工具配置（如BT-Panel）