Markdown Blog

A blog with rendered markdown text.

---

Table of Contents

• 📷 Preview
  • 📰 List Articles
  • 📖 Display Articles
• ✅ Features
  • 📥 Markdown Renderer
  • 📨 Blog
• 📐 Setup
  • 📅 1. Database Setup
    • 🔻 Local
    • ☁ MongoDB Atlas
  • 💻 2. Environment Setup
  • 📁 3. Project Setup
• 📃 ToDo

---

📷 Preview

📰 List Articles

📖 Display Articles

✅ Features

📥 Markdown Renderer

• Github Flavoured Markdown (GFM) specification
• Code block syntax highlighting
• GFM heading, footnote

📨 Blog

• Edit Article
• Delete Article
• New Article
• MongoDB Database
• Admin Login
• Login, Sign Up

📐 Setup

📅 1. Database Setup

You can choose between the two, you don't have to install or use both of them. I recommend using MongoDB Atlas if you can because you don't need to install anything and the database is already on the cloud and you can find free hosting services to deploy your website.

🔻 Local

1. MongoDB Installation Download MongoDB Shell using winget with this command

winget install MongoDB.Shell

2. Enter to MongoDB using MongoDB Shell This defaults to mongodb://127.0.0.1:27017

mongosh

3. Use database

use yourdatabase

4. Create a collection (tables)

db.createCollection("yourcollectionname")

Now you can just leave it like that

☁ MongoDB Atlas

1. Create your MongoDB Atlas account https://www.mongodb.com/cloud/atlas/register

2. After selecting your project, cluster, and server location, you can add your IP address in the Network Access tab under SECURITY. If you want, you can check for Allow access from anywhere so that you don't have to do this again.

3. Make sure you are on the right project, you can click on Clusters tab under DATABASE.

4. Here you can see your cluster's name. Then, you can click on connect.

5. Click on Drivers. Select your driver's version and copy your connection string

6. Replace <db_password> with your password that you've created earlier.

Forgot DB Password

Try this step :

• Click on Database Access under SECURITY
• Click EDIT
• Click Edit Password
• Click Auto Regenerate Secure Password
• Click Copy

Problem Connecting to MongoDB Atlas

Error: queryTxt ETIMEOUT cluster0-ghis2.mongodb.net
at QueryReqWrap.onresolve [as oncomplete] (dns.js:202:19) {
errno: 'ETIMEOUT',
  code: 'ETIMEOUT',
  syscall: 'queryTxt',
  hostname: 'cluster0-ghis2.mongodb.net'
}

I was having an issue connecting to MongoDB Atlas because of a DNS record problem. Maybe you can try this steps :

• Change your DNS to using google dns 8.8.8.8 or 8.8.4.4
• Or you can try changing the driver's version (Step 5) to 2.2.12 or later

💻 2. Environment Setup

1. NodeJS Installation Make sure that you have NodeJS installed on your system. The simplest way to install NodeJS on your system is by using winget with this command.

# For Windows Only
winget install OpenJS.NodeJS.LTS

More about NodeJS : https://nodejs.org/

2. Text editor installation Make sure you have your text editor installed. In my case, I'm using Visual Studio Code, which you can install using winget with this command.

# For windows only
winget install Microsoft.VisualStudioCode

More about Visual Studio Code : https://code.visualstudio.com/

📁 3. Project Setup

1. Clone project

git clone https://github.com/get543/Markdown-Blog.git

2. Install missing dependencies

npm install

3. Create a .env file and add this

This is just an example

SESSION_STATS=dev

MONGO_DEV_URI=mongodb://localhost:27017/yourdatabase

MONGO_PROD_URI=mongodb+srv://username:password@youcluster.z2g8s.mongodb.net/yourdatabase?retryWrites=true&w=majority&appName=Yourcluster

MONGO_DEV_URI : URI for connecting to local/remote server (in this case local server) MONGO_PROD_URI : URI for cloud database (in this case MongoDB Atlas) SESSION_STATS :

• prod to use MONGO_PROD_URI
• dev to use MONGO_DEV_URI

4. Run the code

npm start

5. See the result on http://localhost:3000

📃 ToDo

• Try to use TaildwindCSS
• Markdown theme from Markdown-Website project
• Implement some of the things in node-crash-course/using-ejs project
• Website theme from portfolio-tailwindcss
• Fix the css mess in input.css (markdown css) & fix font-family situation
• Create an admin page (edit, add articles) and viewer page (no edit & add button)
• Code highlight and format for code blocks
• Clickable title from the card menu
• Check if MongoDB Atlas still a viable option
• Make that you can view this project on other machine when hosted locally
• Make a login page for admin only to add, delete, edit articles (yk those buttons) => broken login page
• User can add their own categories
• For example, if user create a note from category A, it suppose to show on category A
• About page, show what this website really is