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 - ﬁrst blog!' > ~/my_blogs/docs/README.md # 在 .vuepress 目录下创建 conﬁg.js 配置⽂件
cd ~/my_blogs/docs/.vuepress
echo >conﬁg.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搭建完毕。

Linux 下 VuePress 的安装使用相关推荐

Linux下Tomcat的安装配置
Linux下Tomcat的安装配置一.下载安装对应的jdk,并配置Java环境. 官网下载地址: http://www.oracle.com/technetwork/java/javase/down ...
linux下从git获取有权限的代码,linux下从源代码安装git
之所以有这样的需求,是因为部分预安装的git版本太低,很多功能没有并且安全性存在问题. 比如git submodule add xxx@host:yyy.git必须在父repo的root目录安装,而新 ...
linux编译安装jpeg,Linux下JPEG库安装脚本(转)
Linux下JPEG库安装脚本(转)[@more@]该脚本用于在Linux下安装JPEG库,在安装GD库的时候如果没有JPEG库,GD将不能生成JPEG格式的图象. 作者: 何志强#----where ...
Linux下图解minicom安装
Linux下图解minicom安装 minicom是一个串口通信工具,就像Windows下的HyperTerminal.可用来与串口设备通信,如调试交换机和Modem等.它的Ubuntu软件包的名称就 ...
Linux下的软件安装方法介绍
本文目录一.Linux下的软件安装方式二.在线安装三.使用dpkg从本地磁盘安装deb软件包本文目录一.Linux下的软件安装方式通常Linux上的软件安装主要有三种方式: 在线安装从磁 ...
linux下nginx编译安装
转载自: http://hanqunfeng.iteye.com/blog/697696 一.下载nginx 下载地址:http://www.nginx.org/ 选择nginx-0.8.36 将该下 ...
linux下pptpd的安装配置(×××)
linux下pptpd的安装配置(×××)--单网卡×××实现 (本文部分内容摘自互联网,特此声明!) 环境介绍:Linux(redhat) 2.6.18 +PPP+PPTPD ...
OpenCV在Linux下的编译安装（Ubuntu )
OpenCV在Linux下的编译安装(Ubuntu ) 1.先安装相关的库: sudo apt-get install build-essential sudo apt-get install lib ...
Linux下Nagios的安装与配置
Linux下Nagios的安装与配置 2017-03-23 17:40:20 来源: 点击:0 Nagios是企业普遍使用的最具影响力的网络信息监视系统之一,它可以动态监视指定的网络状态 ...

Linux 下 VuePress 的安装使用