DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Markdown blog with Appwrite connection
Timo
Timo

Posted on • Updated on

Markdown blog with Appwrite connection

Overview of My Submission

I wanted to learn NextJS for a longer time now and started the development of a concept of a markdown blog. When the team of appwrite and dev.to came up with this hackathon I decided to participate by adding an appwrite functionality to this blog. My idea was to store the mdx files, which are originally stored in the posts directory, in the appwrite storage database. I am programming for nearly a month now and it's finally done. You just need an appwrite container and my markdown-blog image containerized. Additional information about configuration and setup can be found in the README.md

On the technological hand I am using NextJS with dynamic frontend rendering, next-MDX-remote for mdx parsing and TailwindCss for styling.

Submission Category:

Web2 Wizards

Link to Code

Markdown Blog

Cover image for this repo

GitHub Docker Image CI Release CI

Motivation

I wanted to learn NextJS for a few months. Now the time have come and I created a server for displaying markdown blog posts. So this is my first project using NextJS.

When noticing the new appwrite hackathon, I decided to add a feature to store your markdown post files in a appwrite database.

Installation and usage

Prerequisites

If you are planning to add posts via the Appwrite Database capability, you need to have a Appwrite instance running on your local machine or on a server.

Files should be stored in a bucket in the storage and their ids must match the file name in order to be found!

Configuration

  1. configuration.json in config
    • Example AppwriteDB
    "appwriteDatabase": {
        "url": {
            "host": "localhost"
            "port": 3000
        },
        "projectId": "YOUR_PROJECT_ID",
        "postBucketId": "YOUR_POST_BUCKET_ID",
        "apiKey": "YOUR_API_KEY
…
Enter fullscreen mode Exit fullscreen mode

Additional Resources / Info

License

MIT

Appwrite dashboard

statistics

Storage bucket

bucket

Markdown files

files

file details

Homescreen

homescreen desktop

homescreen mobile


tim012432 image

Timo

Top comments (2)

Collapse
 
eldadfux profile image
Eldad A. Fux

Looks great!

Collapse
 
tim012432 profile image
Timo • Edited on

Thank you very much for your feedback!

🌚 Friends don't let friends browse without dark mode.

Just kidding, it's a personal preference. But you can change your theme, font, etc. in your settings.

The more you know. 🌈