Blog Creation
Introduction
To start things off, I wanted a simple self hosted blog that doesn't rely on existing technology such as blogger/Wordpress and wanted to teach myself a new JS Framework. I settled with Nuxt.js
What it needed to have
- Easy to use
- Static Rendering
- Has an api so projects can be shown on homepage
Setup
To start things off we need to initialize the main project folder with the following command
yarn create nuxt-blog <project-name>
npx create-nuxt-blog <project-name>
npm init nuxt-blog <project-name>
Replace <project-name>, with the folder that you would like to store your blog in. After all of the decencies are installed 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
Its pretty easy to add content, the blog uses separate files for new entries and you will need to know markdown formatting to stylize the post. There is a website in the resources to help you with markdown formatting if you get stuck or need some help. The file structure will be like the following
blog/
├── content/
│ ├── post1.md
│ ├── post2.md
│ ├── post3.md
│ └── post4.md