通过使用阿里云+vuepress快速搭建静态个人博客网页页面

首先通过阿里云服务器创建一个esc云服务器实例

安装VuePress程序

  • 进入本实例安全组,开放22以及8080端口,22端口是用ssh远程链接的,8080是静态页面需要的端口
  • 通过ssh远程链接到服务器
    安装Node.js
    wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz
    sudo mkdir -p /usr/local/lib/nodejs  
    sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs
    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
    
    安装VuePress
    npm config set registry https://registry.npm.taobao.org
    npm install -g vuepress
    mkdir try_blogs
    cd try_blogs
    npm init -y
    

配置VuePress

vim package.json
修改scripts中的内容如下:
 "scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs"
 },
 mkdir docs
 cd docs
 mkdir .vuepress
 echo '# Hello VuePress - first blog!' >README.md
 cd .vuepress
 echo >config.js
 mkdir public
 vue dev docs
 注:VuePress中有两个命令:
vuepress dev docs 命令运⾏本地服务,通过访问(http://localhost:8080)即可预览⽹
站
vuepress build docs 命 令 ⽤ 来 ⽣ 成 静 态 ⽂ 件 , 默 认 情 况 下 , 放 置 在
docs/.vuepress/dist⽬录中,当然你也可以在docs/.vuepress/config.js中的dest字段
来修改默认存放⽬录。在这⾥将两个命令封装成脚本的⽅式,直接使⽤npm run
docs:dev和npm run docs:build即可。

在浏览器中运⾏: http://ECS公⽹IP:8080 就能看见刚刚配置的页面了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值