基于VuePress搭建自己的个人技术网站

搭建步骤

1. 开通云服务器
2. 安装VuePress
3. 配置VuePress
   VuePress中文网

1.开通云服务器

此处以阿里云开通ECS云服务器为例

步骤：计费方式—地域—实例—镜像—存储—网络—公网带宽—安全设置—时长及数量

计费方式：分为包年包月、按量付费、抢占式实例三种

• 包年包月：预付费类型，适合长期稳定使用服务器的场景，如需要搭建7*24运行的网站
• 按量付费：后付费类型，适合测试，临时跑数据
• 抢占式实例：后付费类型，适合测试，临时跑数据；相较于按量付费会有一定的折扣，价格会随需求而波动；如果出价低于成交价，实例会被释放，出价高于成交价，实例则会继续运行；因此，抢占式实例不要存放长期需要保存的数据

地域：服务器数据中心所在城市，最好选择业务访客量高的地区的服务器

实例：实例规格决定了服务器的CPU、内存、处理器、主频和带宽等信息

镜像：分为公共镜像、自定义镜像、共享镜像和镜像市场

• 公共镜像：阿里云官方提供的公共基础镜像， 包括了初始的系统环境，即基本的操作系统及版本
• 自定义镜像：基于用户系统快照生成的，包括初始的系统环境，应用环境和相关软件，可以节省用户配置部署时间
• 共享镜像：由其他阿里云用户分享的镜像
• 镜像市场：由阿里云第三方合作伙伴提供的经过严格审核的优质镜像，预装操作系统、应用环境和各类软件，可以节省用户配置部署时间

此处我们选择CentOS操作系统，7.3.64位版本

存储：系统盘分为高效云盘和SSD云盘两种

SSD云盘比高效云盘性能更高， 高效云盘价格相较于SSD云盘更低

网路：分为专有网络和经典网络两种

专有网络隔离性、安全性会比经典网络更好

公网带宽：带宽计费模式分为按使用流量和按固定带宽两种模式

• 如业务场景网络带宽要求比较稳定可选择按固定带宽模式
• 带宽峰值根据网站流量选择

安全组：相当于虚拟防火墙，可以对ECS的网络访问进行控制

时长及数量：根据需要进行设置

2.安装VuePress

设置安全组—安装Node.js—安装VuePress

设置安全组：开放SSH 22端口和VuePress使用的8080端口

安装Node.js

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

创建Node.js安装⽬录

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

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

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

使⽤查看node.js版本号命令验证是否解压成功

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

./node -v

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

安装VuePress

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

创建⼀个⽂件夹作为⽬录

mkdir try_blogs
cd try_blogs

项⽬初始化

npm init -y

初始化后会⽣成⼀个package.json⽂件 之后进⼊配置步骤。

3.配置 VuePress

设置package.json的脚本配置vim package.json

修改scripts中的内容如下：

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

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

mkdir docs

创建.vuepress⽬录

cd docs
mkdir .vuepress

新建⼀个md⽂件

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

创建confifig.js配置⽂件

cd .vuepress
echo >config.js

创建public⽬录

mkdir public

回到try_blogs⽬录，执⾏命令

vuepress dev docs

注：VuePress中有两个命令:vuepress dev docs 命令运⾏本地服务，通过访问(http://localhost:8080)即可预览⽹站vuepress build docs 命 令 ⽤ 来 ⽣ 成 静 态 ⽂ 件 ， 默 认 情 况 下 ， 放 置 在docs/.vuepress/dist⽬录中，当然你也可以在docs/.vuepress/confifig.js中的dest字段来修改默认存放⽬录。在这⾥将两个命令封装成脚本的⽅式，直接使⽤npm rundocs:dev和npm run docs:build即可。

在浏览器中运⾏： http://ECS公⽹IP:8080

修改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
---

刷新网页

现在我们就成功初步搭建好了VuePress静态网站