阿里云ECS+VuePress搭建静态网站与云笔记

阿里云ECS+VuePress搭建静态网站与云笔记

一、环境

云服务器：阿里云ECS（包年包月，1核4G）

操作系统：CentOS7

注意事项：需要在ECS的“本实例安全组”开放22和8080端口，一般默认开启22端口，而8080端口是VuePress的，参照已有端口配置即可，如果已有其他应用占用8080端口需先停止该应用或更改端口。

二、安装Node.js

为什么要安装Node.js？

VuePress由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。事实上，一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页应用。

Vue.js（Vue）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。

传统上，前端用 JS 写，服务器端用Ruby/Java/PHP等，但是Node.js出现之后，JS实现了前后通吃。类似React/Vue.js这样的前端框架的开发环境变得非常强大，Node.js是这些开发环境运行的基础。

Node.js是一个基于Chrome V8引擎的Javascript运行环境。

安装过程

1、wget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz（从官方源下载LTS版）或wget https://npm.taobao.org/mirrors/node/v14.7.0/node-v14.7.0-linux-x64.tar.xz（从淘宝源下载Current版）。此处下载两个一是为了比较速度，二是为了后续尝试不同版本，可以看到后者快得多。

2、将归档文件解压到任意你想安装Node的位置，我的选择是/usr/local/lib/nodejs

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

sudo tar -xJvf node-v12.18.3-linux-x64.tar.xz -C /usr/local/lib/nodejs

3、进入解压目录，查看是否解压成功

cd /usr/local/lib/nodejs/node-v12.18.3-linux-x64/bin

./node -v

三、安装VuePress

1、更换npm的源并安装VuePress

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⽂件，之后进⼊配置步骤。
四、配置
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⽬录，执⾏命令
vuepress dev docs
在浏览器中运⾏： http://ECS公⽹IP:8080