Blogpage – Nextra

Blog Page

The Blog Page displays all the blog posts from the data/blogs folder. You can also create a new blog post. Follow the steps below to create a new blog post:

Section Title

To change the section title, go to components/MainBlogArea.jsx and find the following code.

<h3>Real Estate News &amp; Blogs</h3>

Now, update the text within the <h3> tags to set your desired section title.

Blog Search

Blog search option is generated from components/BlogFilter.jsx. All the categories added in blogs are automatically added on filter option. There only two types to filter the blogs. one is news and another is blog. to edit type follow the following steps.

Go to components/BlogFilter.jsx file.
file the following code:

<li onClick={() => handleType("News")}>News</li>
<li onClick={() => handleType("Blog")}>Blog</li>

Add More type by changing valye of handleType and li tag value
Finally, add the type in the blog items. example:

type: "News"

How to Create a Blog Post

To create a blog post on RealStatic, you can follow these simple steps:

Create a new file inside the data/blogs folder. For example, let's create a file named greetings.md.
Open the greetings.md file and add the following information at the beginning. This is called the front matter, and it provides metadata about the blog post:
```
 ---
 title: "10 Delightful Dining Room Decor Trends for Spring"
 featureImage: "/images/blog/blog-feature-image.png"
 coveredImage: "/images/blog/blog1.png"
 category: "Buying and Selling"
 type: "News"
 date: "23 April, 2023"
 readTime: "5 min read"
 author: "Emma Thompson"
 authorImage: "/images/blog/author.png"
 authorPosition: "Interior Designer"
 ---
```
You can modify the values to match your blog post. The title represents the title of your blog post, the date is the publication date, coverImage is a small image displayed on the blog list page, featureImage is the main image shown on the individual blog post page, and category indicates the topic or category of your blog post.
After the front matter, you can start writing the content of your blog post using Markdown syntax. Markdown is a simple and lightweight markup language that allows you to format text easily.

What a time we are living in! A lot of things are coming back, bringing back nostalgia. Wondering why I am talking about nostalgia and all? Especially when it is supposed to be an article on websites! Well, because some old famous website technology is coming back too. Yes, I am talking about static websites.

Long ago, almost all websites were used to be static sites during the early days of the internet. Then dynamic sites came and blew the space. A lot of websites shifted to it. Obviously dynamic sites have their advantages. But static sites are making a comeback. And it’s coming stronger than before. In this article, you will cover the basics of static websites like what is a static website, what are the advantages, and when you should use a static website. Let’s kick things off.

#### Blockquotes

Blockquotes can be nested. Add a >> in front of the paragraph you want to nest.

> Static websites are way faster than dynamic ones. As they don’t have a back-end system, there is no time loss due to database connection. Instead, the lightweight, pre-rendered HTML files load incredibly fast.

#### Images

Being a fast loading and more secure website, you can choose a static website for beginner to medium level workload. Hopefully, you have got the answer to what is a static website and why should you use it. Decide carefully does static sites are enough for your need.

![Blog Feature](/images/blog/blog-feature-image2.png)

#### Lists

Being a fast loading and more secure website, you can choose a static website for beginner to medium level workload. Hopefully, you have got the answer to what is a static website and why should you use it. Decide carefully does static sites are enough for your need.

- Performance: Faster Loading Speed
- Less Server-side Dependencies
- Flexibility: More Freedom to Develop Websites
- Performance: Faster Loading Speed
- Less Server-side Dependencies
- Flexibility: More Freedom to Develop Websites

1.  Performance: Faster Loading Speed
2.  Less Server-side Dependencies
3.  Flexibility: More Freedom to Develop Websites
4.  Performance: Faster Loading Speed
5.  Less Server-side Dependencies
6.  Flexibility: More Freedom to Develop Websites


#### Link

Yes, a static website may have all its benefits, but is it suitable for you? That’s a big question. It depends on why you are going to build a website, what purpose it will **serve**. That’s why you must when you should use a static website.

The followings are the common applications where using the static website is the best choice. - **Blog sites** - - Small business websites - Websites Under-Development - Personal Portfolio sites - Websites that contain basic information

#### Table

The followings are the common applications where using the static website is the best choice. - Blog sites- - Small business websites.

| Full Name     | Title           | Email Address     | Phone Number       |
| ------------- | --------------- | ----------------- | ------------------ |
| Zakir Hossain | UI, UX Designer | example@gmail.com | +88 00 088 882 222 |
| Zakir Hossain | UI, UX Designer | example@gmail.com | +88 00 088 882 222 |
| Zakir Hossain | UI, UX Designer | example@gmail.com | +88 00 088 882 222 |
| Zakir Hossain | UI, UX Designer | example@gmail.com | +88 00 088 882 222 |
| Zakir Hossain | UI, UX Designer | example@gmail.com | +88 00 088 882 222 |

You can modify the content to suit your blog post's topic and message. Feel free to include images, links, headings, and other Markdown elements to enhance your blog post.

Save the file after adding your content.

That's it! You have created a blog post titled "10 Essential JavaScript Tips and Tricks Every Developer Should Know". When you run the website, your blog post will be available at the URL http://localhost:3000/blog/greetings.

Blog List

The blog list page fetches data from the .md files located in the data/blogs folder. It automatically displays a list of blog posts based on these files. If you want to add more blog posts, simply create additional .md files following the same structure described above.

The blog list page will automatically retrieve the necessary details such as the blog title, publication date, thumbnail image, and category from the front matter of each .md file.

Listing Page Contact Page