[七天训练营 (一) ]使用阿里云ECS搭建VUEPRESS博客

一、课程介绍

1、介绍

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

由VuePress生成的每个页面, 都具有相应的预渲染静态HTML, 它们能提供出色的加载性能, 并且对SEO友好. 然而, 页面加载之后, Vue就会将这些静态内容, 接管为完整的单页面应用程序(SPA). 当用户在浏览站点时, 可以按需加载其他页面.

2、运行原理(how it works)

VuePress网站实际上是由Vue,Vue Router和webpack驱动的单页面应用程序,如果以前使用过Vue, 那么在编写开发自定义主题时(甚至可以使用Vue DevTools来调试你的自定义主题!) 你会融入到熟悉的开发体验中!

在构建过程中, 我们会创建应用程序的服务器渲染版本,并且实际上是通过访问每个路由, 来渲染相应的HTML. 这种方式受到Nuxt的 nuxt generate 命令以及Gatsby等其他项目的启发.

每个markdown文件都使用markdown-it编译为HTML, 然后作为Vue组件的模板进行处理. 这允许你直接在markdown文件中使用Vue, 在需要嵌入动态内容时, 这种使用方式非常有用.

3、特性(features)

内置markdown扩展, 针对技术文档进行了优化
能够利用内嵌在markdown文件中的Vue代码

二、安装VuePress

1、设置安全组

开放8080和22端口。

2、安装Node.js

以Node.js 13.9.0 64位为例。（VuePress⽀持使⽤Yarn和npm来安装， Node.js版本需要≥8才可以。这⾥我们使⽤npm。）

远程登陆到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

使⽤查看node.js版本号命令验证是否解压成功

进入目录: cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

执行: ./node -v

修改环境变量, 使得能在任意目录下执行node命令
在Shell里输入vim ~/.bash_profile

按i键进入编辑模式,改成如下：
PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

粘贴进去, 按键盘右上角ESC键盘, 然后输入:wq保存退出
然后重载一下：source ~/.bash_profile

到其他⽬录下验证
cd
node -v
npm version
npx -v

nodejs安装完毕

3、安装Vue Press

全局安装
为了加快下载安装速度, 采用淘宝镜像.
npm config set registry https://registry.npm.taobao.org
npm install -g vuepress

创建⼀个⽂件夹作为⽬录
mkdir try_blogs
cd try_blogs

项⽬初始化
npm init -y

初始化后会⽣成⼀个package.json⽂件

进⼊配置步骤，目录结构:

4、配置VuePress

5、基本配置步骤

设置package.json的脚本配置
vim package.json
修改scripts中的内容如下：
“scripts”: { “docs:dev”: “vuepress dev docs”, “docs:build”: “vuepress build docs” },
ESC键 :wq 保存退出
在当前⽬录中创建⼀个⽂档⽬录
mkdir docs
创建.vuepress⽬录
cd docs
mkdir .vuepress
新建⼀个md⽂件
echo '# Hello VuePress - first blog!' >README.md
​创建config.js配置⽂件
cd .vuepress
echo >config.js
创建public⽬录
mkdir public
完成后的⼯作⽬录如下：
try_blogs
├─ docs //以后要在这⾥⾯写⽂章，直接在此⽂件夹下新建⽂件夹，然后再建 md⽂档就⾏，链接会⾃动⽣成
│ ├─ README.md // 这个将会是我们以后的⾸页
│ └─— .vuepress // 这个⾥⾯会存放⼀些配置和组件
│ └─——public // 静态⽂件存放地
│ └─——config.js //配置⽂件，以后的所有配置基本都在这⾥写
└─ package.json

回到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即可。

6、首页配置示例

修改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
---

浏览器刷新后页面显示效果如下