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

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

文章目录

  • 阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客
    • 成果展示:
    • 实现步骤:
      • 步骤一:配置安全组,增加8080端口。
      • 步骤二:在服务器安装node.js并配置环境变量
      • 步骤三:安装并配置vuepress

成果展示:

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第1张图片

实现步骤:

步骤一:配置安全组,增加8080端口。

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第2张图片

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第3张图片

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

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第4张图片

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

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第5张图片

本来使用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保存并退出。

如图:

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第6张图片

  1. 然后对环境变量重载一下:

    source ~/.bash_profile

  2. 然后可以到其他目录下验证:

    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

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第7张图片

  1. 设置package.json的脚本:

    vim package.json

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

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

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第8张图片

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第9张图片

  1. 然后在try_blogs目录下创建一个docs目录:

    mkdir docs

  2. 进入目录创建.vuepress目录:

    cd docs

    mkdir .vuepress

  3. 新建一个md文件:

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

  4. 在.vuepress下创建config.js配置文件:

    cd .vuepress

    echo >config.js

  5. 再创建一个public文件:

    mkdir public

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

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第10张图片

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

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第11张图片

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

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

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

在这里插入图片描述

然后使用命令杀死进程:

kill -9 15167

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

​ 效果如图,一片空白。

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第12张图片

  1. 修改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
---
  1. 修改完成后返回try_blogs目录执行命令:

    vuepress dev docs

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

阿里云七天训练营class1: 打造专属云笔记 vuepress 创建简易博客_第13张图片

你可能感兴趣的:(阿里云七天训练营)