博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在centos7 上部署 vuepress
阅读量:5022 次
发布时间:2019-06-12

本文共 2620 字,大约阅读时间需要 8 分钟。

vuepress是一款十分优秀简洁的文档生成器,可以根据目录下的md文档自动生成对应的html文件,界面简洁大方。每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。本文将介绍如何在CentOS7环境下部署vuepress。可以先欣赏一下效果再决定是否要搭建:https://mfrank2016.github.io/wikibook/。个人觉得还算不错的,比较简洁大方。

一、安装nodejs

curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -yum install nodejs

 

二、安装vuepress

npm install -g vuepress

 

三、创建工作目录

mkdir projectcd projectmkdir docs

 

四、初始化前

npm init -yvim package.json

编辑成如下内容,这里其实是设置命令别名。

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

创建.vuepress目录。

mkdir .vuepresscd .vuepress

创建config.js,这是vuepress的全局配置文件,大部分属性在这里设置。

mkdir publicvim config.js

修改成如下内容,对应内容可以自行修改。官方说明文档在这里:https://vuepress.vuejs.org/zh/config/

 

module.exports = {    title: '清风wiki',    description: '我在等风,也在等你',    // 相对于git仓库的路径 如全路径为:https://mfrank2016.github.io/wikibook/ 则设置为'/wikibook/'    base: '/wikibook/',    host: '0.0.0.0',    // 运行端口    port: 8081,    themeConfig: {        //gitc 仓库地址        repo: 'https://github.com/MFrank2016/wikibook',        // 如果你的文档不在仓库的根部           docsDir: 'docs',        // 可选,默认为 master        docsBranch: 'master',        // 默认为 true,设置为 false 来禁用        editLinks: true,        //导航栏        nav: [              { text: 'Home', link: '/' },              { text: 'Guide', link: '/guide/' },              { text: 'External', link: 'https://google.com' },              { text: 'Languages',              items: [              { text: 'Chinese', link: '/language/chinese' },              { text: 'Japanese', link: '/language/japanese' }              ]}],          sidebar: [{            title: 'Group 1',            collapsable: false,            children: [                  '/'                ]              },              {            title: 'Group 2',            children: [                '/'                ]              }        ]      },      //搜索    search: true,    searchMaxSuggestions: 10,    lastUpdated: 'Last Updated', // string | boolean}

整体结构

project

├─── docs
│ ├── README.md
│ ├── .vuepress
│ ├── config.js
│ └── public
│ └── hero.png
│ └── guide
│ └── README.md
└── package.json

五、初始化

在docs目录下创建README.md

---home: trueheroImage: /hero.pngactionText: 点击阅读actionLink: /guide/footer: MIT Licensed | Copyright © 2018-present Frank---

然后回到project目录

# 开启调试模式,运行服务,此时打开 http://localhost:8081 (这里即上面设置的端口) 即能看到最简单的页面vuepress dev# 构建,此时会将md文档转化成html文件存储在docs/.vuepress/dist目录vuepress build

六、调试部署

此时静态网页已经生成在了**docs/.vuepress/dist**目录下,可以先开启调试模式,然后使用ftp等软件先对服务器进行远程连接,修改docs下面的文档,每次修改上传后,会自动重新编译,当然整个过程需要一两分钟时间,这取决于服务器的性能。调整到合适的程度即可将其移动到nginx或者apache相应目录下即可。

 

转载于:https://www.cnblogs.com/mfrank/p/9657896.html

你可能感兴趣的文章
./是当前目录 ../是当前的上一级目录。上上级就是../../一般绝对路径时候常用...
查看>>
linux支持FTP和SFTP服务【1】
查看>>
树的递归与非递归遍历方法
查看>>
每天一个Linux命令(6):rmdir命令
查看>>
oracle连接的三个配置文件(转)
查看>>
Vim配置文件(Vimrc)
查看>>
RecyclerView 局部刷新(获取viewHolder 去刷新)
查看>>
PHP表单(get,post)提交方式
查看>>
使用vbs或者bat脚本修改IE浏览器安全级别和选项
查看>>
Silverlight入门
查看>>
Silverlight动态调用WEBSERVICE,WCF方法
查看>>
LeetCode 895. Maximum Frequency Stack
查看>>
模仿segmentfault 评论
查看>>
一个简单的日志函数C++
查看>>
Java 8 中如何优雅的处理集合
查看>>
IOS程序的启动过程
查看>>
连接Linux下 XAMPP集成环境中部署的禅道的数据库MariaDB
查看>>
Java操作Excel和Word
查看>>
Oracle 体系结构之ORACLE物理结构
查看>>
ORA-12538: TNS: no such protocol adapter
查看>>