Part 1: Creating a Blog Page Using Nuxt.js

Let's start our journey by building the frontend of our blog website. I've chosen Nuxt.js for several compelling reasons:

  1. Easy Learning: Nuxt.js is incredibly beginner-friendly. You don't need extensive coding knowledge to get started.
  2. Simplicity: You can begin with a basic understanding of HTML and JavaScript, and Nuxt.js enables you to effortlessly create impressive web applications.
  3. Nuxt Content: This is a recent Nuxt plugin that simplifies content management by using markdown files stored via GIT.

With these advantages in mind, Nuxt.js is the perfect choice for building the foundation of our blog page.

You can find the source code related to this article on GitHub in the 1-blog-structure branch.

Creating the Nuxt.js App

To start building our blog page, we'll create the frontend app using Nuxt.js. Here's a straightforward process:

  1. Open your terminal and execute these commands:
npx create-nuxt-app blog
cd blog/
npm run dev

With these commands, we initialize our Nuxt.js project named "blog" and launch a development server, preparing us to start working on our blog page.

Adding Pages and Dynamic Routing

Let's begin by organizing our website's structure in a straightforward way:

  1. Pages Folder: Start by creating an index.vue file within the pages folder. This file will serve as the root page of our blog. We will later add all of our other pages within this directory.
  2. Updating app.vue: Now that pages have been added to our project, we need to update the app.vue file to "enable" the pages feature by including the <NuxtPage /> component. This component is responsible for rendering the appropriate page based on the current application route.

Here's the code snippet to add to your app.vue:

<template>
  <div>
    <NuxtPage />
  </div>
</template>

Let's now explore how to effectively manage blog posts:

  1. Dynamic Routing: To handle your blog posts, just create a [slug].vue file in the pages/blog folder. When you go to a URL like /blog/about-me, the "about-me" slug will automatically be provided to the component through route parameters.
  2. Accessing Route Information: In your [slug].vue template, you can access the route object, which contains our parameters. We'll use this later to query our content. The "slug" approach is not only great for SEO but also improves readability.

Here's a basic template for your [slug].vue page:

<template>
  <div>
    <h1>Article - {{ $route.params.slug }}</h1>
  </div>
</template>

For more details on organizing your project, refer to the Nuxt.js documentation.

Now, we have fully dynamic routing without writing any additional code.

The Importance of Layouts

Layouts play a crucial role in simplifying how our application looks. They allow us to extract elements like headers and footers from individual pages, making them available across the entire application.

To start, create a default layout named blog/layouts/default.vue. This layout will be automatically applied to every page. Our layout should include a slot component where the page content will be rendered:

<template>
  <div>
    <Header />
    <slot />
    <Footer />
  </div>
</template>

Next, update your app.vue file by wrapping the <NuxtPage /> component with <NuxtLayout>, as shown below:

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

For more details on structuring layouts, you can refer to the Nuxt.js documentation.

While it's possible to create multiple layouts and specify which one to use for specific pages, let's keep it simple for now.

Styling Your Blog with Tailwind CSS

Last but not least is the styling, which plays a crucial role in creating a strong first impression of your site. If, like me, you're not a designer, creating stylish designs can be challenging. However, from a technical standpoint, I recommend using Tailwind CSS for styling as it offers an easy way to customize your website's appearance.

You can follow a step-by-step guide here for a quick and simple installation process.

To make your website look even better, don't forget to add icons and Headless UI components. Just run this command:

npm install @headlessui/vue @heroicons/vue

With these additions, your blog website will be visually appealing without the need for complex design skills. If you want to learn more about Tailwind CSS, there are plenty of online resources available.

What's Next

In my next article, I'll show you how to use GitHub Pages to make your app accessible to the public.