Recently I launched a newer version of my personal website, which uses Vuepress behind the scene. Being a new Vue.js adopter, I thought Vuepress --- a static site generator built on vue.js --- was a natural choice for websites: it's intuitive, performant and flexible with markdown.

The project is still young(v.1x-alpha as of writing) so there's not a lot of resources beyond the default setup yet. I hope this 3 part walkthrough can help those who are thinking to use Vuepress for their personal websites or blogs.

What we are going to make

We are going to make a blog with a custom Vuepress theme. You will also learn how to apply some basic Vue.js-fu, incorporate functional css library like tailwind.css and eventually, deploy it to netlify.

• Part 1: Setup a working Vuepress blog with Tailwind.css
• Part 2: Write and apply a custom Vuepress theme.
• Part 3: Final wrap-up and deploy to netlify.

Vuepress the static site generator

Vuepress is designed to generate documentations, but also works great for personal websites and blogs. It comes with a default "hidden" responsive theme and recommends a specific file structure. However, you can certainly roll your own.

v0 v.s v1

There is a big difference between vuepress v.0 and v.1-alpha. The few main updates that I love are:

1. Markdown slot mechnisim.
2. Access to global computed properties.
3. Usage of plugins.

In this whole series we are going to use the latest v.1x-alpha. If you are interested in knowing what's been added to v.1, read more about the changelog here.

When you are ready, let's start with Part 1: Setup a working Vuepress blog with Tailwind.css →

This is a cross-post from my website. Check out the original and more there!