4
JackLin的博客
首页
分类
标签
生活
时间轴
关于我
友链
搜索
管理员
阿里云ECS训练营_Day01_打造专属云笔记
阿里云
环境搭建
发布日期:
2020-08-06 19:19:01
阅读量:
406
所属分类:
阿里巴巴
# 阿里云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`,然后在浏览器访问  至于后面的如何具体配置,官网应该写了,网上也有文章,我就不重复了。