First create a file inside blog folder in pages (/pages/blog/). You can also create a sub folder inside blog folder. For SEO, the best practice is to name the file and folders in all lower case seperated by hyphen "-" and end with ".tsx".
example: "your-first-article.tsx". This will create a tsx file.
Go to /BLOG_CONSTANTS/_ARTICLES_LIST.tsx file. Here we will add details of your article in ARTICLES_LIST array as follows.
// Import author profiles, just type the name you have set in _BLOG_SETUP inside the curly bracketsimport { MAYUR, RUPALI } from './_BLOG_SETUP';// file --> /BLOG_CONSTANTS/_ARTICLE_LIST.tsxexport const ARTICLES: iArticle[] = [...,{path: '/pages/blog/your-first-article.tsx',featureArticle: true,preview: {// the author object you created in _BLOG_SETUP fileauthor: MAYUR,date: "August 6 2022",articleTitle: "Your first article",shortIntro: "This is a demo file for your first article, you can copy structure of this file to create multile article.",tags: "demo, your first article",thumbnail: "/public/imp_assets/tutorials/how-to-write-first-article.svg",category: 'tutorial'},seo: {title: "Your first article",description:"This is a demo file for your first article, you can copy structure of this file to create multile article.",keywords: "demo, blog setup, first article",ogImage: "/images/tutorials/demo-image.jpg",twitterHandle: "@mayur_nalwala",}},...]
In our article details we have 4 important properties path, featureArticle, preview, and seo.
path
As show in the above image, path contains the file path of our article.
If you have Path Intellisense installed in your VS Code, it will be ease to add path, just hit "/" and then auto suggestions will come up, just follow the auto suggestions and set the path of the article file.
featureArticle
You can set it true or false as shown in the above image. If true the article card will be of full width as shown in the image below.
*note : adding featureArticle property is optional
feature article exmaple
This will display the details of the article in the article cards on main home page and article's header on the article page
SEO details for your article page. As shown in the above image seo contains 5 important properties title, description, keywords, ogImage, twitterHandle, author.
*note : seo is optional as we have already passed preview we will create default seo with that but if you want to pass any extra keywords or different page title, description etc we can write that in seo : {} object.
Now we can go to our created file your-first-article.tsx and write our article. To write our article we will use different components as shown in Blog with sidebar layout or Blog with centered layout example. You can also checkout all the available components to write your article in All Components Demo page.