DEV Community

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

Posted on

2 2

[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!

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay