搭建自己专属的静态网站与云笔记

搭建自己专属的静态网站与云笔记

一、安装 Node.js

1、远程登录到ECS服务器
2、登录到ECS之后,执⾏如下命令,下载Node.js 13.9.0 64位安装包

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

3、创建Node.js安装⽬录

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

4、将⼆进制⽂件解压到要安装⽬录

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

5、使⽤查看node.js版本号命令验证是否解压成功
进⼊⽬录:

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

执⾏:

./node -v	

6、修改环境变量,使得能在任意⽬录下执⾏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

7、到其他⽬录下验证

cd
node -v
npm version
npx -v

⾄此,nodejs安装完毕。

二、安装 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

修改scripts中的内容如下:

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

2、在当前⽬录中创建⼀个⽂档⽬录

mkdir docs

3、创建.vuepress⽬录

cd docs
mkdir .vuepress

4、新建⼀个md⽂件

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

5、 创建config.js配置⽂件

cd .vuepress
echo >config.js

6、创建public⽬录

mkdir public

7、完成后的⼯作⽬录如下:

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

8、回到try_blogs⽬录,执⾏命令

vuepress dev docs

9、在浏览器中运⾏: http://ECS公⽹IP:8080
⼆、⾸⻚配置示例
1、保留以上窗⼜作为后续步骤执⾏情况的观察窗⼜,另外打开⼀个窗⼜远程登
录到ECS服务器, 本实验ECS服务器为 Linux操作系统,因此远程登录ECS实例
的详细步骤,请参考云中沙箱帮助⽂档远程连接Linux系统。链接地址
为:

https://edu.aliyun.com/lab/help?spm=5176.11105641.0.0.KD1Pry&menuId=2-
0&docName=doc-remote-connect

2、⾸页配置
修改README.md⽂件,将原来的内容删除后,将以下内容拷贝进去

home: true
heroText: Vue技术博客初试
tagline: 项⽬结构,关注讨论,每⽇分享
actionText: 每⽇更新 →→
actionLink: /testlink/
features:
- title: 项⽬结构
 details: 以 Markdown 为中⼼的项⽬结构,以最少的配置帮助你专注于写作。
- title: 关注讨论
 details: 享受 Vue + webpack 的开发体验,在 Markdown 中使⽤ Vue 组件,同时可以使⽤ Vue 来开发⾃定义主题。
- title: 每⽇分享
details: VuePress 为每个⻚⾯预渲染⽣成载的时候,将作为 SPA 运⾏。
footer: LearnVueonECS Licensed | Copyright © 2020-present

3、⾄此,完成了VuePress在阿⾥云ECS上的搭建和初步配置,更多VuePress的使⽤⽂档可参考VuePress官⽹。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值