基于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
---

刷新网页

Last modification:July 13th, 2020 at 01:00 am
如果觉得我的文章对你有用,请随意赞赏