4
JackLin的博客
首页
分类
标签
生活
时间轴
关于我
友链
搜索
管理员
阿里云ECS训练营_Day01_打造专属云笔记
阿里云
环境搭建
发布日期:
2020-08-06 19:19:01
阅读量:
200
所属分类:
阿里巴巴
# 阿里云ECS训练营-Day01-打造专属云笔记 ### 前言 **今天是关于使用 VuePress 搭建静态云笔记的，之前对 Node.js 和 Vue 都不太了解，还是尝试去做了。官网文档配合视频简介，对 VuePress 有了一个基本的了解，也复习了一些 Linux 的操作，收获不错。** VuePress官网地址：https://www.vuepress.cn/ ------ > 该系列博客时关于阿里云ESC训练营7天进阶路线对应的博客。 ### 1. 设置安全组 VuePress默认使用8080端口，开放即可  ### 2. 安装Node.js 视频中用的 wget 下载安装包，我这里用的本地下载然后上传到服务器上。 支持yum和npm安装 ---- ##### （1）去 Node.js 官网下载安装包，上传至服务器 压缩包放在 `/tmp` ##### （2）解压 解压到该目录：`/usr/local/lib/nodejs` - 先递归创建目录 ``` mkdir -p /usr/local/lib/nodejs ``` > 问题1  这个文件是以 `.xz` 为后缀的，而 `z` 参数不适用，应该用 `J` 参数  > 问题2 由于疏忽，未指定目录，应该用 `-C` 指定解压到的目录  ----- 最终的命令： ```bash tar -xJvf node-v12.18.3-linux-x64.tar.xz -C /usr/local/lib/nodejs ``` ##### （3）验证安装是否成功 进入解压后的目录里面的 bin 目录，执行命令 `./node -v`，显示版本号即安装成功 ```bash [root@jacklin bin]# pwd /usr/local/lib/nodejs/node-v12.18.3-linux-x64/bin [root@jacklin bin]# ls node npm npx [root@jacklin bin]# ./node -v v12.18.3 ``` ##### （4）配置环境变量 为了方便，在其他目录下也可以使用node命令，在 `/etc/profile` 后面添加一句 ```bash export PATH=$PATH:/usr/local/lib/nodejs/node-v12.18.3-linux-x64/bin ``` 然后执行 `source /etc/profile`立即生效即可 ### 3. 安装 VuePress ##### （1）使用 npm 安装 官网文档：https://www.vuepress.cn/guide/getting-started.html 这里先使用淘宝的镜像仓库并验证。 ```bash [root@jacklin /]# npm config set registry https://registry.npm.taobao.org [root@jacklin /]# npm config get registry https://registry.npm.taobao.org/ [root@jacklin /]# npm install -g vuepress ```  ##### （2）尝试使用 --> 全局安装 跟着官网走，先简单的尝试一下 ```bash [root@jacklin /]# cd home # 随便进入一个文件夹 [root@jacklin home]# mkdir vuepress-starter # 创建一个项目根目录 [root@jacklin home]# cd vuepress-starter/ [root@jacklin vuepress-starter]# echo 'Hello VuePress ---- By JackLin' > README.md # 编辑文件 [root@jacklin vuepress-starter]# ls README.md [root@jacklin vuepress-starter]# vuepress dev . # 开始写作 wait Extracting site metadata... tip Apply theme @vuepress/theme-default ... tip Apply plugin container (i.e. "vuepress-plugin-container") ... tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ... tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ... tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ... tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ... ✔ Client Compiled successfully in 7.82s ℹ ｢wds｣: Project is running at http://0.0.0.0:8080/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from /home/vuepress-starter/.vuepress/public ℹ ｢wds｣: 404s will fallback to /index.html success [17:52:33] Build 82f839 finished in 7822 ms! > VuePress dev server listening at http://localhost:8080/ ✔ Client Compiled successfully in 224.24ms success [17:52:33] Build a3f338 finished in 225 ms! ( http://localhost:8080/ ) ``` 注意：此时服务正在运行，进入浏览器查看，可以查看到内容如下所示：  此时的文件目录是这样的: ```bash [root@jacklin vuepress-starter]# ls -al total 12 drwxr-xr-x 2 root root 4096 Aug 6 18:12 . drwxr-xr-x. 13 root root 4096 Aug 6 18:12 .. -rw-r--r-- 1 root root 33 Aug 6 18:12 README.md ``` 然后执行 `vuepress build .` 构建静态文件之后的文件目录是这样的；这个 .vuepress目录是隐藏目录 ```bash [root@jacklin vuepress-starter]# ls -al total 16 drwxr-xr-x 3 root root 4096 Aug 6 18:23 . drwxr-xr-x. 13 root root 4096 Aug 6 18:12 .. -rw-r--r-- 1 root root 33 Aug 6 18:12 README.md drwxr-xr-x 3 root root 4096 Aug 6 18:23 .vuepress [root@jacklin vuepress-starter]# cd .vuepress/ [root@jacklin .vuepress]# ls -al total 12 drwxr-xr-x 3 root root 4096 Aug 6 18:23 . drwxr-xr-x 3 root root 4096 Aug 6 18:23 .. drwxr-xr-x 3 root root 4096 Aug 6 18:23 dist [root@jacklin .vuepress]# cd dist [root@jacklin dist]# ls 404.html assets index.html [root@jacklin dist]# cd assets [root@jacklin assets]# ls css img js ``` ##### (3) 现有项目 ---> 深入了解 刚才只是简单的尝试了一下，现在是在项目中使用 VuePress，用来管理文档。 按照官网的说法，应将 VuePress 安装为本地依赖。那就来呗！ 从官网截的目录结构图：**约定优于配置**，所有要遵守他的目录结构  还有一个是视频中的截图，我们就按照这个目录结构来搭建基本结构吧。  - 创建另一个根目录 ```bash mkdir vuepress-starter2 ``` - 初始化项目 一开始对 Node.js 不是很了解，看了群里大佬们的文章才知道用 `npm init ` 来初始化项目 ```bash npm init -y ``` - 之后再 package.json 中加入下面脚本 ```json { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } ```  - 接着创建 docs 目录 ```bash mkdir docs ``` - 在 docs 目录下新建 Markdown 文件 ``` echo '# VuePress 现有项目 ---- by JackLin' > README.md ``` - 在 docs 下面创建 .vuepress 目录，再在 .vuepress 里面创建 public 目录和 config.js 文件 - 退到根目录，执行 `vuepress dev docs`，然后在浏览器访问  至于后面的如何具体配置，官网应该写了，网上也有文章，我就不重复了。
