课程介绍

VuePress介绍

官网介绍：https://www.vuepress.cn/guide/

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

使用VuePress的好处

界面简洁优雅

容易上手

对Markdwon形式兼容性良好，容易配置，性能好

开通云服务器(略)

安装Vurpress

设置安全组

进入自己的实例

进入本实例安全组也就是最后那个

点击配置规则

设置安全组

按照上一步会出现这个

然后点击上面的添加安全组规则

添加22端口和8080端口

点击确定，8080一样。

特别说明：0.0.0.0/0是所有人都可以访问，实际使用是不会这样的，但是为了后面不报错而且是个人学习所以这样做。

安装Node.js

安装putty

安装地址：
https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe

跟着教程输入自己的公网ip，就可以登录进去了

输入root入上图，然后输入自己开始云服务器时的密码即可成功登录。

依次执行下列命令

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

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

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

cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

./node -v

这时应该出现

然后配置环境变量，这句话执行在公告的文件夹下也就是…64/bin那个

vim ~/.bash_profile

然后添加

PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

然后保存，vim是按下esc然后：wq

接着重载一下

source ~/.bash_profile

然后 cd
进入其他目录进行测试

cd

node -v

npm version

npx -v

这时应该出现

到此node.js就安装成功了。

安装VuePress

这个是换淘宝源加速

npm config set registry https://registry.npm.taobao.org

npm install -g vuepress

mkdir try_blogs

cd try_blogs

这个是初始化

npm init -y

其中try_blogs是我们将来博客的根目录

最后一个package.json是配置信息

配置VuePress

执行以下步骤

vim package.json

修改成为

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

截图如下：

接着执行

mkdir docs

cd docs

mkdir .vuepress

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

echo >config.js

mkdir public

完成后实现各个的目录结构，也就是

回到try_blogs根目录
执行

vuepress dev docs

这个相当于hexo的hexo s，也就是本地预览，这个是在8080端口
进入http://你的公网ip:8080/就可以预览效果了
这个时候应该是这样

然后我们来复杂化一下
进入README.md文件，这个之后就是我们的首页，之前已经提到，vim 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
---

特别提醒，注意对齐，不然会报错

然后再执行本地预览就应该是这样了

课程所学的就结束了，因为我使用的是hexo所以不再深入，如果想使用这个的话请去官网再进行学习。
如果想尝试hexo可以跟我的教程
https://www.maolilan.top/article/541a8071.html
href="https://www.maolilan.top/article/7a56c169.html">https://www.maolilan.top/article/7a56c169.html