skip to content
Maathuran's Blog
Blog Creation v1

Blog Creation v1

/ 2 min read

blog creation, github, javascript, markdown, nuxtjs, xml

Introduction

First, I wanted a simple self-hosted blog that didn’t rely on existing technology, such as blogger/WordPress, and I tried to teach myself a new JS Framework. I settled with Nuxt. js123.

What it needed to have

  • Easy to use
  • Static Rendering
  • Has an API so projects can be shown on the homepage

Setup

First, we need to initialize the main project folder with one of the following commands (choose based on your preference).

yarn create nuxt-blog <project-name>
 
npx create-nuxt-blog <project-name>
 
npm init nuxt-blog <project-name>
 Replace `` with the folder where you would like to store your blog. After installing all the decencies, you can run a dev environment with the following command below. 
cd <project-name>
yarn dev
 
cd <project-name>
npm run dev

You should see the following in the console

yarn run v1.22.10
$ nuxt
ℹ Merging Tailwind config from ~/tailwind.config.js
ℹ Parsed 4 files in 0.7 seconds

   ╭───────────────────────────────────────────────────────╮
   │                                                       │
   │   Nuxt @ v2.15.8                                      │
   │                                                       │
   │   ▸ Environment: development                          │
   │   ▸ Rendering:   server-side                          │
   │   ▸ Target:      static                               │
   │                                                       │
   │   Listening: http://localhost:3000/                   │
   │                                                       │
   │   Tailwind Viewer: http://localhost:3000/_tailwind/   │
   │                                                       │
   ╰───────────────────────────────────────────────────────╯

ℹ Preparing project for development
ℹ Initial build may take a while
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 17.80s

✔ Server
  Compiled successfully in 17.08s

ℹ Waiting for file changes
ℹ Memory usage: 620 MB (RSS: 743 MB)
ℹ Listening on: http://localhost:3000/

You should be able to visit this URL http://localhost:3000/ to access your blog.

Adding Content

It’s easy to add content; the blog uses separate files for new entries, and you must know markdown formatting to stylize the post. A website in the resources to help you with markdown4 formatting if you get stuck or need help. The file structure will be like the following

blog/
├── content/
│   ├── post1.md
│   ├── post2.md
│   ├── post3.md
│   └── post4.md

Footnotes

  1. NextJS Blog on what Nuxt.js is ↩

  2. Netlify Example on how to make a Nuxt.js Blog runnign on Netlify ↩

  3. Nuxtjs Example Starte Blog template on Github ↩

  4. Markdown Guide, a simple way on how markdown works and its formatting structure ↩