vuepress概述

VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。

官网地址: https://www.vuepress.cn/guide/getting-started.html

node环境和npm支持

VuePress 需要 Node.js 版本 >= 8.6

若已有node.js环境使用命令查看node.js 版本

node -v

安装node.js

下载安装包

https://nodejs.org/dist/

本文选择v12.18.4版本

上传解压

tar -zxvf node-v12.18.4-linux-x64.tar.gz -C /usr/local/

重命名

cd /usr/local/

mv node-v12.18.4-linux-x64/ node-v12.18.4

配置环境变量

创建nodejs.sh文件并添加如下内容

vi /etc/profile.d/nodejs.sh

export PATH=/usr/local/node-v12.18.4/bin:$PATH

刷新nodejs.sh文件

[root@localhost local]# source /etc/profile.d/nodejs.sh

查看版本

[root@localhost local]# node --version

v12.18.4

[root@localhost local]# npm --version

6.14.6

VuePress安装步骤

全局安装

创建放项目的文件夹

项目文件夹可以选自任意目录,本文选自在根目录下,

[root@localhost local]# cd /

[root@localhost /]# mkdir vuepress

在项目文件夹中全局安装

[root@localhost /]# cd /vuepress/

[root@localhost vuepress]# npm install -g vuepress

安装过程较慢,请耐心等待,出现如下信息表示安装完成

+ vuepress@1.8.2

added 1221 packages from 547 contributors in 871.19s

项目初始化

执行初始化命令: npm init –y

[root@localhost vuepress]# npm init -y

Wrote to /vuepress/package.json:

{

"name": "vuepress",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

初始化后会生成package.json文件

[root@localhost vuepress]# ll

total 4

-rw-r--r--. 1 root root 222 Jun 14 12:34 package.json

配置package.json

编辑package.json文件,在scripts项中添加如下两行

{

"scripts": {

"dev": "vuepress dev docs",

"build": "vuepress build docs"

}

文件完整内容,标红的为添加的内容

{

"name": "vuepress",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"dev": "vuepress dev docs",

"build": "vuepress build docs",

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

创建主页

创建存放博客文件的docs文件夹

mkdir docs

[root@localhost vuepress]# mkdir docs

[root@localhost vuepress]# ll

total 4

drwxr-xr-x. 2 root root 6 Jun 14 12:40 docs

-rw-r--r--. 1 root root 290 Jun 14 12:38 package.json

进入到docs文件夹中创建README.md文件,这个文件就是博客的首页,在里面添加官网上的例子,也可以自定义其他内容

[root@localhost vuepress]# cd docs

[root@localhost docs]# vi README.md

# 添加如下内容

---

home: true

heroImage: /logo.jpg #主页上显示的logo图片

heroText: 莲藕淹 #主页标题

tagline: 莲藕淹的博客 #主页副标题

actionText: 开始浏览 ->

actionLink: /guide/ #点击开始浏览跳转的路径

features:

- title: 简洁至上

details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。

- title: Vue驱动

details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以>使用 Vue 来开发自定义主题。

- title: 高性能

details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将>作为 SPA 运行。

footer: Copyright @ 2018-present Evan You #尾行

---注意: 每个变量名和值之间有一个英文空格,没有会报错,冒号(:)要使用英文符号

启动访问

启动命令

npm run dev

出现如下信息表示启动成功,并监听端口8080

Client

Compiled successfully in 174.56ms

success [12:45:17] Build 8c5288 finished in 175 ms! ( http://localhost:8080/ )

浏览器访问

在浏览器中访问链接http://ip:8080,即可看到上一步创建的主页信息

编译

按ctrl+C结束运行,执行编译命令: npm run build

^C

[root@localhost docs]# npm run build

> vuepress@1.0.0 build /vuepress

> vuepress build docs

出现如下信息表示编译成功

Client

Compiled successfully in 14.65s

Server

Compiled successfully in 10.23s

wait Rendering static HTML...

success Generated static files in docs/.vuepress/dist.

编译完成后在docs文件夹下多了一个.vuepress文件夹

如果在linux系统下,以点. 开头的文件夹会被隐藏,可以直接cd到文件夹下

[root@localhost docs]# ll

total 4

-rw-r--r--. 1 root root 538 Jun 14 12:44 README.md

[root@localhost docs]# cd .vuepress/

[root@localhost .vuepress]# pwd

/vuepress/docs/.vuepress

[root@localhost .vuepress]#

配置网站信息

在.vuepress文件夹下新建一个config.js文件

这个文件是全局配置文件,可以配置网站的标题、描述、主题、导航栏等信息,添加内容如下

module.exports = {

title: '莲藕淹的博客',

description: '莲藕淹的博客',

dest: './dist',

port: '8080',

head: [

['link', {rel: 'icon', href: '/logo.jpg'}]

],

markdown: {

lineNumbers: true

},

themeConfig: {

nav: [{

text: '指南', link: '/guide/'

}],

sidebar: {'/guide/':[

{

title:'hadoop',

collapsable: true,

children:[

'/guide/notes/one',

]

},

{

title:'java',

collapsable: true,

children:[

'/guide/notes/two',

]

}

]

},

sidebarDepth: 2,

lastUpdated: 'Last Updated',

searchMaxSuggestoins: 10,

serviceWorker: {

updatePopup: {

message: "有新的内容.",

buttonText: '更新'

}

},

editLinks: true,

editLinkText: '在 GitHub 上编辑此页 !'

}

}

nav是导航栏,sidebar是侧边栏,详细配置请参考官网文档有更详细的配置:
https://www.vuepress.cn/theme/

导航栏和侧边栏的配置参考博客

https://blog.csdn.net/weixin_34910772/article/details/112240767

默认的侧边栏配置并不友好,可以使用插件自动生成,插件链接

https://github.com/realduang/vuepress-plugin-auto-sidebar

完成了基础搭建后,按照config.js里面配置的目录结构,在docs目录下新增相应的.md文件,一篇文章就是一个.md文件

[root@localhost docs]# pwd

/vuepress/docs

[root@localhost docs]# ll

total 8

drwxr-xr-x. 4 root root 32 Jun 14 13:23 guide

-rw-r--r--. 1 root root 538 Jun 14 12:44 README.md

-rw-r--r--. 1 root root 13 Jun 14 13:27 test.md

[root@localhost docs]# cd guide/

[root@localhost guide]# pwd

/vuepress/docs/guide

[root@localhost guide]# ll

total 0

drwxr-xr-x. 2 root root 28 Jun 14 13:24 hadoop

drwxr-xr-x. 2 root root 26 Jun 14 13:24 java

发布部署

安装部署nginx

  • 安装依赖包

    yum -y install pcre-devel

    yum -y install openssl-devel

    yum -y install gcc

    yum -y install lrzsz

    yum -y install openssh-clients

  • 下载安装包

    http://nginx.org/en/download.html

    本文选择1.18.0版本

  • 上传解压

    tar -zxvf nginx-1.18.0.tar.gz -C /usr/local/

  • 检查安装

    cd /usr/local/nginx-1.18.0/

./configure --prefix=/usr/local/nginx --conf-path=/usr/local/nginx/nginx.conf

注:不指定prefix,则可执行文件默认放在/usr/local/bin,库文件默认放在/usr/local/lib,配置文件默认放在/usr/local/etc

出现以下信息表示检查通过完成

Configuration summary

+ using system PCRE library

+ OpenSSL library is not used

+ using system zlib library

nginx path prefix: "/usr/local/nginx"

nginx binary file: "/usr/local/nginx/sbin/nginx"

nginx modules path: "/usr/local/nginx/modules"

nginx configuration prefix: "/usr/local/nginx"

nginx configuration file: "/usr/local/nginx/nginx.conf"

nginx pid file: "/usr/local/nginx/logs/nginx.pid"

nginx error log file: "/usr/local/nginx/logs/error.log"

nginx http access log file: "/usr/local/nginx/logs/access.log"

nginx http client request body temporary files: "client_body_temp"

nginx http proxy temporary files: "proxy_temp"

nginx http fastcgi temporary files: "fastcgi_temp"

nginx http uwsgi temporary files: "uwsgi_temp"

nginx http scgi temporary files: "scgi_temp"

  • 编译安装

    make && make install

    出现以下信息表示安装完成

    test -d '/usr/local/nginx/logs' \

    || mkdir -p '/usr/local/nginx/logs'

    test -d '/usr/local/nginx/html' \

    || cp -R html '/usr/local/nginx'

    test -d '/usr/local/nginx/logs' \

    || mkdir -p '/usr/local/nginx/logs'

    make[1]: Leaving directory `/usr/local/nginx-1.18.0'

  • 启动

    /usr/local/nginx/sbin/nginx

    注意,若启动失败请使用命令 netstat –tupln 检查端口是否占用,nginx默认端口是80,若被占用可kill掉占用程序或者修改nginx端口

    修改默认端口

    cd /usr/local/nginx

    vi nginx.conf

server {

listen 80;

server_name localhost;

把listen 80;中的80修改为其他未占用的端口号

  • 访问测试

    浏览器中输入http://ip:port ,出现如下界面表示nginx服务部署成功

编译vuepress文件

再次执行npm run build

.vuepress下的dist文件夹,就是编译后的文件,将该文件夹通过nginx代理,就可以通过nginx代理访问自己的博客网站

配置Nginx代理

配置nginx.conf文件

cd /usr/local/nginx

vi nginx.conf

server {

listen 8081;

server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root /vuepress/docs/.vuepress/dist; # //这里配置编译后的dist路径

try_files $uri $uri/ /index.html

index index.html index.htm;

}

重启nginx

停止nginx [root@localhost nginx]# sbin/nginx -s stop

启动nginx [root@localhost nginx]# sbin/nginx

访问http://192.168.194.56:8081/

Nginx代理配置成功

VuePress个人博客搭建的更多相关文章

  1. [原创]HEXO博客搭建日记

    博客系统折腾了好久,使用过Wordpress,Ghost,Typecho,其中Typecho是我使用起来最舒心的一种,Markdown编辑+轻量化设计,功能不多不少刚好,着实让我这种强迫症患者舒服了好 ...

  2. Node.js博客搭建

    Node.js 博客搭建 一. 学习需求 Node 的安装运行 会安装node,搭建node环境 会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系 ...

  3. nodejs环境 + 入门 + 博客搭建

    NodeJS:NodeJS是一个使用了Google高性能V8 引擎 的服务器端JavaScript实现.它提供了一个(几乎)完全非阻塞I/O栈,与JavaScript提供的闭包和匿名函数相结合,使之成 ...

  4. WordPress博客搭建与问题总结

      一.WordPress博客搭建 1.安装Apache web服务器 yum install -y httpd systemctl restart httpd systemctl enable ht ...

  5. 基于Github&Hexo的个人博客搭建过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 个人博客搭建( wordpress )

    最近同学买了一台虚机( centos7 系统 ).一个域名,让帮忙搭一个个人博客.本着简单快捷,个人博客采用 wordpress 来搭建.为了以后博客系统的迁移方便,使用 docker 来安装 wor ...

  7. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  8. Hexo博客搭建全解

    [原创,转载请附网址:http://dongshuyan.top] 欢迎来到莫与的博客,第一篇记录了一下怎么写一篇博客,以方便之后写博客~ #从配置说起下载安装Git与Node.js略过 1.安装he ...

  9. GITHUB个人博客搭建-Pelican 在Windows环境下的安装及配置

    GITHUB个人博客搭建-Pelican 在Windows环境下的安装及配置 前言 此篇博客主要为Pelican在Windows平台下的配置安装所写,在此过程中主要参考资料烟雨林博客.poem_of_ ...

随机推荐

  1. swoole学习笔记

    一.服务端 0. swoole常用的配置项: daemonize = true 守护进程化 worker_num #swoole配置参数 设置启动的Worker进程数: 如 1 个请求耗时 100ms ...

  2. KTV和泛型(2)

    很多使用泛型的小伙伴,都会有一个疑惑:为什么有的方法返回值前带<T>.<K, V>之类的标记,而有的方法返回值前又什么都不带呢?就像这样: // 实体基类 class Enti ...

  3. HTML+CSS基础知识(5)相对定位、绝对定位、固定定位

    文章目录 1.相对定位 1.1 代码 1.2 测试结果 2.绝对定位 2.1 代码 2.2 测试 3.固定定位 3.1 代码 3.2 测试结果 1.相对定位 1.1 代码 <!DOCTYPE h ...

  4. 微服务开发框架-----Apache Dubbo

    文章目录 一.简介 二.概念与架构 一.简介 Apache Dubbo 是一款微服务开发框架,提供了RPC通信与微服务治理两大关键能力.使用Dubbo开发的微服务,将具备相互之间的远程发现与通信能力, ...

  5. 6.pygame-搭建主程序

    职责明确 新建plane_main.py 封装主游戏类 创建游戏对象 启动游戏   新建plane_sprites.py 封装游戏中所有需要使用的精灵子类 提供游戏的相关工具 #plane_sprit ...

  6. VS使用正则表达式删除程序中的空行

    Ctrl+H; 需要替换的正则表达式 ^(?([^\r\n])\s)*\r?$\r?\n

  7. 为什么CSS中的calc函数可能会不生效?

    前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...

  8. SLAM中的内外点

    内外点之分最简单的说法就是是否符合当前位姿的判断:如果根据当前位姿,之前帧二维特征点所恢复出的地图点重投影到当前帧与实际的二维特征点匹配不上了,那么认为这个是质量差的点是outlier,抛弃掉,如果能 ...

  9. Python基础阶段总结:ATM项目实战

    目录 ATM逻辑描述 三层框架简介 1.第一层(src.py) 2.第二层(interface文件夹下内容) 3.第三层(db_hanlder) 启动函数 用户注册功能 用户登录 common中的小功 ...

  10. CodeTON Round 3 (C.差分维护,D.容斥原理)

    C. Complementary XOR 题目大意: 给你两个01串ab,问你是否可以通过一下两种操作在不超过n+5次的前提下将两个串都变为0,同时需要输出可以的操作方案 选择一个区间[l,r] 将串 ...