Nerd's life logo

Nerd's Life

Home > Article > Nerd Journal - Introduction

Banner landscape
Nerdslife welcome banner

Nerd Journal - Introduction

Welcome to the Nerd's Life Blog

Nerd's Life uses the Open-Source project Nerd's Journal. A JamStack web app that lets you create websites in minutes, thanks to Nuxt Content. I bet you can deploy everything in less than 10 minutes, including time reading this article ⏱

And because it's a static project, it doesn't require any database: this web app fetches your content during the build from simple .md (Markdown) files. This makes the web performances blazing fast, deployment effortless, and you don't need any expensive hosting at all – actually, you can even host your website for free on Netlify.

You can finally focus on what you are good at, writing remarkable articles.

Fork, change the settings and deploy

Enough talk. Let's get started with the fun part: setting up everything! Follow this guideline, and you will be ready in no time.

The first step is to fork the repo, change the settings, and finally create your content. Once done, you'll need to change some settings, especially for the metadata and the assets. First, navigate to the /nuxt.config.js file at the root folder in your projects. Here, you can change the head object with your metadata.

Next, you'll need to change your base URL in the same file. This is the URL of your website. If you want to use the Netlify subdomains, your URL should look something like this: https://some-weird-words.netlify.app

Do NOT add a '/' at the end.

nuxt.config.js
env: {
    BASE_URL: 'https://yourwebsite.com',
  }

And then, you'll have to change the images assets :

  • Change the favicon located at /static/favicon.ico
  • Change the logo located at /static/images/logo.png
  • Change the Open Graph image banner located at /static/images/ogbanner/default.jpg

Please do not change the name of the files; simply update them with your assets.

Once you have updated your settings and assets, it's time to deploy your website on Netlify! Don't worry; it's the easy part.

  • Create an account at https://www.netlify.com/
  • On your dashboard, click on 'Add new site' -> 'Import an existing project.'
  • Connect to Git provider -> Click on the GitHub logo
  • Search your newly forked project
  • In the 'Basic build settings', change the command to 'yarn generate'
  • Click on 'Deploy' and ... voilà!

Your website should deploy successfully after some time. Once built and deployed, you should see your website live.

Create your first article

Now that everything is set up and deployed, it's time to create your first article. To create an article, you'll need to create a .md file into the /content/articles folder. You'll also find a model.md file in the same directory as an example.

On the 'header' of the model.md file, you'll find something like this :

/content/articles/model.md
---
title: Welcome to Nerd's Life - Introduction.
slug: introduction-to-blog
banner:
  {
    src: /images/introduction/banner.jpg,
    description: Nerdslife welcome banner,
    alt: Banner landscape,
  }
ogBanner: /images/introduction-to-blog/ogbanner.jpg
---

This is what we call Front Matter. It's the settings for your article, and they are pretty straightforward :

  • title represents the title of your article
  • slug is the path of your article (In this example, it's going to be: https://yourwebsite.com/article/introduction-to-blog)
  • banner represent the first image on your article (optional)
    • src represents the path to the image. This is up to you but remember that you need to put your image files into the /static folder
    • description represent a caption after the image (optional)
    • alt represent the alt description for accessibility
  • ogBanner represent the Open Graph banner (optional)

Once done with your Front Matter, you can write your article using Markdown syntax. Then, when you feel happy with your writing, you can git push your changes: Netlify will automatically trigger a new build/deploy, and your website will be live in a couple of minutes.

Create your first page

You can also create pages. The creation is 90% similar to the article creation, but you'll need to add the page to the navbar with a trick.

To create a new page, you need to create a .md file into the /content/pages/ folder. You can use the about.md file as a model. Once created, you'll need to add the page to the navbar using the /content/settings.md file :

/content/settings.md
---
title: Nerd's Life
menu: [{ name: Home, path: '/' }, { name: About, path: '/about' }]
searchPlaceholder: Search something nerdy
---

On the Front Matter, in the menu array, add a new object with the following keys : name is the name of the item on the navbar path is the name of your page, and it should be the SAME as your page name

That's all, folks! Congratulation on your newly created blog/website.

Copyright © 2022 - The code of this website is Open-Source.