阿里云ECS7天实践训练营进阶路线Day1:搭建VuePress

一、前言

假期里闲来无事，我便报名参加了阿里云的ECS训练营，以便使我能够更加深入地了解和使用服务器，第一天的任务是利用VuePress来完成个人博客的搭建，通过阿里云官方网站上的学习课程，我学习并完成了这一部分的内容。

二、具体流程

1.开通服务器及配置安全组

我使用的是从阿里云的体验实验室开通的服务器（限时两小时，两小时一到实例自动释放）完成的本任务。开通后，通过网页所给的登录url进行子用户登录。

在安全组中分别开放22端口(ssh连接)和8080端口(vuepress)。

2.安装node.js

1. 打开Xshell，分别输入网页提供的用户名和密码ssh连接申请到的服务器，通过以下命令下载node.js压缩包。

wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz 

2. 创建Node.js安装目录。

sudo mkdir -p /usr/local/lib/nodejs

3. 将下载好的压缩包解压到上一步创建的文件夹中。

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

5. 输入查看node.js版本号命令。

若结果如下图所示则解压成功。

./node -v

6. 添加系统环境变量

• 使用vim编辑器打开bash_profile

vim ~/.bash_profile

找到 PATH=$PATH:$HOME/bin，在PATH=$PATH:$HOME/bin 后⾯面添加路径:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin，修改后结果如图。

7.重载bash_profile。

source ~/.bash_profile

8.验证环境变量配置

在任意目录下，使用如下指令验证，若结果与图中一致，则配置成功，至此，node.js安装成功。

node -v

3.安装VuePress

1.使用npm进行安装（这里使用了淘宝源）

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

结果如下图：

2.新建文件夹作为存放博客的目录

mkdir my_blogs
cd my_blogs

3.初始化

通过使用如下命令初始化文件夹，完成后会生成package.json文件，至此VuePress安装成功。

npm init -y

4.配置VuePress

1.设置package.json的脚本配置

使用如下命令修改scripts中的内容：

vim package.json

修改后应该为如下内容：

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

2.创建并进入docs文件夹，在其中创建.vuepress文件夹(文件夹名前加点表示隐藏文件夹)。

mkdir docs
cd docs
mkdir .vuepress

3.创建markdown文件

echo '# Hello VuePress - first blog!' >README.md

4.​在.vuepress目录中创建config.js配置文件和public目录

cd .vuepress
echo >config.js
mkdir public

完成以上步骤后文件树如图：

5.回到my_blog目录，测试项目

输入以下命令：

vuepress dev docs

运行截图如下：
此时在浏览器中输入服务器公网ip:8080，即可访问到如下页面：

6.修改README.md文件，定制自己的博客主页。

使用vim编辑器打开后，输入如下内容进行修改并保存：

home: true
heroText: CHW的博客
tagline: 项目结构，关注讨论，每日分享
actionText: 每日更新 →
actionLink: /testlink/
features:
- title:项目结构
  details:享受Vue+webpack为中心的项目结构，以最少的配置帮助你专注于写作。
- title: 关注讨论
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title:每日分享 
  details:VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。 
footer: LearnVueonECS Licensed | Copyright © 2020-present

7.重新执行vuepress dev docs。

若有错误，可根据报错信息定位到具体位置，需要注意的是：

features:	//冒号后没有空格
- title: 项目结构	//减号后面带一个空格
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 //两个空格

正确部署的结果如图：

8.补充：在确认没有报错之后，使用vuepress build docs可生成静态文件，以便后续的使用。

---

三、参考资料

• 搭建自己专属的静态网站与云笔记
• Vue中文文档