阿里云ECS进阶训练营Day1 搭建VuePress
2024-04-18 17:13:02
文章目录
- 零、Demo地址
- 一、开通阿里云服务器
- 1.1 购买服务器
- 1.1.1 去哪购买？
- 1.1.2 如何购买？
- 1.2 配置服务器
- 1.2.1 需要的信息
- 1.2.2 配置安全组
- 二、VuePress的安装
- 2.1 VuePress
- 2.2 安装VuePress
- 2.2.1 安装Node.js
- 2.2.2 安装VuePress程序
- 三、VuePress的配置
- 3.1 基本配置
- 3.2 基本配置补充
- 3.3 主页配置
- 3.4 可能出现的问题
零、Demo地址
访问地址：1jumao.cn:8080/try_blogs
一、开通阿里云服务器
1.1 购买服务器
1.1.1 去哪购买？
要上云，首先肯定得有先一台服务器啦，阿里云服务器购买
1.1.2 如何购买？
购买可以分为如下五个步骤：
#mermaid-svg-3X55Jvy6OV4IffjZ .label {font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family);fill: #333;color: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .label text {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .node rect, #mermaid-svg-3X55Jvy6OV4IffjZ .node circle, #mermaid-svg-3X55Jvy6OV4IffjZ .node ellipse, #mermaid-svg-3X55Jvy6OV4IffjZ .node polygon, #mermaid-svg-3X55Jvy6OV4IffjZ .node path {fill: #ECECFF;stroke: #9370DB;stroke-width: 1px; }#mermaid-svg-3X55Jvy6OV4IffjZ .node .label {text-align: center;fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .node.clickable {cursor: pointer; }#mermaid-svg-3X55Jvy6OV4IffjZ .arrowheadPath {fill: #333333; }#mermaid-svg-3X55Jvy6OV4IffjZ .edgePath .path {stroke: #333333;stroke-width: 1.5px; }#mermaid-svg-3X55Jvy6OV4IffjZ .flowchart-link {stroke: #333333;fill: none; }#mermaid-svg-3X55Jvy6OV4IffjZ .edgeLabel {background-color: #e8e8e8;text-align: center; } #mermaid-svg-3X55Jvy6OV4IffjZ .edgeLabel rect {opacity: 0.9; } #mermaid-svg-3X55Jvy6OV4IffjZ .edgeLabel span {color: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .cluster rect {fill: #ffffde;stroke: #aaaa33;stroke-width: 1px; }#mermaid-svg-3X55Jvy6OV4IffjZ .cluster text {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ div.mermaidTooltip {position: absolute;text-align: center;max-width: 200px;padding: 2px;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family);font-size: 12px;background: #ffffde;border: 1px solid #aaaa33;border-radius: 2px;pointer-events: none;z-index: 100; }#mermaid-svg-3X55Jvy6OV4IffjZ .actor {stroke: #CCCCFF;fill: #ECECFF; }#mermaid-svg-3X55Jvy6OV4IffjZ text.actor > tspan {fill: black;stroke: none; }#mermaid-svg-3X55Jvy6OV4IffjZ .actor-line {stroke: grey; }#mermaid-svg-3X55Jvy6OV4IffjZ .messageLine0 {stroke-width: 1.5;stroke-dasharray: none;stroke: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .messageLine1 {stroke-width: 1.5;stroke-dasharray: 2, 2;stroke: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ #arrowhead path {fill: #333;stroke: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .sequenceNumber {fill: white; }#mermaid-svg-3X55Jvy6OV4IffjZ #sequencenumber {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ #crosshead path {fill: #333;stroke: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .messageText {fill: #333;stroke: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .labelBox {stroke: #CCCCFF;fill: #ECECFF; }#mermaid-svg-3X55Jvy6OV4IffjZ .labelText,#mermaid-svg-3X55Jvy6OV4IffjZ .labelText > tspan {fill: black;stroke: none; }#mermaid-svg-3X55Jvy6OV4IffjZ .loopText,#mermaid-svg-3X55Jvy6OV4IffjZ .loopText > tspan {fill: black;stroke: none; }#mermaid-svg-3X55Jvy6OV4IffjZ .loopLine {stroke-width: 2px;stroke-dasharray: 2, 2;stroke: #CCCCFF;fill: #CCCCFF; }#mermaid-svg-3X55Jvy6OV4IffjZ .note {stroke: #aaaa33;fill: #fff5ad; }#mermaid-svg-3X55Jvy6OV4IffjZ .noteText,#mermaid-svg-3X55Jvy6OV4IffjZ .noteText > tspan {fill: black;stroke: none; }#mermaid-svg-3X55Jvy6OV4IffjZ .activation0 {fill: #f4f4f4;stroke: #666; }#mermaid-svg-3X55Jvy6OV4IffjZ .activation1 {fill: #f4f4f4;stroke: #666; }#mermaid-svg-3X55Jvy6OV4IffjZ .activation2 {fill: #f4f4f4;stroke: #666; }#mermaid-svg-3X55Jvy6OV4IffjZ .mermaid-main-font {font-family: "trebuchet ms", verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ .section {stroke: none;opacity: 0.2; }#mermaid-svg-3X55Jvy6OV4IffjZ .section0 {fill: rgba(102, 102, 255, 0.49); }#mermaid-svg-3X55Jvy6OV4IffjZ .section2 {fill: #fff400; }#mermaid-svg-3X55Jvy6OV4IffjZ .section1, #mermaid-svg-3X55Jvy6OV4IffjZ .section3 {fill: white;opacity: 0.2; }#mermaid-svg-3X55Jvy6OV4IffjZ .sectionTitle0 {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .sectionTitle1 {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .sectionTitle2 {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .sectionTitle3 {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .sectionTitle {text-anchor: start;font-size: 11px;text-height: 14px;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ .grid .tick {stroke: lightgrey;opacity: 0.8;shape-rendering: crispEdges; } #mermaid-svg-3X55Jvy6OV4IffjZ .grid .tick text {font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ .grid path {stroke-width: 0; }#mermaid-svg-3X55Jvy6OV4IffjZ .today {fill: none;stroke: red;stroke-width: 2px; }#mermaid-svg-3X55Jvy6OV4IffjZ .task {stroke-width: 2; }#mermaid-svg-3X55Jvy6OV4IffjZ .taskText {text-anchor: middle;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ .taskText:not([font-size]) {font-size: 11px; }#mermaid-svg-3X55Jvy6OV4IffjZ .taskTextOutsideRight {fill: black;text-anchor: start;font-size: 11px;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ .taskTextOutsideLeft {fill: black;text-anchor: end;font-size: 11px; }#mermaid-svg-3X55Jvy6OV4IffjZ .task.clickable {cursor: pointer; }#mermaid-svg-3X55Jvy6OV4IffjZ .taskText.clickable {cursor: pointer;fill: #003163 !important;font-weight: bold; }#mermaid-svg-3X55Jvy6OV4IffjZ .taskTextOutsideLeft.clickable {cursor: pointer;fill: #003163 !important;font-weight: bold; }#mermaid-svg-3X55Jvy6OV4IffjZ .taskTextOutsideRight.clickable {cursor: pointer;fill: #003163 !important;font-weight: bold; }#mermaid-svg-3X55Jvy6OV4IffjZ .taskText0, #mermaid-svg-3X55Jvy6OV4IffjZ .taskText1, #mermaid-svg-3X55Jvy6OV4IffjZ .taskText2, #mermaid-svg-3X55Jvy6OV4IffjZ .taskText3 {fill: white; }#mermaid-svg-3X55Jvy6OV4IffjZ .task0, #mermaid-svg-3X55Jvy6OV4IffjZ .task1, #mermaid-svg-3X55Jvy6OV4IffjZ .task2, #mermaid-svg-3X55Jvy6OV4IffjZ .task3 {fill: #8a90dd;stroke: #534fbc; }#mermaid-svg-3X55Jvy6OV4IffjZ .taskTextOutside0, #mermaid-svg-3X55Jvy6OV4IffjZ .taskTextOutside2 {fill: black; }#mermaid-svg-3X55Jvy6OV4IffjZ .taskTextOutside1, #mermaid-svg-3X55Jvy6OV4IffjZ .taskTextOutside3 {fill: black; }#mermaid-svg-3X55Jvy6OV4IffjZ .active0, #mermaid-svg-3X55Jvy6OV4IffjZ .active1, #mermaid-svg-3X55Jvy6OV4IffjZ .active2, #mermaid-svg-3X55Jvy6OV4IffjZ .active3 {fill: #bfc7ff;stroke: #534fbc; }#mermaid-svg-3X55Jvy6OV4IffjZ .activeText0, #mermaid-svg-3X55Jvy6OV4IffjZ .activeText1, #mermaid-svg-3X55Jvy6OV4IffjZ .activeText2, #mermaid-svg-3X55Jvy6OV4IffjZ .activeText3 {fill: black !important; }#mermaid-svg-3X55Jvy6OV4IffjZ .done0, #mermaid-svg-3X55Jvy6OV4IffjZ .done1, #mermaid-svg-3X55Jvy6OV4IffjZ .done2, #mermaid-svg-3X55Jvy6OV4IffjZ .done3 {stroke: grey;fill: lightgrey;stroke-width: 2; }#mermaid-svg-3X55Jvy6OV4IffjZ .doneText0, #mermaid-svg-3X55Jvy6OV4IffjZ .doneText1, #mermaid-svg-3X55Jvy6OV4IffjZ .doneText2, #mermaid-svg-3X55Jvy6OV4IffjZ .doneText3 {fill: black !important; }#mermaid-svg-3X55Jvy6OV4IffjZ .crit0, #mermaid-svg-3X55Jvy6OV4IffjZ .crit1, #mermaid-svg-3X55Jvy6OV4IffjZ .crit2, #mermaid-svg-3X55Jvy6OV4IffjZ .crit3 {stroke: #ff8888;fill: red;stroke-width: 2; }#mermaid-svg-3X55Jvy6OV4IffjZ .activeCrit0, #mermaid-svg-3X55Jvy6OV4IffjZ .activeCrit1, #mermaid-svg-3X55Jvy6OV4IffjZ .activeCrit2, #mermaid-svg-3X55Jvy6OV4IffjZ .activeCrit3 {stroke: #ff8888;fill: #bfc7ff;stroke-width: 2; }#mermaid-svg-3X55Jvy6OV4IffjZ .doneCrit0, #mermaid-svg-3X55Jvy6OV4IffjZ .doneCrit1, #mermaid-svg-3X55Jvy6OV4IffjZ .doneCrit2, #mermaid-svg-3X55Jvy6OV4IffjZ .doneCrit3 {stroke: #ff8888;fill: lightgrey;stroke-width: 2;cursor: pointer;shape-rendering: crispEdges; }#mermaid-svg-3X55Jvy6OV4IffjZ .milestone {transform: rotate(45deg) scale(0.8, 0.8); }#mermaid-svg-3X55Jvy6OV4IffjZ .milestoneText {font-style: italic; }#mermaid-svg-3X55Jvy6OV4IffjZ .doneCritText0, #mermaid-svg-3X55Jvy6OV4IffjZ .doneCritText1, #mermaid-svg-3X55Jvy6OV4IffjZ .doneCritText2, #mermaid-svg-3X55Jvy6OV4IffjZ .doneCritText3 {fill: black !important; }#mermaid-svg-3X55Jvy6OV4IffjZ .activeCritText0, #mermaid-svg-3X55Jvy6OV4IffjZ .activeCritText1, #mermaid-svg-3X55Jvy6OV4IffjZ .activeCritText2, #mermaid-svg-3X55Jvy6OV4IffjZ .activeCritText3 {fill: black !important; }#mermaid-svg-3X55Jvy6OV4IffjZ .titleText {text-anchor: middle;font-size: 18px;fill: black;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ g.classGroup text {fill: #9370DB;stroke: none;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family);font-size: 10px; } #mermaid-svg-3X55Jvy6OV4IffjZ g.classGroup text .title {font-weight: bolder; }#mermaid-svg-3X55Jvy6OV4IffjZ g.clickable {cursor: pointer; }#mermaid-svg-3X55Jvy6OV4IffjZ g.classGroup rect {fill: #ECECFF;stroke: #9370DB; }#mermaid-svg-3X55Jvy6OV4IffjZ g.classGroup line {stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ .classLabel .box {stroke: none;stroke-width: 0;fill: #ECECFF;opacity: 0.5; }#mermaid-svg-3X55Jvy6OV4IffjZ .classLabel .label {fill: #9370DB;font-size: 10px; }#mermaid-svg-3X55Jvy6OV4IffjZ .relation {stroke: #9370DB;stroke-width: 1;fill: none; }#mermaid-svg-3X55Jvy6OV4IffjZ .dashed-line {stroke-dasharray: 3; }#mermaid-svg-3X55Jvy6OV4IffjZ #compositionStart {fill: #9370DB;stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ #compositionEnd {fill: #9370DB;stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ #aggregationStart {fill: #ECECFF;stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ #aggregationEnd {fill: #ECECFF;stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ #dependencyStart {fill: #9370DB;stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ #dependencyEnd {fill: #9370DB;stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ #extensionStart {fill: #9370DB;stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ #extensionEnd {fill: #9370DB;stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ .commit-id, #mermaid-svg-3X55Jvy6OV4IffjZ .commit-msg, #mermaid-svg-3X55Jvy6OV4IffjZ .branch-label {fill: lightgrey;color: lightgrey;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ .pieTitleText {text-anchor: middle;font-size: 25px;fill: black;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ .slice {font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ g.stateGroup text {fill: #9370DB;stroke: none;font-size: 10px;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ g.stateGroup text {fill: #9370DB;fill: #333;stroke: none;font-size: 10px; }#mermaid-svg-3X55Jvy6OV4IffjZ g.statediagram-cluster .cluster-label text {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ g.stateGroup .state-title {font-weight: bolder;fill: black; }#mermaid-svg-3X55Jvy6OV4IffjZ g.stateGroup rect {fill: #ECECFF;stroke: #9370DB; }#mermaid-svg-3X55Jvy6OV4IffjZ g.stateGroup line {stroke: #9370DB;stroke-width: 1; }#mermaid-svg-3X55Jvy6OV4IffjZ .transition {stroke: #9370DB;stroke-width: 1;fill: none; }#mermaid-svg-3X55Jvy6OV4IffjZ .stateGroup .composit {fill: white;border-bottom: 1px; }#mermaid-svg-3X55Jvy6OV4IffjZ .stateGroup .alt-composit {fill: #e0e0e0;border-bottom: 1px; }#mermaid-svg-3X55Jvy6OV4IffjZ .state-note {stroke: #aaaa33;fill: #fff5ad; } #mermaid-svg-3X55Jvy6OV4IffjZ .state-note text {fill: black;stroke: none;font-size: 10px; }#mermaid-svg-3X55Jvy6OV4IffjZ .stateLabel .box {stroke: none;stroke-width: 0;fill: #ECECFF;opacity: 0.7; }#mermaid-svg-3X55Jvy6OV4IffjZ .edgeLabel text {fill: #333; }#mermaid-svg-3X55Jvy6OV4IffjZ .stateLabel text {fill: black;font-size: 10px;font-weight: bold;font-family: 'trebuchet ms', verdana, arial;font-family: var(--mermaid-font-family); }#mermaid-svg-3X55Jvy6OV4IffjZ .node circle.state-start {fill: black;stroke: black; }#mermaid-svg-3X55Jvy6OV4IffjZ .node circle.state-end {fill: black;stroke: white;stroke-width: 1.5; }#mermaid-svg-3X55Jvy6OV4IffjZ #statediagram-barbEnd {fill: #9370DB; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-cluster rect {fill: #ECECFF;stroke: #9370DB;stroke-width: 1px; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-cluster rect.outer {rx: 5px;ry: 5px; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-state .divider {stroke: #9370DB; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-state .title-state {rx: 5px;ry: 5px; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-cluster.statediagram-cluster .inner {fill: white; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-cluster.statediagram-cluster-alt .inner {fill: #e0e0e0; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-cluster .inner {rx: 0;ry: 0; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-state rect.basic {rx: 5px;ry: 5px; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-state rect.divider {stroke-dasharray: 10,10;fill: #efefef; }#mermaid-svg-3X55Jvy6OV4IffjZ .note-edge {stroke-dasharray: 5; }#mermaid-svg-3X55Jvy6OV4IffjZ .statediagram-note rect {fill: #fff5ad;stroke: #aaaa33;stroke-width: 1px;rx: 0;ry: 0; }:root {--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive; }#mermaid-svg-3X55Jvy6OV4IffjZ .error-icon {fill: #552222; }#mermaid-svg-3X55Jvy6OV4IffjZ .error-text {fill: #552222;stroke: #552222; }#mermaid-svg-3X55Jvy6OV4IffjZ .edge-thickness-normal {stroke-width: 2px; }#mermaid-svg-3X55Jvy6OV4IffjZ .edge-thickness-thick {stroke-width: 3.5px; }#mermaid-svg-3X55Jvy6OV4IffjZ .edge-pattern-solid {stroke-dasharray: 0; }#mermaid-svg-3X55Jvy6OV4IffjZ .edge-pattern-dashed {stroke-dasharray: 3; }#mermaid-svg-3X55Jvy6OV4IffjZ .edge-pattern-dotted {stroke-dasharray: 2; }#mermaid-svg-3X55Jvy6OV4IffjZ .marker {fill: #333333; }#mermaid-svg-3X55Jvy6OV4IffjZ .marker.cross {stroke: #333333; }:root { --mermaid-font-family: "trebuchet ms", verdana, arial;} #mermaid-svg-3X55Jvy6OV4IffjZ {color: rgba(0, 0, 0, 0.75);font: ;}
基础配置
网络和安全组
系统配置
分组配置
确认订单
下面是每个步骤常用配置项的具体说明：
①基础配置
| 配置 | 说明 |
|---|---|
| 付费模式 | 长期使用服务器，适用包年包月；短期需求，可用选择按量付费；预算更低的情况下可用选择抢占式实例（有被回收的风险） |
| 地域及可用区 | 选择服务器所在的地址，原则上是以主要客户的分布区域决定的 |
| 实例配置 | 根据自己的需求选择合适的服务器，性能决定价格 |
| 镜像 | 免费、稳定且干净的，选择公共镜像，里面有官方提供的服务器原生系统；有以前服务器或者别人共享给你的镜像，希望可以快速搭建自己熟悉的环境，选择自定义镜像、共享镜像；免费或者付费获取到第三方提供的搭建好的环境，可以去镜像市场挑选 |
| 存储 | 主要分为系统盘和数据盘，按照性能从高到底分别是ESSD云盘 >= SSD云盘 > 高效云盘，通常选择30g~80g足够了 |
②网络和安全组
| 配置 | 说明 |
|---|---|
| 网络 | 一般使用专有网络，网络隔离性、安全性较高 |
| 带宽值 | 决定用户的访问速度，带宽对价格影响较大，根据实际情况选择，学习博客类推荐2~4m |
| 安全组 | 可以在购买的时候选择安全组配置，不过通常是创建完毕再去详细配置，详见后面的详细配置 |
③系统配置
这个菜单相对简单
登录凭证有密钥对和自定义密码，通常选自定义密码就可以了
然后是实例名称、实例描述，根据用途可以自己起个名字，当然，也可以不起。
④分组设置
如果有多个服务器，可以对服务器进行分组管理，如果没有多个服务器或者分类，直接下一步
⑤确认订单
如名字，这是最后一步，确认配置后，选择开通的时长，付款购买
如下图：
1.2 配置服务器
1.2.1 需要的信息
服务器开通成功后，你通常要从控制台知道以下信息：
- root密码&密钥对
- 公网ip
1.2.2 配置安全组
打开安全组配置
进入 控制台 ，在侧边栏点击 网络与安全 ，选择 安全组 ，右侧点击你需要配置安全组的实例名字，就可以进入安全组修改页了
默认进入的是新版的页面，如果你熟悉旧版，也可以点击右上角回到旧版
这里需要添加22端口（ssh要用到）、80端口（浏览器默认访问端口）和8080端口（访问vuepress的默认端口）：
- 点击手动添加
- 通常我们只需要改端口范围和授权对象、
- 端口范围：下拉菜单中提供了几个常用的端口，22端口和8080端口都可以在里面找到，点击即可。
- 授权对象：下拉菜单同样提供了几个常用地址，选择0.0.0.0/0
- 点击保存
结果如下：
注意：如果我们要的端口预设下拉菜单没有的话，如8080，就需要手动输入
格式如下：
端口号/端口号
例子：
8080/8080
如图：
二、VuePress的安装
2.1 VuePress
VuePress是一个轻量级的静态网站生成器，可以快速搭建一个简单高效的博客网站。
以下是官网的介绍：
VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
值得一提的是，VuePress和大名鼎鼎的Vue并不是只有名字像，而是师出同门，都是尤雨溪大佬写的
VuePress官网
2.2 安装VuePress
如无其他说明，以下均是在centos7使用root用户登录后，在终端执行
2.2.1 安装Node.js
①下载Node.js
wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
注意：如果不能使用wget，是因为版本问题，可以先升级到centos7或者执行下面命令安装wegt
yum -y install wget
②创建安装目录
sudo mkdir -p /usr/local/lib/nodejs
③解压node.js到刚刚创建的安装目录
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
如果控制台输出：v13.9.0，则安装成功
⑤将目录添加到环境变量
vim ~/.bash_profile
按 i 进入编辑模式
在 PATH=$PATH:$HOME/bin 后面添加 :/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin ，注意别漏掉冒号
按 esc 键退出编辑模式，再输入 :wq 进行保存
最后重载一下：
source ~/.bash_profile
⑥验证是否添加到环境变量
可以在任意目录下执行下列指令
node -v
npm version
npx -v
分别输出如下即为成功：
[root@iZuf64ucyrtdtsvk0lsz39Z bin]# node -v
v13.9.0[root@iZuf64ucyrtdtsvk0lsz39Z bin]# npm version
{npm: '6.13.7',ares: '1.15.0',brotli: '1.0.7',cldr: '36.0',icu: '65.1',llhttp: '2.0.4',modules: '79',napi: '5',nghttp2: '1.40.0',node: '13.9.0',openssl: '1.1.1d',tz: '2019c',unicode: '12.1',uv: '1.34.2',v8: '7.9.317.25-node.28',zlib: '1.2.11'
}[root@iZuf64ucyrtdtsvk0lsz39Z bin]# npx -v
6.13.7
2.2.2 安装VuePress程序
①使用淘宝镜像，加速下载（可选）
npm config set registry https://registry.npm.taobao.org
②安装vuepress
npm install -g vuepress
③创建vuepress目录
mkdir ~/try_blogs
④进入刚刚创建的目录
cd ~/try_blogs
⑤初始化项目，生成package.json
npm init -y
三、VuePress的配置
3.1 基本配置
①编辑package.json
vim ~/try_blogs/package.json
（编辑文件的方法见第二部分）
将scripts的内容修改为如下：
"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"
},
最终文件如下
{"name": "try_blogs","version": "1.0.0","description": "","main": "index.js","scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"},"keywords": [],"author": "","license": "ISC"
}
②在当前目录中创建docs目录、.vuepress目录
cd ~/try_blogs
mkdir docs
cd docs
mkdir .vuepress
③创建README.md
echo '# Hello VuePress - first blog!' >README.md
④在.vuepress目录下创建public目录和config.js
cd ~/try_blogs/docs/.vuepress
mkdir public
touch config.js
⑤检查工作目录结构
安装tree命令
yum -y install tree
返回到try_blogs
cd ~/try_blogs
查看目录结构（包括隐藏文件）
tree -a
目录结构如下即可
⑥回到try_blogs目录，执行命令
vuepress dev docs
出现以下内容即可
其中默认访问地址即为8080端口
在浏览器输入服务器公网ip:8080即可访问
3.2 基本配置补充
①工作目录作用
.
├── docs //以后要在这⾥⾯写⽂章，直接在此⽂件夹下新建⽂件夹，然后再建md⽂档就⾏，链接会⾃动⽣成
│ └── README.md //这个将会是我们以后的⾸页
│ └── .vuepress //这个⾥⾯会存放⼀些配置和组件
│ ├── config.js //配置⽂件，以后的所有配置基本都在这⾥写
│ └── public //静态⽂件存放地
└── package.json
②vuepress的两个命令
- vuepress dev docs 运行本地服务
- 等价npm run docs:dev
- vuepress build docs 生成静态文件
- 等价npm run docs:build
③停止服务
在运行成功后的监视界面按 ctrl+c即可
3.3 主页配置
在vuepress中，README.md即为主页。配置主页，实际上就是修改README.md文件
你可以有多种方式修改这个文件
命令行下用vim修改
在本地编写好md文件后用ftp软件上传到目录
个人推荐使用第二种，包括你自己写文章页推荐先写好，再上传
对 README.md进行修改如下
---
home: true
heroText: 阿里云ECS训练营第一天
tagline: 如何搭建一个VuePress博客？By：谢康立
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
---
刷新主页，效果如下：
一个最简单的主页就编写好了！
门已经入了，接下来你可以去参考VuePress的官方开发手册，对博客进行更深层次的建设：
Vue官方开发手册
3.4 可能出现的问题
如果你不幸在编译的时候遇到了这样子的问题：
首先检查第一行异常信息：
YAMLException: end of the stream or a document separator is expected at lin 7,column 9：features:
发现是配置异常，也就是主页 README.md 的分隔符出现了问题
line x , column y则代表了具体的位置，下面第一行则显示了具体的代码内容
所以，可以分析出上图是在README.md 中的第9行的"features:"出现了分隔符的问题
解决方法
检查README.md 中features:以及下面title是不是多了/少了空格以及分隔符
正确写法是
features: //冒号后没有空格
- title: 项目结构 //减号后面带一个空格details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 //两个空格
阿里云ECS进阶训练营Day1 搭建VuePress相关推荐
- 【阿里云ECS进阶训练营】day07基于ECS和NAS搭建个人网盘
目录 一:背景知识 二:实验步骤 1.连接ECS服务器 2.安装OwnCloud 3.安装Apache服务 4.安装并配置PHP 5.配置OwnCloud 6.挂载NAS服务 一:背景知识 云服务器E ...
- 基于阿里云ECS，Ubuntu系统搭建离线下载服务器
基于阿里云ECS,Ubuntu系统搭建离线下载服务器 很开心能参加本次阿里云训练营,使用的ECS是阿里云,ubuntu系统 1.了解什么是CCAA CCAA 是服务器离线下载解决⽅案包,组件包含了Ar ...
- 云服务器 ECS 配置：阿里云ECS Windows Server 2012 搭建AD
阿里云ECS Windows Server 2012 搭建AD 简介 Active Directory(简称AD,即" 活动目录"的意思),是微软下面的核心组件,其主要优势是实现高 ...
- 极智开发 | 阿里云ECS本地开发环境搭建
欢迎关注我的公众号 [极智视界],获取我的更多笔记分享 大家好,我是极智视界,本文介绍一下 阿里云ECS本地开发环境搭建. 之前介绍过华为云的开发环境搭建,有兴趣的同学可以移步我的这篇&l ...
- 阿里云ECS服务器+WordPress快速搭建个人博客
本文是转载,但完善了一些细节,精简了部分步骤,以及lnmp一键安装后的一些单独服务启动命令. 开始前准备: 一台阿里云ECS或者轻量级的服务器 Linux基础操作 喜欢捣鼓,善于思考 Windows上 ...
- 【阿里云高校计划】阿里云视觉AI训练营 DAY1 AI视觉生产技术简述
目录 写在前面 定义和分类 定义 分类 通用基础框架 五个关键维度 分割抠图 分割抠图 难点 解题思路 模型框架 部分扩展 视觉生成 以平面设计图像生成平台--<鹿班>为例 框架流程 鹿班 ...
- 阿里云 ECS 云计算训练营 Day7：搭建个人网盘
这是什么? 我正在参加"阿里云高校师生计划". 除了可以领取长达一年的免费云服务器体验, 在校学生还可以从零开始学习使用云计算,或参与 AI 实训营,最后获得礼品~(详情点我!) ...
- 阿里云 ECS 云计算训练营 Day2：搭建简历网站
这是什么? 我正在参加"阿里云高校师生计划". 除了可以领取长达一年的免费云服务器体验, 在校学生还可以从零开始学习使用云计算,或参与 AI 实训营,最后获得礼品~(详情点我!) ...
- 阿里云 ECS 云计算训练营 Day5：在线编程挑战
这是什么? 我正在参加"阿里云高校师生计划". 除了可以领取长达一年的免费云服务器体验, 在校学生还可以从零开始学习使用云计算,或参与 AI 实训营,最后获得礼品~(详情点我!) ...
最新文章
- Gradle入门系列（4）：创建二进制发布版本
- 《深入浅出Mysql》學習筆記--日志
- POJ - 1236 Network of Schools
- 加强路由器的安全访问控制
- HTML5入门之样板和兼容IE浏览器篇
- 关于VS附加调试Unity引起卡顿无响应问题
- 使用 SCons 代替 Makefile 快速构建应用程序
- SSL-ZYC 溜冰
- Perl命令行常见用法及技巧
- mysql如何只查询表中的前几条数据？多表查询前提了解
- NCEPU-EDM使用说明
- springboot + rabbitmq 做智能家居，我也没想到会这么简单
- python透视表画图_透视表、交叉表、matplotlib作图
- 关于VMware 15:在部分链上无法执行所调用的函数，请打开父虚拟磁盘
- 小米2S手机开启开发者选项
- 1024，程序员“赚钱”秘籍倾囊而赠！
- BZOJ1016 || 洛谷P4208 [JSOI2008]最小生成树计数【矩阵树定理】
- Python实现去除图片中的数字水印
- 查找SAPParameterID_SAP刘梦_新浪博客
- MySQL十表联查快速得到结果_MySQL-第十篇多表连接查询