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

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

成果展示：

实现步骤：

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

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

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

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

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

1. 到root目录下下载压缩包：

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

2. 创建node.js安装目录：

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

3. 进入目录：

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

4. 此时我们可以在bin目录查看nodejs的版本，使用命令：

   node -v

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

6. 修改环境变量：

   vim ~/.bash_profile

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

如图：

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

   source ~/.bash_profile

8. 然后可以到其他目录下验证：

   node -v

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

步骤三：安装并配置vuepress

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

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

   npm install -g vuepress

2. 创建文件夹：

   mkdir try_blogs

   cd try_blogs

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

   npm init -y

4. 设置package.json的脚本：

   vim package.json

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

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

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

   mkdir docs

7. 进入目录创建.vuepress目录：

   cd docs

   mkdir .vuepress

8. 新建一个md文件：

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

9. 在.vuepress下创建config.js配置文件：

   cd .vuepress

   echo >config.js

10. 再创建一个public文件：

    mkdir public

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

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

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

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

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

然后使用命令杀死进程：

kill -9 15167

再次使用命令vuepress dev docs即可出现在8080端口上。

​ 效果如图，一片空白。

13. 修改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
---

14. 修改完成后返回try_blogs目录执行命令：

    vuepress dev docs

    在浏览器输入地址即可得到如下展示页面：