Sign in to confirm you’re not a bot
This helps protect our community. Learn more

Build a Blog on Linode Using Tailwind CSS | Bootstrap Alternative

Akamai Developer
1.04M subscribers
<__slot-el>
<__slot-el>
9.1K views 1 year ago #Tailwindcss #Linode #webdevelopment
In this video, ‪@CodeWithHarry‬ will show you how to program and deploy a blog using Tailwind CSS. By the end of this video you'll learn how to host your own blog on a Linode instance. Chapters: 0:00 Introduction 0:24 Create a new Next project 0:45 Find a Blog Template 1:40 Import Blog Template 2:50 Create Next App 3:50 Customize Index 4:45 Add Fonts to Global Styles 5:20 Create Navbar Component 7:50 Install Alpine.js and Font Awesome 11:50 Create footer.js 13:00 Continue Customizing Index 19:00 Spin-up MongoDB Instance at Linode 21:10 Login to MongoDB Cluster 22:10 Update Firewall 23:50 Create Database 25:20 Setup Next.js with MongoDB 28:00 Install MongoDB Locally 31:10 Create a new Document 31:50 Resolve Connectivity Issue 32:50 Update Image Sizing 35:00 Finish Customizing Index 37:20 Troubleshoot /post page 38:16 Add Blog Name to Navbar 40:00 How to Modify Posts 42:00 Create Sidebar Component 44:20 Check Responsiveness 44:40 Resolve Respon …...more
...more

Introduction

0:00

Create a new Next project

0:24

Find a Blog Template

0:45

Import Blog Template

1:40

Create Next App

2:50

Customize Index

3:50

Add Fonts to Global Styles

4:45

Create Navbar Component

5:20

Install Alpine.js and Font Awesome

7:50

Create footer.js

11:50

Continue Customizing Index

13:00

Spin-up MongoDB Instance at Linode

19:00

Login to MongoDB Cluster

21:10

Update Firewall

22:10

Create Database

23:50

Setup Next.js with MongoDB

25:20

Install MongoDB Locally

28:00

Create a new Document

31:10

Resolve Connectivity Issue

31:50

Update Image Sizing

32:50

Finish Customizing Index

35:00

Troubleshoot /post page

37:20

Add Blog Name to Navbar

38:16

How to Modify Posts

40:00

Create Sidebar Component

42:00

Check Responsiveness

44:20

Resolve Responsiveness Issues

44:40

Import Posts into MongoDB Compass

49:05

Fetch Blog Posts from Database

51:45

Create getBlog.js and getBlogs.js

52:02

Update Blog Tags

55:00

Configure Create Markup Function

56:40

Configure Meta Description

58:20

Fetch Content for Slug

59:10

Update Select Posts

1:12:00

Conclusion

1:13:35
Build a Blog on Linode Using Tailwind CSS | Bootstrap Alternative
391Likes
9,157Views
2023Apr 24
In this video, ‪@CodeWithHarry‬ will show you how to program and deploy a blog using Tailwind CSS. By the end of this video you'll learn how to host your own blog on a Linode instance. Chapters: 0:00 Introduction 0:24 Create a new Next project 0:45 Find a Blog Template 1:40 Import Blog Template 2:50 Create Next App 3:50 Customize Index 4:45 Add Fonts to Global Styles 5:20 Create Navbar Component 7:50 Install Alpine.js and Font Awesome 11:50 Create footer.js 13:00 Continue Customizing Index 19:00 Spin-up MongoDB Instance at Linode 21:10 Login to MongoDB Cluster 22:10 Update Firewall 23:50 Create Database 25:20 Setup Next.js with MongoDB 28:00 Install MongoDB Locally 31:10 Create a new Document 31:50 Resolve Connectivity Issue 32:50 Update Image Sizing 35:00 Finish Customizing Index 37:20 Troubleshoot /post page 38:16 Add Blog Name to Navbar 40:00 How to Modify Posts 42:00 Create Sidebar Component 44:20 Check Responsiveness 44:40 Resolve Responsiveness Issues 49:05 Import Posts into MongoDB Compass 51:45 Fetch Blog Posts from Database 52:02 Create getBlog.js and getBlogs.js 55:00 Update Blog Tags 56:40 Configure Create Markup Function 58:20 Configure Meta Description 59:10 Fetch Content for Slug 1:12:00 Update Select Posts 1:13:35 Conclusion New to Cloud Computing? Get started here with a $100 credit → https://www.linode.com/lp/youtube-vie... Read the doc for more information on web development languages → https://www.linode.com/docs/guides/we... Learn more about Tailwind CSS → https://tailwindcss.com/ Subscribe to get notified of new episodes as they come out → https://www.youtube.com/linode?sub_co... #Linode #Tailwindcss #webdevelopment Product: Linode, Blog, Tailwind CSS; @CodeWithHarry

Follow along using the transcript.

Akamai Developer

1.04M subscribers