Linux 下 VuePress 的安装使用

VuePress的安装使用

我的小站、Github

VuePress 是一个基于 Vue 的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。


VuePress 要求 Node.js 环境，且 Node.js 版本 >= 8.6。

环境搭建

安装 Node.js

从 官方网站 获取最新版本安装包下载链接

# 创建安装目录
sudo mkdir /usr/local/lib/nodejs

# 进入安装目录
cd /usr/local/lib/nodejs

# 下载安装包
wget  https://npm.taobao.org/mirrors/node/v14.7.0/node-v14.7.0-linux-x64.tar.xz

# 解压
sudo tar -xJvf node-v14.7.0-linux-x64.tar.xz

配置环境变量

# 编辑环境变量文件，在末尾追加 Node.js 路径
echo export PATH=/usr/local/lib/nodejs/node-v14.7.0-linux-x64/bin:$PATH >>~/.bash_profile

# 重载该文件使设置生效
source ~/.bash_profile

# 查看版本信息
node -v
npm version
npx -v

安装 VuePress

# 使⽤淘宝镜像
npm config set registry https://registry.npm.taobao.org
# 安装 VuePress
npm install -g vuepress

# 在 root 目录下创建并进入my_blogs目录
mkdir ~/my_blogs
cd ~/my_blogs

# 项目初始化 
npm init -y

配置 VuePress

# 设置 package.json 的脚本配置 (推荐使用 FinalShell等工具直接编辑)
vim package.json
# 修改scripts中的内容如下

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

修改前

修改后

# 创建文档目录以及 .vuepress ⽬录
mkdir ~/my_blogs/docs ~/my_blogs/docs/.vuepress

# 在 docs 目录下新建⼀个md⽂件 
echo '# Hello VuePress - first blog!' > ~/my_blogs/docs/README.md 

# 在 .vuepress 目录下创建 config.js 配置⽂件 
cd ~/my_blogs/docs/.vuepress 
echo >config.js 

# 在 .vuepress 目录下创建 public ⽬录 
mkdir ~/my_blogs/docs/.vuepress/public  

在 my_blogs 路径下查看目录

tree -a

# 如果没有安装 tree
# centos 系统下使用
sudo yum install tree
# Ubuntu 系统下使用
sudo apt-get -y install tree

修改首页配置

编辑 /root/my_blogs/docs 目录下的 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

vuepress dev ~/my_blogs/docs

访问网站 http://<你的公网IP地址>:8080/

vuepress dev ~/my_blogs/docs

至此，VuePress搭建完毕。