使用Vuepress和Nginx搭建个人博客

使用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安装

sudo apt-get install nodejs
node --version
sudo apt-get install npm
npm --version

如果安装成功，node 和 npm都会有相应的版本号打印出来

vuepress安装

// 初始化输入各种信息
npm init
// ... 各种初始化
npm install vuepress
// 当前目录下执行
sudo npm run docs:dev 

然后在本地浏览器访问localhost:8080可以看到调试页面

sudo npm run docs:build 命令可以编译生成所有的静态html文件，这些静态文件可以配置在nginx服务器直接访问

vuepress目录结构

├── 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

转载请注明出处