基于VuePress搭建自己的个人技术网站 ECS训练营进阶

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

VuePress

文章目录

• 基于VuePress搭建自己的个人技术网站
• VuePress
• 为什么要使用
• 开通ECS服务器
• 云服务器参数
• 设置安全组
• 安装Node.js
• 安装Vuepress
• 目录结构
• 配置VuePress
• 尝试案例内容

[VuePress]: https://www.vuepress.cn/

• 轻量级静态网站生成器
• 可以用做博客或技术文档
• 可以快速的部署到github上

为什么要使用

• 界面简洁优雅
• 好上手
• 更好兼容markdown语法
• 性能高

开通ECS服务器

云服务器参数

• 计费方式

  • 包年包月 网站
  • 按量付费 测试,临时跑数据
  • 抢占式实例 价格波动,高于价运行,低于释放,不适合放长期的数据

• 地域 选择访客多的地域

• 实例系列 (cpu,内存)

• 镜像 (实例模板 操作系统,环境)

  • 公共镜像 阿里提供的基础操作系统
  • 自定义镜像 根据用户快照生成的镜像
  • 共享镜像 别的阿里云账号做的镜像
  • 镜像市场 经过审核的镜像

• 存储 (类型和大小)

  • 高效云盘 便宜
  • SSD云盘 贵 性能更好

• 网络 (经典或vpc专有网络类型)

  • vpc专有网络 安全性更好

• 公网带宽

  • 按照固定带宽计费 对网络要求稳定
  • 按照使用流量计费

• 安全设置

  • 安全组 虚拟防火墙

• 时长及数量

• 登录凭证 设置密码

  • 密钥对 通过秘钥文件登录到系统
  • 自定义密码 linux默认登录名root 然后自己设置密码
  • 创建后设置

• 实例名称 可以修改

设置安全组

从控制台进入ECS服务器 选择服务器进入实例列表

进入安全组,点击配置规则

我用的是手动添加

安装Node.js

1. 用命令行登录自己的主机

   公网ip地址在实例那个界面

   ssh root@主机的公网ip地址
   

   

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

查看版本号 如果不添加到系统环境变量就得到bin目录下看版本号

./node -v

6.修改环境变量

vim ~/.bash_profile

PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin

保存退出

让环境变量生效

source ~/.bash_profile 

1. 目录验证

   node -v
   npm version
   npx -v
   

   

2. 看版本

node -v

安装Vuepress

1.淘宝镜像加速后安装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

目录结构

配置VuePress

1.设置package.json的脚本配置 此时是在try_blogs目录下

vim package.json

2、在当前目录中创建一个文档目录

mkdir docs

3、创建.vuepress目录

cd docs
mkdir .vuepress

注意:linux中点开头的文件是隐藏文件 需要命令ls -a 才能看到

4、新建一个md文件

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

5、创建config.js配置文件

cd .vuepress
touch config.js

6、创建public目录

mkdir public

7、完成后的工作目录如下：

8、回到try_blogs目录，执行命令

vuepress dev docs

注：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即可。

9、在浏览器中运行：

http://ECS公网IP:8080

成功!这里显示的就是README.md

尝试案例内容

---
home: true
heroText: Vue技术博客初试
tagline: 项目结构，关注讨论，每日分享
---

重开一个命令行 terminal

将以上内容放入README.md

来源：oschina

链接：https://my.oschina.net/u/4361903/blog/4479984