ElianCodes

← Back to blog

Recreating my site in Nuxt and adding a blog

So, next week I’m about to start my journey as a Full-stack software engineer at vBridge. I’m so excited! The internship is part of my school program, a part of the internship is keeping a blog with your findings and thoughts, so I decided to build my own blog with Nuxt instead of a regular WordPress or something else. Nuxt was on my ‘want to learn’ list for a while, so I was very excited to finally try out the framework. I’m a huge fan of Vue so it didn’t seem very hard to learn and implement Nuxt. I was right.

Setting up Nuxt

setting up Nuxt was actually really easy. I just searched for the official Nuxt documentation, turns out to be a very good documented framework (not that I expected something else since the Vue documentation is the best I’ve ever seen).

On the homepage of the Nuxt documentation there’s a very simple guide that takes you trough the whole setup. It’s just a few command since it uses the create nuxt-app command to setup the basic template app. From there I kind of figured the rest out by scrolling through the documentation.

static generation

since I’m hosting my whole website with Github Pages I had to configure Nuxt to generate static files. Also this was really easy. I just had to put target: 'static' in the nuxt.config.js file. It already pre-configured the yarn commands for me. (yes, I’m a yarn user)

front-end configuration

The Nuxt website was now configured for the most part, but since I already had a Vue website, I had to rebuild it in Nuxt (which is basically the same), So I dragged and dropped my files in the pre-made folders in the example app and installed Bootstrap & bootstrap-vue, and everything worked as it should!

Nuxt has a pre-configured router, so I didn’t even had to setup the routing.

Building a blog

As I said in the introduction, I mainly transferred my old Vue site to Nuxt to be able to include a simple blog feature. I just googled: “how to build a blog in Nuxt”. Turns out Nuxt itself had a blog post: Creating blog with Nuxt content. So I basically followed that guide to create my own blog

Nuxt/content

Nuxt content also has it’s own dedicated documentation which is https://content.nuxtjs.org/.

The setup for a blog is very easy. You install the @nuxt/content package and you’re almost ready to go. Just have to add some settings in the nuxt.config.js file, add some .md files with your blog content per post, a new page with your blog feed and a template for your blog. It worked super fast and couldn’t be any easier.

It pre-configures an API where you can fetch your posts by a global variable $content more about that is described here. In a static environment it compiles all files to a db.json file where it fetches the content.

Nuxt/feed

To fulfill al the requirements for school, I also had to add a RSS feed to my blog. I’m a big fan of the Feedly platform (which is a RSS-feed reader). So I googled some more on how to pair Nuxt and RSS. Also this was well documented in exactly how I needed it to be. It’s just in the nuxt content integrations section in the documentation. This was somewhat more complicated, but still very easy since it’s so well documented. You basically install the @nuxtjs/feed module and configure it in the nuxt.config.js file. I only needed the RSS XML version, but even more formats are supported (JSON, for instance).

Something that took some more research was displaying the content correct in the RSS feed. I could just input the whole static html as the content, but that looked really off since it also inserted the header and footer in the content. So I decided to take the raw .md contents as the content, only then to discover that most RSS feeders didn’t display it right, so I then installed the marked NPM package and converted it to HTML, now it looks like I wanted it to.

Conclusion

Nuxt is a very easy to install and use platform which is well documented. If you already know Vue it’s only a little step-up but can improve the speed for a production ready product. The blog stack in nuxt is easy to install and use if you know some markdown and don’t need a CMS, which I don’t since I host on Github pages.

Written by Elian Van Cutsem

← Back to blog
  • Elians Astro Startkit

    Elians Astro Startkit

    I just published the setup I use for my personal projects. You can read more about it in this blogpost.

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.