阿里云ECS服务器和Vuepress实现静态博客

ECS 服务器进阶打卡 Day1

Vuepress制作静态博客

步骤

1. 开通服务器
2. 安装vuepress
3. 配置vuepress

1、开通服务器

(这里不做详细描述)
得益于阿里云高校计划，之前领取了一台ECS服务器，系统是CentOs
配置安全组，开放8080端口
然后通过SSH连接上自己的服务器，这里推荐一个连接的软件，不用每次都输密码(MobaXterm)

2、安装node和vuepress

登录进ECS服务器后，在命令框中执行下面代码块
安装node

wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz

1)创建Node.js安装⽬录

sudo mkdir -p /usr/local/lib/nodejs

2)将⼆进制⽂件解压到要安装⽬录

sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs

3)使⽤查看node.js版本号命令验证是否解压成功,进⼊⽬录：

cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

执⾏：

./node -v

4)修改环境变量，使得能在任意⽬录下执⾏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
5)到其他⽬录下验证

cd
node -v
npm version
npx -v

三、安装 VuePress
1、全局安装
为加快下载安装速度，采⽤淘宝镜像。

npm config set registry https://registry.npm.taobao.org
npm install -g vuepress

2、创建⼀个⽂件夹作为⽬录

mkdir try_blogs
cd try_blogs

3、项⽬初始化

npm init -y

初始化后会⽣成⼀个package.json⽂件

配置vuepress

1、设置package.json的脚本配置

vim package.json

2、修改scripts中的内容如下：

"scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs"
 }

保存后退出
3、在当前⽬录中创建⼀个⽂档⽬录

mkdir docs

4、创建.vuepress⽬录

cd docs
mkdir .vuepress

5、新建⼀个md⽂件

echo '# Hello VuePress - first blog!' >README.md

6、 创建config.js配置⽂件

cd .vuepress
echo >config.js

7、创建public⽬录

mkdir public

8、完成后的⼯作⽬录如下：
try_blogs
├─ docs //以后要在这⾥⾯写⽂章，直接在此⽂件夹下新建⽂件夹，然后再建
md⽂档就⾏，链接会⾃动⽣成
│ ├─ README.md // 这个将会是我们以后的⾸页
│ └─ .vuepress // 这个⾥⾯会存放⼀些配置和组件
│ └─ public // 静态⽂件存放地
│ └─ config.js //配置⽂件，以后的所有配置基本都在这⾥写
└─ package.json
9、回到try_blogs⽬录，执⾏命令

cd ..

> vuepress 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即可。
11、在浏览器中运⾏： http://ECS服务器公⽹IP:8080