七天训练营进阶路线Class1

本文链接：https://blog.csdn.net/weixin_44577313/article/details/107831943

七天训练营进阶路线Class1

课时1：课程介绍:基于VuePress搭建自己的个人技术网站

介绍
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。

#运行原理(how it works)
VuePress 网站实际上是由 Vue, Vue Router 和 webpack 驱动的单页面应用程序。如果你以前使用过 Vue，那么在编写或开发自定义主题时（甚至可以使用 Vue DevTools 来调试你的自定义主题！），你会融入到熟悉的开发体验中！

在构建过程中，我们会创建应用程序的服务器渲染版本，并且实际上是通过访问每个路由，来渲染相应的 HTML。这种方式受到 Nuxt 的 nuxt generate 命令以及 Gatsby 等其他项目的启发。

每个 markdown 文件都使用 markdown-it 编译为 HTML，然后作为 Vue 组件的模板进行处理。这允许你直接在 markdown 文件中使用 Vue，在需要嵌入动态内容时，这种使用方式非常有用。

#特性(features)
内置 markdown 扩展，针对技术文档进行了优化
能够利用内嵌在 markdown 文件中的 Vue 代码
以 Vue 驱动的自定义主题系统
PWA 支持
Google Analytics 集成
一个默认主题：
响应式布局
可选的主页
简单、开箱即用、基于标题的搜索功能
可定制的导航栏和侧边栏
自动生成的 GitHub 链接和页面编辑链接
#待实现特性(todo features)
VuePress 的开发仍在进行中。有几件目前不支持，但计划做的功能：
【原文】
了解更多可参考文档
VuePress 中文文档

开通云服务器

进⼊ https://ecs-buy.aliyun.com/#/prepay 就可以选择购买 ECS 产品了，根据产品
购买页⾯我们⼀步⼀步来讲。
⼀一、计费⽅方式：
包年包⽉可以理解为是预付费产品，我们得先购买⼀个⽉或者⼏个⽉⼏年的
ECS产品才能使⽤ECS，适合于长期稳定使⽤服务器的场景，⽐如说做⽹站。
⽽按量付费可以理解为是后付费产品，我们需要保证有 100元的余额才可以使
⽤按量付费，按量付费就是⽤⼏个⼩时就扣⼏⼩时的钱，适合于测试或者跑数
据的场景。
抢占式实例相对于按量付费实例价格有⼀定的折扣，价格随供求波动，按实际
使⽤时长进⾏收费，后付费模式。您愿意⽀付每⼩时的实例最⾼价。当您的出
价⾼于当前市场成交价时，您的实例就会运⾏。阿⾥云会根据供需资源或市场
成交价的变化释放您的抢占式实例。
二、地域
地域（Region）和可⽤区（Zone）是两个概念：
• 地域就是服务器的数据中⼼所放在的城市，例如华东1是在杭州，华东2是在上
海，不同地域的ECS不可内⽹互联。
• 可⽤区是同⼀地域下的不同数据中⼼，在同⼀个地域距离较近，可以通过光纤连
接，内⽹可以互联。
⼀般来说，地域的选择，就是看您的业务中，哪个地域访客最多、转化率最
⾼，⽽不是离管理者最近。例如我的博客访客主要来⾃⼴东省，那么【华南1-
深圳】⾃然是我⾸选的；例如我是阿⾥速卖通上的外贸企业，客户主要分布在
拉美国家，我的官⽅就不可能建设在【华东1】，⽽是应该选择【美国东部
1（弗吉尼亚）】。
四、实例例系列列
实例就是云服务器的规格，包括CPU、内存等。可根据需要来选择合适的规
格，这⾥可以选择【⼊门级(共享)】实例。
六、镜像
• 公共镜像：是由阿⾥云官⽅提供公共基础镜像，仅包括初始系统环境。请根据您
的实际情况⾃助配置应⽤环境或相关软件配置。
• ⾃定义镜像：基于⽤户系统快照⽣成，包括初始系统环境、应⽤环境和相关软件
配置。选择⾃定义镜像创建云服务器，节省您的重复配置时间。
• 共享镜像：是其他账号的⾃定义镜像主动共享给您使⽤的镜像。阿⾥云不保证其
他账号共享给您的镜像的完整性和安全性，使⽤共享镜像需要⾃⾏承担风险。
• 镜像市场：提供经严格审核的优质镜像，预装操作系统、应⽤环境和各类软件，
⽆需配置，可⼀键部署云服务器。满⾜建站/应⽤开发/可视化管理等个性化需
求。
七、存储
• 存储主要分系统盘和数据盘，系统盘就是整个操作系统所安装的虚拟硬盘，⽽数
据盘则是提供挂载到某⼀盘符或者⽬录下。
• 数据盘的安全可靠性更⾼，推荐将⽹站数据存放于数据盘所挂载的⽬录或盘符
下。
• ⽽普通云盘则是阿⾥云最早提供的云盘，在三盘副本和⾼可靠性下性能孱弱，只
存在于⽆I/O优化的实例。⾼效云盘则是在三盘副本和⾼可靠性下提供 1240～
3000 IOPS的磁盘性能，在60G以下性价⽐凸显。SSD云盘则是买的越⼤性能越
好，最⼤提供20000 IOPS 的性能，磁盘⼤于60G的情况下有购买价值，性能明
显。
三、⽹网络
⽹络分经典⽹络和专有⽹络：
• 经典⽹络是阿⾥云最早期的⽹络⽅式，同⼀地域内的所有ECS、OSS、RDS都可
以互联，然后通过安全组来实现访问的控制。
• 专有⽹络则是⽤户⾃有⼀个虚拟路由⽹络和交换机，只有同⼀⽹络、交换机下的
ECS、RDS等产品才能互联，专有⽹络还可以绑定弹性IP，就算换ECS了，IP依
旧可以保持不变。
尽量以选择专有⽹络为先。
五、公⽹网带宽
五、公⽹网带宽
公⽹带宽则分按使⽤流量和按固定带宽计费：
• 按流量计费顾名思义就是⽤多少流量扣多少钱，不同地域的每G流量资费不⼀
样。
• 按带宽计费就是先买断多少M的带宽，后⾯⽆关⽤多少流量都不计费。
⼀般来说正常建站最好有⾄少2M的带宽，并配合OSS来放置资源会⽐较好。
⼋八、其他
购买量，就是购买多长时间，以及多少台相同配置的ECS。
九、安全设置
• 设置密钥，就是通过密钥⽂件登⼊ Linux 系统，⽽⾮通过密码，必须拥有密钥⽂
件才可以登⼊系统。
• ⾃定义密码，就是通过密码登⼊Linux系统或者Windows 系统，推荐新⼿使⽤该⽅
式。
• 创建后设置，就是⽣成实例了再通过重置密码的⽅式修改密码，不推荐！

如果已拥有ECS可直接在控制台

                              点击管理-》跳转到详情页   然后改配置信息即可

安装 VuePress 程序

安装前需要现在管理页配置本实例安全组

在这里插入图片描述

安装Node.js

⼀一、基本配置步骤
1、设置package.json的脚本配置
vim package.json
修改scripts中的内容如下：
“scripts”: {
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
},
截图如下：
在这里插入图片描述

2、登录到ECS之后，执⾏行行如下命令，下载Node.js 13.9.0 64位安装包
wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz

在这里插入图片描述
3、创建Node.js安装⽬录
sudo mkdir -p /usr/local/lib/nodejs
4、将⼆进制⽂件解压到要安装⽬录
sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
5、使⽤查看node.js版本号命令验证是否解压成功
进⼊⽬录：cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
执⾏行行：./node -v
结果如下：
6、修改环境变量量，使得能在任意⽬目录下执⾏行行node命令
vim ~/.bash_profile
找到 PATH= $P A T H :$ HOME/bin，在PATH= $P A T H :$ HOME/bin 后⾯面添加路路
径:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin，结果为：
PATH= $P A T H :$ HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
保存修改，然后重载⼀一下：source ~/.bash_profile
7、到其他⽬录下验证
cd
node -v
npm version
npx -v
截图如下：在这里插入图片描述

⾄此，nodejs安装完毕。

安装 VuePress

1、全局安装
为加快下载安装速度，采⽤淘宝镜像。
npm config set registryhttps://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即可。
11、在浏览器中运⾏： http://ECS公⽹IP:8080
在这里插入图片描述