因为学生机ECS用于生产环境中,近期也没有添置ECS的想法,就架一个虚拟机实验吧。
操作系统:CentOS 7
Linux下比Windows对于软件包的管理简单很多,直接在terminal中输入响应的命令就行了。

VuePress官网:https://vuepress.vuejs.org/zh/
课程地址:https://edu.aliyun.com/course/399?spm=5176.10731542.0.0.46fab28fsIHuTf

VuePress目录结构图:

image-20200622202708034

复习下知识点:

  1. mkdir -p	//递归创建目录
    
  2. tar命令
    *.tar.gz
    tar [-cxtzjvfpPN] 文件与目录 -C 目的路径
    参数:
    -c :建立一个压缩文件的参数指令(create 的意思);
    -x :解开一个压缩文件的参数指令!
    -t :查看 tarfile 里面的文件!
    特别注意,在参数的下达中, c/x/t 仅能存在一个!不可同时存在!
    因为不可能同时压缩与解压缩。
    -z :是否同时具有 gzip 的属性?亦即是否需要用 gzip 压缩?
    -j :是否同时具有 bzip2 的属性?亦即是否需要用 bzip2 压缩?
    -v :压缩的过程中显示文件!这个常用,但不建议用在背景执行过程!
    -f :使用档名,请留意,在 f 之后要立即接档名喔!不要再加参数!

    -C:表示将解压后的文件输出到-C指定的路径下

  3. NodeJS修改环境变量

    修改环境变量量,使得能在任意⽬目录下执⾏行行node命令

    vim ~/.bash_profile
    

    找到 PATH=PATH:PATH:HOME/bin,在PATH=PATH:PATH:HOME/bin后⾯面添加路路径:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin,结果为: PATH=PATH:PATH:HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

    保存修改,然后重载一下

    source ~/.bash_profile
    
  4. 安装vuepress

    npm config set registry https://registry.npm.taobao.org 
    
    npm install -g vuepress
    
    • 小插曲:普通权限安装失败,sudo提示又命令不存在。创建软链接解决然后以上命令加sudo。(没学过软链接,依葫芦画瓢,可能存在错误,望指正。)
    sudo ln -s  /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin/node /usr/bin/node
    
    sudo ln -s  /usr/local/lib/nodejs/node-v13.9.0-linux-x64/lib/node_modules /usr/lib/node_modules
    
    sudo ln -s /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin/npm /usr/bin/npm
    
    sudo ln -s /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin/npx /usr/bin/npx
    
  5. 创建一个文件夹作为目录

    mkdir try_blogs
    cd try_blogs
    
  6. 项目初始化

    npm init -y
    

    初始化后会生成一个package.json文件 之后进入配置步骤。

  7. 设置package.json的脚本配置 vim package.json 修改scripts中的内容如下:

    "scripts": {
     "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs"
    
    },
    
  8. 依照文首目录树依次生成文件。

  9. 回到try_blogs目录,执行命令

    vuepress dev docs
    

    注:VuePress中有两个命令:
    vuepress dev docs命令运行本地服务,通过访问(http://ip:8080)即可预览网站

    vuepress build docs命令用来生成静态文件

    默认情况下,放置在 docs/.vuepress/dist目录中,当然你也可以在docs/.vuepress/config.js中的dest字段 来修改默认存放目录。在这里将两个命令封装成脚本的方式,直接使用npm run docs:dev和npm run docs:build即可。

    注:这里又出现了权限问题,重新软个链接。

    sudo ln -s /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin/vuepress /usr/bin/vuepress
    

    访问博客首页

    image-20200622200654836
  10. 更新README.md如下

    image-20200622200914492
  11. 得到一个漂亮的首页

    image-20200622201130590

小结

  1. 大概看了下指南,插件和主题挺多的,值得深入研究,考虑一波迁移。
  2. 命令太难背了...VuePress的语言也有点难记...
  3. 期末已至,复习要紧。就照着demo依葫芦画瓢吧。暑假有时间再好好研究Vue驱动和静态网站的生成原理。
  4. sudo -E 可以在当前用户环境变量下执行命令,不用创建软链接(后来才知道)。