What is Vuepress
Vuepress is according to its offical website, a "Vue-powered Static Site Generator". It lets us develop a static site fast and productively using VueJS and works out of the box with deployment services like Github Pages or Netlify.
Why I moved to Vuepress
Having experimented with multiple static site generators and not being very satisfied with all of them for a simple personal blog / website use case, Vuepress hits the sweet spot. The documentation for the most part was sufficient. Vuepress is geared towards building documentation sites rather than blogs by default so I had to do some custom work to make it work more like one. However, actually I was pleasantly surprised to find the whole process pretty simple and straightforward. Why I enjoy Vuepress:
Full frontend development environment - In a backend based solution, you are normally limited to some sort of asset pipeline that forces you to use a specific set of frontend tools, SCSS or LESS for example. With everything in a webpack environment, you can switch out the Vuepress Stylus default for something else that you fancy, Postcss in my case. Even more impressive is that out of the box, Vuepress supports Stylus, PostCSS, SCSS, SASS and LESS.
Single File Component goodness - Something that I have fallen in love after two years of working with VueJS. You can have your styles in the same file as my component HTML instead of switching through different files which in a small project like mine can be really convenient. Naturally, like in every other Vue project, you can write your markup in HTML or something cooler like Pug instead of fighting with the forces of nature using JSX. Well, you could also do it with render functions and JSX if you are a masochist.
Markdown and Vue Components - As a static site generator, Vuepress naturally went with the markdown file approach for managing content. What is interesting is that you can also add Vue components in your markdown file.
However as I wrote earlier, Vuepress is tailored towards documentation sites and I had to do some extra work to make it suitable as a simple blog / website.
Setting Up Vuepress as a blog
Setup should be a fairly straightforward process. The instructions in the official documentation lay it out clearly, better than I can do it. Once you have Vuepress up and running, we will want to setup a basic folder structure for our posts. In this case, we want to create a blog folder outside of .vuepress.
.
|-- website
| |--.vuepressHigh level overview of making Vuepress suitable for blog
- pagination
- blog and category index pages