html技术文档示例,前端与后端同学都需要掌握的技术文档（或博客）搭建

当你写完一个开源项目或者一篇博客文章，是否想要有个的页面来呈现它？

如图：

那我们开始吧

使用vuepress搭建

安装运行

1.使用Yarn和npm，Node.js版本>=8。

npm install -g vuepress

2.创建项目目录

mkdir demo

cd demo

3.初始化项目

npm init -y

4.在 package.json 里添加:

"scripts": {

"dev": "vuepress dev docs",

"build": "vuepress build docs"

}

5.创建文档目录与文件，结构如下：

demo

├─── docs

│ └── .vuepress // 配置目录

│ │ ├── public // 静态资源

│ │ ├──── img

│ │ ├────── bg.ico // 图标

│ │ ├────── logo.jpg // 首页logo

│ │ └── config.js // vuepress配置文件

│ ├── 随笔 // 随笔

│ │ ├── suibi // 一级目录

│ │ │ ├── test.md // 文章

│ └── README.md // 博客首页

└── package.json

6.运行

npm run dev

7.浏览器访问：http://localhost:8080/，就可以看到效果了。

多放几张图：

8.还可以构建生成html：

npm run build

9.config.js文件例子

module.exports = {

title: 'hello',

description: '技术',

head: [ // 注入到当前页面的 HTML

中的标签

['meta', { 'http-quiv': 'pragma', cotent: 'no-cache'}],

['meta', { 'http-quiv': 'pragma', cotent: 'no-cache,must-revalidate'}],

['meta', { 'http-quiv': 'expires', cotent: '0'}]

],

serviceWorker: true, // 是否开启 PWA

base: '/', // 部署到github相关的配置

markdown: {

lineNumbers: true // 代码块是否显示行号

},

themeConfig: {

lastUpdated: '更新于',

sidebarDepth: 3,

displayAllHeaders: true,

nav: [

{ text: '导航', link: 'http://www.kaka996.com' },

{

text: 'dnnmmp',

items: [

{

text: 'dnnmmp集成环境',

items: [

{ text: '介绍', link: '/dnnmmp_introduce/' },

{ text: '安装', link: '/dnnmmp_install/' },

{ text: '命令行使用', link: '/dnnmmp_command/' },

{ text: '日志', link: '/dnnmmp_log/' },

{ text: '附录', link: '/dnnmmp_appendix/' },

]

}

]

},

{

text: '了解更多',

items: [

{ text: '个人信息', link: '/pages_about/' },

]

}

],

sidebar:{

'/dnnmmp/': [

{

title: '介绍',

collapsable: false,

children: [

'introduce/介绍',

]

},

{

title: '安装',

collapsable: false,

children: [

'install/一键安装',

'install/单独安装PHP',

'install/单独安装Nodejs',

'install/单独安装Mongodb',

'install/单独安装Mysql',

'install/单独安装Nginx',

'install/单独安装Redis',

//'install/单独安装go',

]

},

{

title: '命令行使用',

collapsable: false,

children: [

'command/命令行使用',

]

},

{

title: '日志',

collapsable: false,

children: [

'log/日志',

]

},

{

title: '附录',

collapsable: false,

children: [

'appendix/附录',

]

}

]

},

}

};