阿里云ECS训练笔记1—vuepress安装配置
安装环境
首先,得有一个服务器。作为练习,可以使用一下本地机器。或者去阿里云官网租一个ECS服务器,具体购买流程官网都有,不再做介绍。
使用的环境:阿里云赠送的ECS服务器,系统版本:Ubuntu18.04
vuepress
VuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue
驱动的主题系统和插件API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。 每一个由
VuePress生成的页面都带有预渲染好的
HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。
简单来说,使用vuepress可以比较方便的编写技术文档。
-
安装vuepress
安装vuepress要求nodejs版本在8.0版本及以上,可以使用如下命令查看nodejs版本号
node -v
如果没有安装nodejs,可以使用如下两种方式安装:
1.ubuntu软件源内已经包含了nodejs,直接使用如下命令即可安装sudo apt install nodejs npm
2.可从nodejs官网下载,或者使用命令(这里选择从taobao的源下载,提升下载速度)。
wget https://npm.taobao.org/mirrors/node/v12.18.3/node-v12.18.3-linux-x64.tar.xz #选择LTS版本
下载完成之后,解压缩下载的文件
tar -xvf node-v12.18.3-linux-x64.tar.xz && mv node-v12.18.3-linux-x64 /usr/lib/nodejs
配置环境变量
nano ~/.bashrc ## 在打开的文件末尾添加 PATH=$PATH:/usr/lib/nodejs/bin # 保存退出 # 是更改生效 source ~/.bashrc
现在查看nodejs安装配置情况,如果看到类似信息,说明nodejs安装成功了
root@xxxxx:# node -v v12.18.3 root@xxxxx:# npm -v 6.14.6
3.设置npm镜像源,提升vuepress下载速度
npm config set registry https://registry.npm.taobao.org npm install -g vuepress
-
vuepress配置使用
首先创建一个目录来存放我们的第一个demo
mkdir first_demo cd first_demo npm init -y
init之后会在first_demo目录下创建一个package.json文件,输出其中的内容
cat package.json # 以下是package.json的配置信息 { "name": "first_demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
修改scripts的值为:
"scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" },
在当前目录中创建.docs和vuepress目录
mkdir docs && cd docs mkdir .vuepress
创建一个md文件,这个就是我们的静态网站的首页
echo '# Hello VuePress -frist blog!' >README.md #显示一行文本
在.vuepress目录下创建一个配置文件和public目录
cd .vuepress mkdir public touch config.js
创建完成之后的文件结构如下:
tree first_demo -a 2 #查看文件树结构 # first_demo文件树结构如下 first_demo ├── docs │ ├── README.md │ └── .vuepress │ ├── config.js │ └── public └── package.json
回到first_demo目录,执行命令运行本地服务
vuepress dev docs
之后便可以通过8080端口访问我们的网页,可以看到如下结果:
修改README.md文件,制作一个简单的主页cd fitst_demo/docs # 修改README.md nano README.md # 删除之前的hello,添加下面的内容 --- home: true heroText: Vue技术博客初试 tagline: 简洁至上,Vue驱动,高性能 actionText: 快速上手 → actionLink: /testlink/ features: - title: 简洁至上 details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。 - title: Vue驱动 details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主>题。 - title: 高性能 details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。 footer: MIT Licensed | Copyright ? 2020-present xxxxxx ---
效果如下:
至此,简单介绍了vuepress的基本使用,具体的使用,可以参考vuepress的官网:vuepress.org。七天训练第一天完成。