七天训练营第一天-打造专属云笔记

基于阿里云ECS服务器搭建VuePress 静态网站

• 放开安全组

在默认安全组内放开8080端口

•  安装node.js

命令行界面直接使用阿里云的webshell。

#下载Node.js
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命令
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

# 检查是否添加
node -v
npm -v
npm verision

效果如下：

• 安装 VuePress

#为加快下载安装速度，采⽤淘宝镜像。
npm config set registry https://registry.npm.taobao.org
npm install -g vuepress

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

#项⽬初始化
npm init -y

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

• 配置VuePress

#设置package.json的脚本配置
vim package.json

#修改scripts中的内容如下：
 "scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs"
 },


#在当前⽬录中创建⼀个⽂档⽬录
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⽬录，执⾏命令
vuepress dev docs

效果

• 编辑首页

#编辑doc下的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
---

效果如下