基于ECS搭建VuePress个人博客

本教程是基于ECS搭建VuePress个人博客网站

首先创建ECS实例，选用系统centos（此处省略创建步骤）

1.创建安全组——开放22端口和8080端口

注:22端口用于ssh远程连接服务器，8080端口是用于访问博客的端口

在这里插入图片描述

授权对象0.0.0.0/0 表示所有人都可以访问

2.通过ssh远程连接服务器，我这里使用的软件是xshell

ssh root@你的ecs的公网IP地址

3.安装node.js

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

4.创建node.js安装目录，将二进制文件解压到此目录

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

5.验证是否解压成功，进入以下目录，执行 ./node -v

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

在这里插入图片描述

可以看到显示了版本号v13.9.0表示解压成功

6.添加环境变量

vim ~/.bash_profile

找到 PATH= $PATH:$ HOME/bin

按下 i 键，转化为插入模式

在PATH= $PATH:$ HOME/bin 后⾯添加路径:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

在这里插入图片描述

然后退出保存，先按esc 从插入模式转换成只读模式

然后执行

:wq

保存退出，然后输入以下命令进行

source ~/.bash_profile

切换到其他目录，执行node -v，我这里演示后退1个目录

cd ../
node -v

如果返回版本号，则表示环境变量添加成功。

执行

npm version
npx -v

在这里插入图片描述

显示出这些内容，node.js就算安装完毕了。

7.安装VuePress

全局安装，执行以下命令

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

在这里插入图片描述

创建一个文件夹作为目录，进入文件夹进行项目初始化

mkdir try_blogs
cd try_blogs
npm init -y

初始化之后会生成一个package.json文件

在这里插入图片描述

8.配置VuePress

配置 package.json 脚本

vim package.json

修改改scripts中的内容

“docs:dev”: “vuepress dev docs”,

“docs:build”: “vuepress build docs”
在这里插入图片描述

保存退出

在当前目录新建docs文件夹，进入docs文件夹，创建.vuepress目录

mkdir docs
cd docs
mkdir .vuepress

新建一个md文件

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

进入.vuepress目录，创建config.js配置文件，和public目录

cd .vuepress
echo >config.js
mkdir public

完成以后的工作目录结构图

在这里插入图片描述

docs文件夹：以后要在这里写文章，直接在这个文件夹下新建文件夹，在新建md文档就行

README.md：这是我们的首页

.vuepress：存放一些配置和组件

public：静态文件存放地

config.js ：配置文件

然后—回到try_blogs目录

cd ..
cd ..

执行

vuepress dev docs

在这里插入图片描述

成功以后，打开浏览器输入

http://你的ecs公网ip:8080 访问博客网站

在这里插入图片描述

显示这个页面，证明你的博客搭建成功啦！

下一步，简单的配置首页，更改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
---

再开一个终端，连接到ecs实例，连接成功以后

cd /usr/local/lib/nodejs/try_blogs/docs
vim README.md

拷贝，保存

在这里插入图片描述

拷贝以后注意缩进是否正确

然后刷新页面，如出现如下页面，说明你成功啦！

在这里插入图片描述

教程到这里就结束啦，感谢大家的观看，有疑问请留言！