VuePress搭建自己的-笔记/博客

默认 5个月前 散逸
浏览:426 0

什么是VuePress?

VuePress是以Vue驱动的静态网站生成器,是一个由Vue、Vue Router和webpack驱动的单页应用。在VuePress中,你可以使用Markdown编写文档,然后生成网页,每一个由VuePress生成的页面都带有预渲染好的HTML,也因此具有非常好的加载性能和搜索引擎优化。

简洁至上、Vue 驱动、高性能

更多看官网介绍:

https://vuepress.vuejs.org/zh/


1.安装 Node.js

教程以 Node.js 13.9.0 64位为例。(VuePress⽀持使⽤Yarn和npm来安装, Node.js版本需要>=8才可以。这⾥我们使⽤npm。)

1、远程登录到服务器

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

执行:./node -v

结果会出现版本:v13.9.0

6、修改环境变量量,使得能在任意目录下执⾏行行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

7、到其他目录下验证

node -v
npm version
npx -v

截图如下:

VuePress搭建自己的-笔记/博客

⾄此,nodejs安装完毕。

2.安装 VuePress

1、全局安装

为加快下载安装速度,采⽤淘宝镜像。

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

2、创建⼀个⽂件夹作为⽬录

mkdir try_blogs
cd try_blogs

3、项⽬初始化

npm init -y

初始化后会⽣成⼀个package.json⽂件

之后进⼊配置步骤。

3.配置VuePress


⼀、基本配置步骤
1、设置package.json的脚本配置
vi package.json
修改scripts中的内容如下:
“scripts”: {
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
},
截图如下:

VuePress搭建自己的-笔记/博客


2、在当前⽬录中创建⼀个⽂档⽬录
mkdir docs
3、创建.vuepress⽬录
cd docs
mkdir .vuepress
4、新建⼀个md⽂件
echo '# Hello VuePress - first blog!' >README.md
5、 创建config.js配置⽂件
cd .vuepress
echo >config.js
6、创建public⽬录
mkdir public
7、完成后的⼯作⽬录如下:
try_blogs
├─ docs //以后要在这⾥⾯写⽂章,直接在此⽂件夹下新建⽂件夹,然后再建
md⽂档就⾏,链接会⾃动⽣成
│ ├─ README.md // 这个将会是我们以后的⾸页
│ └─ .vuepress // 这个⾥⾯会存放⼀些配置和组件
│ └─ public // 静态⽂件存放地
│ └─ config.js //配置⽂件,以后的所有配置基本都在这⾥写
└─ package.json

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 run
docs:dev和npm run docs:build即可

11、在浏览器中运⾏: http://IP:8080

⼆、⾸⻚配置示例
1、保留以上窗⼜作为后续步骤执⾏情况的观察窗⼜,另外打开⼀个窗口远程登
录到服务器, 本实验服务器为 Linux操作系统
2、⾸页配置

修改README.md文件,将原来的内容删除后,将以下内容拷贝进去:

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---


3、⾄此,完成了VuePress的搭建和初步配置,更多VuePress的使用文档可参考VuePress官⽹。

版权声明:散逸 发表于 2020-05-02 18:27:22。
转载请注明:VuePress搭建自己的-笔记/博客 | 散逸-博客-导航

暂无评论

暂无评论...