Ali Camp Notes1:VuePress

前言

• 阿里云第二期进阶班第一天，任务是搭建一个利用VuePress搭建自己专属的静态网站与云笔记 ，因为是静态网站实现起来非常的轻松。整个就是不断的装软件装软件装软件没有什么难度

• 系统版本CentOS7.7

• VuePress是为了支持 vue 及其子项目的文档需求而写的一个项目，VuePress界面十分简洁，并且非常容易上手，如果有一定基础不到半小时就可以将项目架构搭好。现在已经有很多这种类型的文档，如果你有写技术文档的项目的话，VuePress绝对可以成为你的备选项之一。

• VuePress官网就是vuepress的应用效果可以参考。

安装 Node.js

• 在安装VuePress前我们还需要安装Node.js 阿里镜像源

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

• 且需要请确保你的 Node.js 版本 >= 8
• 由于是压缩包我们需要创建一个文件夹

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

• 解压

sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs

• 进入文件bin使⽤./node -v查看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

安装 VuePress 程序

• 前面安装了Node.js现在我们可以使用npm安装VuePress

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

• 创建⼀个⽂件夹作为⽬录

mkdir try_blogs
cd try_blogs

• 项⽬初始化

npm init -y

配置 VuePress

• 设置package.json的脚本配置

  vim package.json
  修改scripts中的内容如下：
   "scripts": {
         
   "docs:dev": "vuepress dev docs",
   "docs:build": "vuepress build docs"
   },
  

• 在当前⽬录中创建⼀个⽂档⽬录cd 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

• 本地测试在浏览器中运⾏：127.0.0.1:8080或者localhost:8080

• 服务器测试：服务器公网ip:8080

• 服务器测试记得开启端口，默认端口为8080如果端口占用也可以修改端口号后，开启/访问对应端口即可。

配置首页

• 随便配置一个首页进行测试

vi 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
---