![Cover image for [Intro] Build a blog with Vuepress, Tailwind and Netlify](https://res.cloudinary.com/practicaldev/image/fetch/s--hZQrVa3j--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/d63hpoll0toxrq5kqfke.png)
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:
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!
Top comments (0)