松哥自己的网站有两大类：一类是大家看到的www.javaboy.org，这个网站是基于GitHubPages的，使用的技术栈是hexo+icarus，我会同步所有的公众号上的文章到本网站。另一类是电子书网站，这个比较多：http://maven.javaboy.orghttp://spring.javaboy.orghttp://springmvc.javaboy.orghttp://mybatis.javaboy.orghttp://springboot.javaboy.orghttp://vhr.javaboy.org的技术栈是Jekyll+jekyll-TeXt-theme，上一篇已经介绍过了。具体的朋友可以参考：不花一分钱，把零散的知识整理成系统，做成在线电子书。最近看到别人用vuepress搭建博客网站，突然觉得我的网站不好。..然后再拿一个！1、vuepress的引入和大家熟知的hexo类似，vuepress也可以用来生成静态网页。如果你做过vue开发，或者了解过松哥的微人（https://github.com/lenve/vhr），你会发现vuepress非常友好，定制起来非常容易，不像hexo定制。.根据vuepress官网的介绍，VuePress由两部分组成：第一部分是一个极简的静态网站生成器，包含Vue驱动的主题系统和插件API，另一部分是为编写优化的默认主题技术文档，其初衷是为了支持Vue及其子项目的文档需求。VuePress生成的每个页面都带有预渲染的HTML，因此它具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面加载完毕，Vue就会接管静态内容，将其转化为一个完整的单页应用程序（SPA），其他页面只会在用户浏览到它时才按需加载。所以您不必担心您的网站不被搜索引擎抓取。不管是hexo还是vuepress，一个核心目的就是让我们专注于内容而不是网站建设。从这个角度来说，两者都不错，但是对于有vue开发经验的小伙伴来说，vuepress更易于使用和定制。与其他电子书网站相比，vue显然有更多的优势，例如：NuxtVuePress能做什么，理论上Nuxt确实有能力，但Nuxt是为构建应用而生的，而VuePress则专注于以内容为中心，它也提供了一些出路为技术文档定制的现成功能。Docsify/Docute这两个项目也是基于Vue的，但是完全是运行时驱动的，所以对SEO不够友好。如果你不关心SEO，不想安装很多依赖，它们仍然是一个非常好的选择！HexoHexo一直在驱动Vue的文档——事实上，在将我们的主站点从Hexo迁移到VuePress之前，我们可能还有很长的路要走。Hexo最大的问题是它的主题系统过于静态，过于依赖纯字符串，我们非常希望能够利用好Vue来处理我们的布局和交互。同时，Hexo的Markdown渲染的配置也不是最灵活的。GitBook我们一直在使用GitBook作为我们的子项目文档。GitBook最大的问题是当文件很多时，每次编辑后的重新加载时间长得无法忍受。它默认的主题导航结构也比较严格，主题系统不是Vue驱动的。GitBook背后的团队现在也更专注于使其成为商业产品，而不是开源工具。2.构建2.1项目创建具体的构建其实很容易。首先确保电脑本地安装了nodejs（如果本地vue开发环境齐全，则无需额外准备，如果对vue不熟悉，不妨看看松哥的微人视频教程).环境准备好之后，接下来就是创建项目了。首先准备一个新的目录：mkdirjava-guidecdjava-guide接下来初始化目录：npminit在初始化的过程中会有一些查询，需要配置就配置，不需要配置就回车，最后选择是即可。接下来，安装vuepress依赖：npminstall-Dvuepress就准备好了，那么我们就可以创建第一篇文章了。在一开始创建的java-guide目录下创建一个docs目录（目录名可选），然后在该目录下创建一个README.md文件。这将是我们网站的主页。在README.md中随便写一行作为测试内容。接下来，修改package.json并添加两行脚本："docs:build":"vuepressbuilddocs"}，docs:dev是在开发环境中运行，docs:build是项目编译。一切工作准备就绪后，就可以开始项目了。启动命令如下：npmrundocs:dev项目启动成功后，在浏览器地址栏输入http://localhost:8080/即可看到启动效果。当然现在的效果比较简单，就是一个hellojavaboy！2.2首页配置当前页面过于简单，我们可以配置项目首页，打开docs/README.md文件，添加如下内容：---home:trueheroImage:https://open.weixin.qq。com/qr/code?username=a_javaboyhero文字：江南一点雨tagline：Java实践手册actionText：开始学习→actionLink：/springboot/features：-title：纯原创详情：不是互联网的搬运工，松哥纯手敲，纯原创教程。-title:系列详解：系列教程合集，告别碎片化学习，一步学Java！-标题：有案例详情：文章有配套案例，部分系列有配套视频。扫描二维码关注微信公众号[江南一点语]，及时获取文档更新通知！footer：关注微信公众号【江南一点鱼】，回复888，获取SpringBoot+Vue项目实战资料！---修改完成后，不需要重启工程。和vue一样，会自动更新，浏览器自动刷新。此时首页显示效果如下：2.3导航页面配置导航页面的配置需要新建docs/.vuepress/config.js配置文件，文件内容如下：module.exports={title:'江南小雨',head:[['link',{rel:'icon',href:'https://open.weixin.qq.com/qr/code?username=a_javaboy'}]],themeConfig:{logo:'https://open.weixin.qq.com/qr/code?username=a_javaboy',nav:[{text:'首页',link:'/'},{text:'国际站',link:'http://www.javaboy.org'},{text:'国内站',link:'http://www.itboyhub.com'}],侧边栏:'自动'}};头部配置浏览器角标，logo为浏览器导航栏的logo。配置完成后显示效果如下：可以看到，上面多了一个导航栏。在themeConfig.nav中配置导航栏，link是导航栏链接的地址，可以用item替换link，items是一个数组，item会以下拉框的形式显示，对于例子：nav:[{text:'主页',link:'/'},{text:'国际站',link:'http://www.javaboy.org'},{text:'国内站',link:'http://www.itboyhub.com'},{text:'Others',items:[{text:'InternationalStation',link:'http://www.javaboy.org'},{text:'国内站',link:'http://www.itboyhub.com'}]}],2.4侧边栏配置侧边栏的配置其实就是左侧菜单的配置。使用vuepress，我们在写文章的时候可能会对文件进行分类，比如：java文章放在java目录下，python文章放在python目录下。我们随机将几篇文章放入目录中。目录结构如下：java-guide├─package-lock.json├─package.json├─docs|├─自述文件.md|├─蟒蛇||├─自述文件.md||├─python-1.md||└python-2.md|├─爪哇||├─自述文件.md||├─java-1.md||└java-2.md|├─.vuepress||└config.jspython和java目录，对应文章的访问路径为：http://localhost:8080/java/java-1http://localhost:8080/java/java-2http://localhost:8080/python/python-1http://localhost:8080/python/python-2注意需要在每篇文章的顶部标明文章标题（当然还有其他方式配置文章标题，松哥推荐这个方法）。以java-1.md为例，文章开头内容如下：---title:Java01---同时在java和python目录下都有一个README.md文件.这个文件的访问路径是http://localhost:8080/java/或者：http://localhost:8080/python/这样大家先搞清楚文件目录的访问路径。接下来，我们在docs/.vuepress/config.js中配置侧边栏导航，如下所示：sidebar:[{title:'Java',path:'/java/',collapsable:false,sidebarDepth:2,children:['/java/java-1','/java/java-2']},{title:'Python',path:'/python/',collapsable:false,sidebarDepth:2,children:['/python/python-1','/python/python-2']},]配置完成后效果如下：当然具体的配置方法还有很多。松哥会根据自己的使用方法介绍一种方法，其他配置方式小伙伴可以参考官网。3、部署3.1通用和hexo一样，vuepress最终也是编译成静态文件丢给服务器，所以如果你是自己的服务器，就很简单了。首先执行以下命令编译：npmrundocs:build编译成功后会生成如下目录结构：java-guide├─docs|├─.vuepress||├─距离|||├─404.html|||├─index.html|||├─蟒蛇||||├─索引。网页||||├─python-1.html||||└python-2.html|||├─爪哇||||├─index.html||||├─java-1.html||||└java-2.html|||├─资产||||├─js|||||├─10.fd63f6ac.js|||||├─11.919333a2.js|||||├─2.5618c3b9.js|||||├─3.01385c65.js|||||├─4.7d5f245c.js|||||├─5.5e19538d.js|||||├─7.6182cc1a.js|||||├─8.5aa56f7e.js|||||├─9.c492a2c2.js|||||└app.803870cb.js||||├─img|||||└search.83621669.svg||||├─CSS|||||└0.styles.3f949b7f.cssdist目录下的文件就是我们要扔进服务的3.2GitHubPages当然你也可以使用GitHubPages来部署，省事！GitHubPages我就不多介绍了。不知道的朋友可以参考这两篇文章：一分钱不花，宋哥教你如何一分钱不花钱开个人博客，把零散的知识整理成系统，做成网络电子书准备好GitHub仓库后，在项目根目录下创建一个脚本文件deploy.sh，内容如下：#!/usr/bin/envsh#确保脚本抛出错误set-e#生成静态文件npmrundocs:build#进入生成的文件夹cddocs/.vuepress/dist#如果发布到自定义域名echo'docs.javaboy.org'>CNAMEgitinitgitadd-Agitcommit-m'deploy'#如果发布到https://
