阿里云ECS七天训练营（1）

安装环境

首先，得有一个服务器。作为练习，可以使用一下本地机器。或者去阿里云官网租一个ECS服务器，具体购买流程官网都有，不再做介绍。
使用的环境：阿里云赠送的ECS服务器，系统版本：Ubuntu18.04

vuepress

1. vuepress是什么

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue
驱动的主题系统和插件API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。 每一个由
VuePress生成的页面都带有预渲染好的
HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

简单来说，使用vuepress可以比较方便的编写技术文档。

2. 安装vuepress

   安装vuepress要求nodejs版本在8.0版本及以上，可以使用如下命令查看nodejs版本号

   node -v
   

   如果没有安装nodejs，可以使用如下两种方式安装：
   1.ubuntu软件源内已经包含了nodejs，直接使用如下命令即可安装

   sudo apt install nodejs npm
   

   2.可从nodejs官网下载，或者使用命令（这里选择从taobao的源下载，提升下载速度）。

   wget https://npm.taobao.org/mirrors/node/v12.18.3/node-v12.18.3-linux-x64.tar.xz  #选择LTS版本
   

   下载完成之后，解压缩下载的文件

   tar -xvf node-v12.18.3-linux-x64.tar.xz && mv node-v12.18.3-linux-x64 /usr/lib/nodejs
   

   配置环境变量

   nano ~/.bashrc
   ## 在打开的文件末尾添加
   PATH=$PATH:/usr/lib/nodejs/bin
   # 保存退出
   # 是更改生效
   source ~/.bashrc
   

   现在查看nodejs安装配置情况，如果看到类似信息，说明nodejs安装成功了

   root@xxxxx:# node -v
   v12.18.3
   root@xxxxx:# npm -v
   6.14.6
   

   3.设置npm镜像源，提升vuepress下载速度

   npm config set registry https://registry.npm.taobao.org
   npm install -g vuepress
   

3. vuepress配置使用

   首先创建一个目录来存放我们的第一个demo

   mkdir first_demo
   cd first_demo
   npm init -y
   

   init之后会在first_demo目录下创建一个package.json文件，输出其中的内容

   cat package.json
   # 以下是package.json的配置信息
   {
     "name": "first_demo",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",
     "license": "ISC"
   }
   

   修改scripts的值为：

    "scripts": {
   	"docs:dev": "vuepress dev docs",
   	"docs:build": "vuepress build docs" 
   },
   

   在当前目录中创建.docs和vuepress目录

   mkdir docs && cd docs
   mkdir .vuepress
   

   创建一个md文件，这个就是我们的静态网站的首页

   echo '# Hello VuePress -frist blog!' >README.md #显示一行文本
   

   在.vuepress目录下创建一个配置文件和public目录

   cd .vuepress
   mkdir public
   touch config.js
   

   创建完成之后的文件结构如下：

   tree first_demo -a 2 #查看文件树结构
   # first_demo文件树结构如下
   first_demo
   ├── docs
   │   ├── README.md
   │   └── .vuepress
   │       ├── config.js
   │       └── public
   └── package.json
   

   回到first_demo目录，执行命令运行本地服务

   vuepress dev docs
   

   之后便可以通过8080端口访问我们的网页,可以看到如下结果：
   
   修改README.md文件，制作一个简单的主页

   cd fitst_demo/docs 	
   # 修改README.md
   nano README.md
   # 删除之前的hello，添加下面的内容
   ---
   home: true
   heroText: Vue技术博客初试
   tagline: 简洁至上,Vue驱动,高性能
   actionText: 快速上手 →
   actionLink: /testlink/
   features:
   - title: 简洁至上
     details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
   - title: Vue驱动
     details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主>题。
   - title: 高性能
     details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
   footer: MIT Licensed | Copyright ? 2020-present xxxxxx
   ---
   

   效果如下：
   
   至此，简单介绍了vuepress的基本使用，具体的使用，可以参考vuepress的官网：vuepress.org。七天训练第一天完成。