阿里云七天训练营class1：打造专属云笔记 vuepress 创建简易博客

本文链接：https://blog.csdn.net/weixin_44069607/article/details/107835262

阿里云七天训练营class1：打造专属云笔记 vuepress 创建简易博客

文章目录

阿里云七天训练营class1：打造专属云笔记 vuepress 创建简易博客

成果展示：

在这里插入图片描述

实现步骤：

步骤一：配置安全组，增加8080端口。

在这里插入图片描述

点击添加安全组规则或者快速创建规则，然后选择HTTP80端口，自定义TCP端口为8080，授权对象设为0.0.0.0/0，点击确定。

在这里插入图片描述

然后可以看到列表上多了一个8080端口，证明设置成功。

在这里插入图片描述

本来使用ssh远程登录的话还需要添加SSH的22端口，但是这台服务器原本已经开放了22端口，可见上图的第4行。

步骤二：在服务器安装node.js并配置环境变量

到root目录下下载压缩包：

wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
创建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
此时我们可以在bin目录查看nodejs的版本，使用命令：

node -v
如果显示版本号说明配置成功，不过如果想要在全局使用node命令需要将node添加到环境变量。
修改环境变量：

vim ~/.bash_profile

操作方法：按i进入插入模式，将光标移动到bin后面，复制:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin,按鼠标中键即可粘贴，然后按esc退出插入，输入:wq保存并退出。

如图：

在这里插入图片描述

然后对环境变量重载一下：

source ~/.bash_profile
然后可以到其他目录下验证：

node -v

如果出现node的版本号说明配置成功。

在这里插入图片描述

步骤三：安装并配置vuepress

全局安装，使用淘宝镜像加速：

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

npm install -g vuepress
创建文件夹：

mkdir try_blogs

cd try_blogs
项目初始化，初始化后会⽣成⼀个package.json⽂件：

npm init -y

在这里插入图片描述

设置package.json的脚本：

vim package.json
将原来的内容删去，添加如下内容即可，做法与配置环境变量相同：

"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"

在这里插入图片描述

然后在try_blogs目录下创建一个docs目录：

mkdir docs
进入目录创建.vuepress目录：

cd docs

mkdir .vuepress
新建一个md文件：

echo '# Hello VuePress -first blog!' >README.md
在.vuepress下创建config.js配置文件：

cd .vuepress

echo >config.js
再创建一个public文件：

mkdir public

最后项目的目录结构如下：

在这里插入图片描述

回到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即可。

在这里插入图片描述

然后我们在浏览器中输入：公网ip :8080即可访问到我们的README.md。

注意：如果显示的不是8080端口，说明端口被占用，可以ctrl+c暂时关闭服务，然后使用命令：

netstat -lnp|grep 8080查看占用该端口进程号，

然后使用命令杀死进程：

kill -9 15167

再次使用命令vuepress dev docs即可出现在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: Learn Vue On ECS Licensed | Copyright 2020-present
---