使用Vuepress和Nginx搭建个人博客
## Vuepress
VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
说白了，VuePress就是基于Vue，用了SSR渲染成本地静态页面，解决PWA在SEO方面的弱势。
而VuePress除了使用Vue外，还继承了Vue各项能力，比如使用stylus写css，也能通过enhanceApp来增强应用，比如在Vuepress中使用Vuex等等。
后续将介绍如果安装Vuepress，如果使用enhanceApp，如果使用stylus，如何在Vuepress中自定义主题，并且最终将vuepress内容发布到Nginx供internet访问。
Vuepress安装和Nginx配置
node和npm安装
代码语言：txt复制sudo apt-get install nodejs
node --version
sudo apt-get install npm
npm --version如果安装成功，node 和 npm都会有相应的版本号打印出来
vuepress安装
代码语言：javascript复制// 初始化输入各种信息
npm init
// ... 各种初始化
npm install vuepress
// 当前目录下执行
sudo npm run docs:dev 然后在本地浏览器访问localhost:8080可以看到调试页面
sudo npm run docs:build 命令可以编译生成所有的静态html文件，这些静态文件可以配置在nginx服务器直接访问
vuepress目录结构
代码语言：javascript复制├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json全文地址：https://pinkcle.com/blog/vuepress.html
转载请注明出处
