DEV Community

Cover image for 🤖🧠Making Tech Blog 4 (Vercel)
Web Developer Hyper
Web Developer Hyper

Posted on

1

🤖🧠Making Tech Blog 4 (Vercel)

Intro

Hello!
I'm trying to make a Tech Blog for study.
Used AWS and React.
First, I wrote a post showing the outline of the Tech Blog.
https://dev.to/webdeveloperhyper/making-tech-blog-with-ai-character-react-aws-2986
Next, I worte a post about making frontend using MUI (Material UI).
https://dev.to/webdeveloperhyper/making-tech-blog-2mui-material-ui-14g3
Finally, I will wrote about making the infrastructure using AWS.
https://dev.to/webdeveloperhyper/making-tech-blog-3-aws-5fej

Cost of AWS

Culculated the cost when using AWS as an infrastructure of Nextjs SPA deployment.
Web ACL:5$/Month + 3 Rules:3$/Month + Request:0.6$/Month = about 8.6$/Month
https://aws.amazon.com/waf/pricing/
I didn't count the cost of Amazon S3 and Amazon CloudFront, because there will be almost no access to my Tech Blog except me.😂
So, is there a way to host my website for free?

Host for free

I asked my best friend ChatGPT how to host my website for free.
He advised me Vercel, Netlify, GitHub Pages, and others.
My best friend ChatGPT always tell me the best of best.😃

I chose Vercel because my front-end is made of Nextjs.
And, Vercel is the maker of Nextjs.
Nextjs is awesome, so Vercel must be awesome too.😁

Deploy on Vercel

Vercel is a developer cloud to build and deploy web applications.
I deployed my Nextjs front-end on Vercel.
It was easy as pie.👌
Just chose which GitHub repository to use.
And, it is done.
https://vercel.com/docs/getting-started-with-vercel
Let's take a look at other features of Vercel.

① Vercel Edge Network

Velcel Edge Network is like a CloudFront of AWS.
It enables high performance dues to delivering from platforms around the world.
https://vercel.com/docs/edge-network/overview

In addition, it delivers optimized images that are cached on Vercel Edge Network.
https://vercel.com/docs/image-optimization

② Observability

By using Versel Web Analytics, you can observe the things below.
① Visitors count of each pages
② Visitors referrers
③ Visitors countries
④ Visitors devices
⑤ Visitors OSs
The first 2500 events are free.
https://vercel.com/docs/analytics
Also, web analytics is smart enough not to count traffic from bots.

We can check build log and runtime logs and activity logs.
And, able to export logs too.
https://vercel.com/docs/observability/logs

③ Security

Vercel Firewall helps protect the website from DDoS attacks and unauthorized access.
It is applyed automaticaly.
AWS WAF costs money but Vercel Firewall is free, hehehe.🤑
https://vercel.com/docs/security/vercel-firewall

Looking further into of DDos mitigation
① Moniter traffic: Continuously analyzes traffic to detect signs of DDoS attacks.
② Block traffic: Filters out malicious traffic while allowing legitimate requests.
③ Scale resources: During a DDoS attack, dynamically scales resources to absorb the increased traffic.
And, worth mentioning, Vercel will not bill us when we get DDos attacks. Amazing!😆
https://vercel.com/docs/security/ddos-mitigation

Furthermore, we can use Attack Chalenge Mode to control under DDos attacks.
https://vercel.com/docs/security/attack-challenge-mode

Besides, deployment on vercel is served over an HTTPS.
So, the data is enclyped and safe.
https://vercel.com/docs/security/encryption

Outro

The contents above is summarised in the figure below:
Image description
Using Vercel makes it easy and inexpensive to create an infrastructure.
Thank you for reading.
See you!

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (4)

Collapse
 
madds profile image
Eric Maddox

Great topic! Vercel is awesome and super easy to use.

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you!😊
Can’t wait for your post too!

Collapse
 
mjhl7148 profile image
spook

that is good

Collapse
 
webdeveloperhyper profile image
Web Developer Hyper

Thank you!
Looking forward for your post too!

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay