Blogpage – Nextra

Blog Page

The Blog Page displays all the blog posts from the data/blog 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, modify the code snippet below:

<div className="section-header pb-xxl-9 mb-xxl-4 pb-7 pt-xxl-4 pt-md-6 position-relative">
  <h2>
    Blog and <br /> Some Project Case
  </h2>
</div>

Update the text within the <h2> tags to set your desired section title.

Posts

The first post displayed on the page is the featured post. It is retrieved using the following code snippet:

const [featuredBlog, ...restOfTheBlog] = getMarkDownData("data/blog");

To change the featured blog post, you need to replace the existing markdown file in the data/blog folder with your desired blog post. Ensure that the new markdown file follows the same structure as the existing ones.

You can create a new markdown file in the data/blog folder and provide the necessary information, such as the title, content, author, and date. Make sure to follow the correct format for the markdown file, including the use of front matter and proper Markdown syntax.

After creating the new markdown file, it will be automatically fetched and displayed as the featured blog post on the Blog Page.

Feel free to repeat the process to add more blog posts. The remaining blog posts will be stored in the restOfTheBlog array and will be displayed below the featured post.

Remember to update the blog post files in the data/blog folder with your own content to create your desired blog page.

How to Create a Blog Post

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

Create a new file inside the data/blog 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 Essential JavaScript Tips and Tricks Every Developer Should Know
date: 28 June 2023
thumbnail: "/images/blog/featured-thumb1.png"
featureImage: "/images/blog/featured-image.png"
category: Technologies
---
```
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, thumbnail 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.

User experience (UX) is an important aspect of web design that can greatly impact the success of a website. In today's digital age, where competition is fierce and attention spans are short, providing a positive user experience is essential for engaging and retaining visitors.

A good UX design not only helps increase user engagement but also leads to higher conversion rates, which is the ultimate goal for most websites. By focusing on creating a website that is easy to navigate, visually appealing, and delivers relevant and useful content, you can provide users with a positive experience that keeps them coming back for more.

![Blog Image](/images/blog/featured-image-2.png)

One of the key elements of good UX design is simplicity. A cluttered and difficult-to-navigate website can be frustrating for users and cause them to leave quickly. By keeping the design clean and simple, and using intuitive navigation, you can make it easy for users to find what they're looking for and navigate your site effortlessly.

Another important aspect of UX design is accessibility. Your website should be designed to cater to all users, including those with disabilities. This means ensuring the site is easily readable, has clear contrast, and can be navigated using a keyboard. By making your site accessible, you can reach a wider audience and provide an inclusive experience for all users.

In conclusion, a good user experience design is crucial for the success of your website. By focusing on simplicity, accessibility, and delivering relevant and useful content, you can create a website that engages users and leads to higher conversion rates. Remember that user experience is an ongoing process, requiring continuous testing, refining, and optimization to ensure your website provides the best possible experience for your users.

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/blog 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.

Project Contact Page