在centos7 上部署 vuepress

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 project
cd project
mkdir docs

四、初始化前

npm init -y
vim package.json

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

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

创建.vuepress目录。

mkdir .vuepress
cd .vuepress

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

mkdir public
vim 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: true
heroImage: /hero.png
actionText: 点击阅读
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相应目录下即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

73 条日常 shell 命令汇总,总有一条你需要!

1.检查远程端口是否对bash开放: echo >/dev/tcp/8.8.8.8/53 && echo "open" 2.让进程转入后台: Ctrl + ...

2938
来自专栏云飞学编程

新手自制一个单独读写txt文本的python模块

作为一个新学习python的小白,经常遇到读取文本和写入文本的with open,出现各种编码错误或者其他错误,很烦,这里给大家介绍一个比较实用的方法。

1572
来自专栏逸鹏说道

使用fiddler模拟http请求

以前看见过,没发,现在又看见了,向大家推荐一下: 概述 与httpwath相比,fiddler能模拟http请求、能断点调试、http分析统计吸引了我,...

4565
来自专栏刘君君

XXL-JOB使用笔记

6735
来自专栏Angular&服务

Angular CLI 常用终端操作命令

初始化创建项目时,自动添加了 <code> @angular/router </code> ,自动添加到package.json 文件中

1544
来自专栏用户2442861的专栏

如何在ubuntu下安装vmware-tools?以及屏幕显示太小

首先记的修改 CD ISO  为linux.iso  否则的话会弹不出那个vmwaretools  那个相关的。

2272
来自专栏

live555工程建立与调试

Live555是一款开源的RTSP服务器,下载地址http://www.live555.com/liveMedia/public/ 下载下来的代码只有源文件,没...

3505
来自专栏性能与架构

Linux 非交互式SSH

ssh是linux管理时常用的一个服务,ssh有个特点,属于交互式操作,就是当你执行ssh时,他会要求你手动输入密码 这就给shell脚本带来了麻烦,如果想在...

4567
来自专栏码农笔录

cordova打包vue2(webpack)android、ios app

4072
来自专栏王磊的博客

CentOS安装运行NodeJS框架Express

 安装依赖包 yum -y install gcc make gcc-c++ openssl-devel wget 下载/解压NodeJs wget http:...

4159

扫码关注云+社区

领取腾讯云代金券