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

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

我第一次按教程走了一遍，不知道漏掉了什么步骤，今天我再认真搞一次！

在购买和配置了阿里云ECS之后，想用VuePress搭建博客，操作如下

〇、一些其他的

1.安装tree（树状查看文件工具）

下载

wget http://mama.indstate.edu/users/ice/tree/src/tree-1.7.0.tgz

解压

tar zxvf tree-1.7.0.tgz

进入目录

cd tree-1.7.0

make

make

放到bin目录下

cp tree /bin

可以使用啦！

tree

tree -a查看全部文件（包括隐藏文件）

2.阿里云大学原教程链接：

https://edu.aliyun.com/course/399?spm=5176.10731542.0.0.16a3b28fyPoPTf

一、安装Node.js

1.用SSH远程登录到自己的ECS

2.下载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

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

尴尬，报错了

(node:30642) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time

之后访问www.yaly.top:8080

注：VuePress中有两个命令:

vuepress dev docs 命令运行本地服务，通过访问(http://localhost:8080)即可预览网站
vuepress build docs 命 令 ⽤ 来 生 成 静 态 文件 ， 默认情况下 ，放置 在

docs/.vuepress/dist⽬录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放⽬录。在这⾥将两个命令封装成脚本的⽅式，直接使⽤npm rundocs:dev和npm run docs:build即可。

四、首页配置示例

修改 README.md⽂件，将原来的内容删除后，将以下内容拷贝进去

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