GET 新技能！自己的网站突然就不香了

　　GET 新技能！自己的网站突然就不香了

　　松哥原创的 Spring Boot 视频教程已经杀青，感兴趣的小伙伴戳这里-->

　　松哥自己的网站有两大类：

　　一个就是大家看到的 ，这个网站是基于 GitHub Pages 做的，使用的技术栈是 hexo+icarus，公众号上的所有文章我都会同步到这个网站上去。

　　还有一类就是电子书网站，这个就比较多了：

　　这一类电子书网站技术栈是 Jekyll + jekyll-TeXt-theme，这个松哥在之前的文章中已经介绍过了，具体小伙伴们可以参考：。

　　最近看别人用 vuepress 搭建博客网站，突然感觉自己的网站就不香了。。。

　　那就再撸一个吧！

　　1.vuepress 介绍

　　类似于大家所熟知的 hexo，vuepress 也可以用来生成静态网页。如果大家做过 vue 开发，或者了解过松哥的微人事（），你会发现 vuepress 非常亲切，想要做定制也非常容易，不像 hexo 定制那样陌生。

　　根据 vuepress 官网的介绍，VuePress 由两部分组成：第一部分是一个极简静态网站*敏*感*词*，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

　　每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。所以大家不用担心自己网站无法被搜索引擎爬虫。

　　无论是 hexo 还是 vuepress，一个核心目的就是让我们专注于内容而不是网站建设，从这个角度来说，其实两个都不错，只不过对于有 vue 开发经验的小伙伴，vuepress 更加容易上手和定制。

　　相比于其他的电子书网站，vue 显然更具备优势，例如：

　　Nuxt

　　VuePress 能做的事情，Nuxt 理论上确实能够胜任，但 Nuxt 是为构建应用程序而生的，而 VuePress 则专注在以内容为中心的静态网站上，同时提供了一些为技术文档定制的开箱即用的特性。

　　Docsify / Docute

　　这两个项目同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好。如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！

　　Hexo

　　Hexo 一直驱动着 Vue 的文档 —— 事实上，在把我们的主站从 Hexo 迁移到 VuePress 之前，我们可能还有很长的路要走。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互，同时，Hexo 的 Markdown 渲染的配置也不是最灵活的。

　　GitBook

　　我们的子项目文档一直都在使用 GitBook。GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。

　　2.搭建2.1 项目创建

　　具体的搭建其实很容易。

　　首先确保电脑本地安装了 nodejs（如果本地的 vue 开发环境齐全的话，就不用额外准备了，如果对 vue 不熟悉，不妨看看松哥的）。

　　环境准备好之后，接下来开始创建项目。

　　首先准备一个新的目录：

　　mkdir java-guide<br />cd java-guide<br />

　　接下来对目录进行初始化：

　　npm init<br />

　　初始化的过程中会有一些询问，需要配置就配置一下，不需要配置就直接回车，最终选择 yes 即可。

　　接下来安装 vuepress 依赖：

　　npm install -D vuepress<br />

　　准备好之后，接下来我们就可以创建第一篇文章了。

　　在一开始创建的 java-guide 目录下创建 docs 目录（目录名随意），然后在目录中创建一个 README.md 文件，这个将是我们网站的首页，README.md 中随便写一行作为测试内容。

　　接下来修改 package.json，添加两行脚本：

　　"scripts": {<br />  "test": "echo \"Error: no test specified\" && exit 1",<br />  "docs:dev": "vuepress dev docs",<br />  "docs:build": "vuepress build docs"<br />},<br />

　　docs:dev 是开发环境下运行，docs:build 则是项目编译。

　　所有工作都准备好之后，接下来就可以启动项目了，启动命令如下：

　　npm run docs:dev<br />

　　项目启动成功后，浏览器地址栏输入 :8080/ 就可以看到启动效果。当然现在的效果比较简单，就一个 hello javaboy！