ECS训练营进阶路线Day1--搭建自己专属的静态网站与云笔记

技术渣 2020年06月22日

开通云服务器

相信大家已经通过阿里云高校计划领取了一台属于自己的免费服务器,没有领取的同学也可以点击这里进行领取。
如果你不符合阿里云高校计划免费领取服务器的条件,可以点击这里享受新老用户专属的优惠福利

操作系统:CentOS 7

VuePress框架

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指定的路径下

搭建

  1. NodeJS修改环境变量

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

    vim ~/.bash_profile
    

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

    保存修改,然后重载一下

    source ~/.bash_profile
    
  2. 安装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
    
  3. 创建一个文件夹作为目录

    mkdir try_blogs
    cd try_blogs
    
  4. 项目初始化

    npm init -y
    

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

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

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

  7. 回到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

  8. 更新README.md如下

    image-20200622200914492

  9. 得到一个漂亮的首页

    image-20200622201130590

小结

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

参考

VuePress官网:VuePress
课程地址:搭建自己专属的静态网站与云笔记