DEV Community

Cover image for [Intro] Build a blog with Vuepress, Tailwind and Netlify
Amie Chen
Amie Chen

Posted on

[Intro] Build a blog with Vuepress, Tailwind and Netlify

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.

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!

Top comments (0)