搭建云笔记-VuePress

VuePress

VuePress是以Vue驱动的静态⽹站⽣成器，可以做博客或者⽂档说明。
依赖环境：Node.js

---

安装Node.js依赖环境

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

1. 下载Node.js 13.9.0 64位安装包（淘宝的镜像）

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

执⾏：

./node -v

5. 修改环境变量量，使得能在任意⽬目录下执⾏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

6. 到其他⽬录下验证

cd 
node -v 
npm version 
npx -v

安装VuePress

1. 全局安装
   为加快下载安装速度，采⽤淘宝镜像。

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

2. 创建⼀个⽂件夹作为⽬录

mkdir try_blogs cd try_blogs

3. 项⽬初始化

npm init -y

初始化后会⽣成⼀个package.json⽂件
之后进⼊配置步骤。

配置VuePress

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

vim package.json

修改scripts中的内容如下：

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

2. 在当前⽬录中创建⼀个⽂档⽬录

mkdir docs

3. 创建.vuepress⽬录

cd docs mkdir .vuepress

4. 新建⼀个md⽂件

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

5. 创建config.js配置⽂件

cd .vuepress 
echo >config.js 

6. 创建public⽬录

mkdir public

7. 完成后的⼯作⽬录如下：

try_blogs 
├─ docs //以后要在这⾥⾯写⽂章，直接在此⽂件夹下新建⽂件夹，然后再建 md⽂档就⾏，链接会⾃动⽣成 
│  ├─ README.md // 这个将会是我们以后的⾸页 
│  └─ .vuepress // 这个⾥⾯会存放⼀些配置和组件 
│     └─ public  // 静态⽂件存放地 
│     └─ config.js //配置⽂件，以后的所有配置基本都在这⾥写 
└─ package.json 

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

9. 在浏览器中运⾏： http://ECS公⽹IP:8080

首⻚页配置示例:

1. 保留以上窗⼜作为后续步骤执⾏情况的观察窗⼜，另外打开⼀个窗⼜远程登
   录到ECS服务器, 本实验ECS服务器为 Linux操作系统，因此远程登录ECS实例 的详细步骤，请参考云中沙箱帮助⽂文档远程连接Linux系统。链接地址为：https://edu.aliyun.com/lab/help?spm=5176.11105641.0.0.KD1Pry&menuId=2- 0&docName=doc-remote-connect
2. ⾸页配置
   修改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

---

浏览器刷新后显⽰效果如下图：