打造专属云笔记-学习笔记 开通云服务器(略) 安装Vurpress 配置VuePress

课程介绍

#VuePress%E4%BB%8B%E7%BB%8D VuePress介绍

官网介绍：

https://www.vuepress.cn/guide/ https://www.vuepress.cn/guide/

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

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

#%E4%BD%BF%E7%94%A8VuePress%E7%9A%84%E5%A5%BD%E5%A4%84 使用VuePress的好处

#%E7%95%8C%E9%9D%A2%E7%AE%80%E6%B4%81%E4%BC%98%E9%9B%85 界面简洁优雅

#%E5%AE%B9%E6%98%93%E4%B8%8A%E6%89%8B 容易上手

#%E5%AF%B9Markdwon%E5%BD%A2%E5%BC%8F%E5%85%BC%E5%AE%B9%E6%80%A7%E8%89%AF%E5%A5%BD%EF%BC%8C%E5%AE%B9%E6%98%93%E9%85%8D%E7%BD%AE%EF%BC%8C%E6%80%A7%E8%83%BD%E5%A5%BD 对Markdwon形式兼容性良好，容易配置，性能好

#%E5%BC%80%E9%80%9A%E4%BA%91%E6%9C%8D%E5%8A%A1%E5%99%A8-%E7%95%A5 开通云服务器(略)

#%E5%AE%89%E8%A3%85Vurpress 安装Vurpress

#%E8%AE%BE%E7%BD%AE%E5%AE%89%E5%85%A8%E7%BB%84 设置安全组

#%E8%BF%9B%E5%85%A5%E8%87%AA%E5%B7%B1%E7%9A%84%E5%AE%9E%E4%BE%8B 进入自己的实例

#%E8%BF%9B%E5%85%A5%E6%9C%AC%E5%AE%9E%E4%BE%8B%E5%AE%89%E5%85%A8%E7%BB%84%E4%B9%9F%E5%B0%B1%E6%98%AF%E6%9C%80%E5%90%8E%E9%82%A3%E4%B8%AA 进入本实例安全组也就是最后那个

#%E7%82%B9%E5%87%BB%E9%85%8D%E7%BD%AE%E8%A7%84%E5%88%99 点击配置规则

#%E8%AE%BE%E7%BD%AE%E5%AE%89%E5%85%A8%E7%BB%84-1

按照上一步会出现这个

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

添加22端口和8080端口

点击确定，8080一样。

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

#%E5%AE%89%E8%A3%85Node-js 安装Node.js

#%E5%AE%89%E8%A3%85putty 安装putty

安装地址：

https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe https://the.earth.li/~sgtatham/putty/latest/w64/putty.exe

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

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

#%E4%BE%9D%E6%AC%A1%E6%89%A7%E8%A1%8C%E4%B8%8B%E5%88%97%E5%91%BD%E4%BB%A4 依次执行下列命令

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就安装成功了。

#%E5%AE%89%E8%A3%85VuePress 安装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是配置信息

#%E9%85%8D%E7%BD%AEVuePress 配置VuePress

#%E6%89%A7%E8%A1%8C%E4%BB%A5%E4%B8%8B%E6%AD%A5%E9%AA%A4 执行以下步骤

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 https://www.maolilan.top/article/541a8071.html href="https://www.maolilan.top/article/7a56c169.html"> https://www.maolilan.top/article/7a56c169.html