DEV Community

Cover image for Create YOUR next static blog in Vuepress and Vue

Create YOUR next static blog in Vuepress and Vue

Chris Noring on July 15, 2019

Follow me on Twitter, happy to take your suggestions on topics or improvements /Chris The idea with this series is to have a look at how you can ...
Collapse
 
michaelbrooks profile image
Michael Brooks

I actually did this myself last week because I had errors on my WordPress blog caused by a theme update. I tried restoring to a previous version, but nothing fixed it so I got fed up and went with VuePress.

It's really good, my blog is picking up the latest 20 posts, but I still have a lot to do in order to improve it like pagination and some meta-information.

I'm hosting it with Netlify which is incredible and using NetlifyCMS in order to add/edit new articles and it's working so well.

Speed has also been so much better, my WP site was rated in the 20s which is poor, but now my blog is around 66 on mobile and 98 on desktop, still room for improvement though.

Check it out here michaelbrooks.co.uk

Collapse
 
softchris profile image
Chris Noring

That sounds really great Michael. Thanks for sharing your story :)

Collapse
 
hoodlumz profile image
David Elstob

Nice article, Chris. Thanks.

Gone down the Vue route myself, as it seems easiest to learn out of the big JS frameworks, but with Gridsome.

Netlify is cool, too, especially the automatic build and deploy, and the approachable CMS. Plus the easiest forms ever.

However, when I added my own domain name it slowed down by 0.5 seconds due to redirecting. Possibly my fault? So I moved it to my new Hostinger Account where I got 4 years business hosting for £200.

I’ve had to sacrifice the automatic deployment, but instead I’m able to link up to Cloudflare and use my personal recipe for 0.2 seconds TTFB and 100/100 on PageSpeed Insights.

I followed an Andre Madarang tutorial to include Tailwind with Gridsome, but self-hosted Google fonts to save another 0.5 seconds. (First time I’ve actually saved time self-hosting fonts).

Full site loads in under a second... not bad for shared hosting.

davidelstob.com

Will be following this guide next. 👌🏽

Collapse
 
daveit profile image
Dave Porter • Edited

[UPDATE] Apologies, it suddenly started working - maybe the server needed restarting?

I got a bit lost when you got to About.md (after creating About.vue)
There was already an about.md
Do I create a new About.md (capital A) in a different place ?
Adding the content to the existing about.md displays just the word About ?
Do you have a github repository for this ?
TIA, Dave

Collapse
 
softchris profile image
Chris Noring

I've changed in the article. It should only be about.md. Sorry for the confusion. Here's a repo github.com/softchris/vuepress-demo

Collapse
 
daveit profile image
Dave Porter

Cheers Chris, appreciate the quick reply...
Dave

Collapse
 
gypsydave5 profile image
David Wickes

As a personal note, this is seriously the simplest static site generator I've ever used.

HOLD MY BEER 🍺

Collapse
 
softchris profile image
Chris Noring

interesting :)

Collapse
 
carlillo profile image
Carlos Caballero

Thanks Chris!

Collapse
 
softchris profile image
Chris Noring

:)

Collapse
 
bennadel profile image
Ben Nadel

Great write-up, thank you. I first tried Jekyll and was running in to all kinds of problems just getting hello-world to work. Comparatively, VuePress seems like a world easier.

Collapse
 
softchris profile image
Chris Noring

Thanks Ben. Yea VuePress is by far the easiest I've tried and adding custom components is also easy

Collapse
 
gautemeekolsen profile image
Gaute Meek Olsen

Thank you for the article! 🙌 Good writing.

Collapse
 
softchris profile image
Chris Noring

Appreciate that Gaute, thanks :)