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

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

hyper_yolo profile image Amie Chen ・2 min read

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!

Posted on Feb 12 '19 by:

hyper_yolo profile

Amie Chen


UI Designer & developer 🇹🇼🇺🇸. Made Pretzel and Stitches, previously @Twitch, @Signal. Always building stuff. 🐳


markdown guide