Hello World
This is an easy way to write content. I can use bold text, lists, and code.
- Item 1
- Item 2 You ask a very practical question. Here is the breakdown of how to handle images for a static site, whether it will be slow, and the best way to do it.
Short Answer Will it be slow? No, because Cloudflare is a "Content Delivery Network" (CDN). It copies your images to servers all over the world so they load fast for everyone. However, you must resize your images before adding them (don't upload 5MB photos). +1
Should you use Imgur? No. Imgur’s Terms of Service discourages using them as a image host for websites, and they often block images from showing up on other sites (hotlinking).
Best "Easy" Solution: Use the public folder in your project for now. It is free, easiest to manage, and version-controlled.
Option 1: The "Local" Way (Recommended for Beginners) This is the standard way. You save images inside your project folder.
Why it's good:
Zero Setup: No external accounts needed.
Git Backup: Your images are saved in your GitHub history.
Cloudflare Speed: Cloudflare automatically caches these images globally.
The Limit: GitHub repositories have a "soft limit" of 1GB. Unless you are posting high-res photography every day, you will not hit this for years.
How to do it: Create a folder: inside your public directory named images.
Path: my-blog/public/images/
Add your image: Paste your image file there (e.g., dog.jpg).
Link it in your Markdown:
In your .mdx file, use the standard image syntax. You do not need to include "public" in the path. Next.js knows.
Markdown
My Dog
Here is a picture of my dog:
⚠️ Important Performance Tip: Since we turned off Next.js Image Optimization (unoptimized: true) to make the site free, you should compress your images before adding them.
Do this: Go to TinyPNG, drop your image there, download the smaller version, and put that in your folder. This keeps your site blazing fast.
Option 2: The "Pro" Way (Cloudinary) If you plan to have hundreds of posts with many images, or you don't want to manually compress images, use Cloudinary. It has a generous free tier.
Why it's good:
Auto-Optimization: It automatically makes images smaller and faster without you doing anything.
Keeps Repo Small: Your GitHub download size stays small.
How to do it:
Create a free account on Cloudinary.
Upload your image to their dashboard.
Copy the URL they give you.
Paste it into your Markdown:
Markdown
Summary: Which should you choose?
Feature Option 1: Public Folder (Start Here) Option 2: Cloudinary Option 3: Imgur
Cost Free Free (Generous Tier) Free
Ease of Use Easiest Medium Easy
Reliability High (Your own repo) High Low (Images may break)
Performance High (If you compress) Highest (Auto-compress) Variable
Setup Time 0 minutes 5 minutes 0 minutes
Export to Sheets
My Recommendation: Stick to Option 1 (public folder) for your first 50-100 posts. Just remember to run your images through a compressor like TinyPNG first. It keeps everything in one place and is much simpler to manage.
Would you like me to show you how to add a "Cover Image" to your blog posts so they look good on the homepage list?