In my opinion, if you really want to be a developer, one day you must have your own blog.There are many tools in the market for this. However, making your own blog is important for both improving yourself and gaining Self-Confidence as a software developer. I set out with this way of thinking and aimed to create a blog within 3 days. While doing this, my main goal was to use the latest technologies. This article is the story of this journey.

Hello Cruel World👋

Keeping a blog nowadays is important for a software developer. Here, you can both take notes for yourself about what you have learned, and guide other software developers by sharing your knowledge and experience. On the other hand, a long personal blog is welcomed by employers and project managers very positively.

As I said before, there are many tools for this. E.g

• dev.to

• Hashnode

• hackernoon

Although these tools are very easy and useful for blogging, it seems to me that having a developer's own blog will give him/her many advantages.

I set out with these goals and decided to develop a programming-based blog.🤨 But I had to do this as fast as I could as I couldn't devote much time to this development due to my works. And also I wanted to do this with cutting edge technologies.💻 So I set several Frameworks. These:

• Astro.js + Markdown
• Template Language + pure JS + CMS
• Angular + CMS/Markdown
• Scully + Markdown
• Next.js + MDX

Although each Framework has its own advantages, I finally decided to use Next.js. Because in this option, I would be able to use both React and benefit from the privileges and comfort of MDX.

I immediately started researching Github to get going quickly. And the template prepared for him by a software developer named Samuel caught my attention. I immediately forked this from Github and started coding.When i run the code on my localhost a lot of error occurred and i searched,found and tweaked all the codes that give me error. I have added the features I want to add in general.

For example there is no pagination in the original code so all blog posts sits on the one page.So i implemented pagination like this :

  const totalPosts = filteredPosts.length,
       limit=3,
       pages = Math.ceil(filteredPosts.length / limit),
       hasNextPage = Math.ceil(totalPosts / limit) > pageNumber,
       hasPreviousPage = pageNumber > 1,
       viewPosts= filteredPosts.slice((pageNumber - 1) * limit, pageNumber * limit)
 let fPosts= currentSearch ? filteredPosts:viewPosts;

   <Button disabled={!hasPreviousPage} type="button" onClick={()=>{
          Router.push(`/blog/?page=${pageNumber-1}`)
        }}> Prev </Button>

But when i implemented pagination , this time searching mechanism broke down.And i modified the search mechanism for my needs🔎

I also implemented a scrollToTop button component and added to the main page layout component.

import { useState,useEffect } from 'react'
import styles from './topscroll.module.scss'
import Button from 'components/button'
import { BiUpArrow } from "react-icons/bi";

const Topscroll=(): JSX.Element=> {

    const [showScroll, setShowScroll] = useState(false)

    const scrollTop = () =>{
        window.scrollTo({top: 0, behavior: 'smooth'});
      };

      useEffect(() => {
        
            const checkScrollTop = () => {
                if (window.pageYOffset > 400) {
                    setShowScroll(true); 
                } else {
                    setShowScroll(false); 
                }
              };
          window.addEventListener('scroll', checkScrollTop)
          return () => window.removeEventListener('scroll', checkScrollTop)
      }, [])
    
    return (
        <div className={showScroll ? styles.active: styles.scrollTopBtn}> 
             <Button  type="button" onClick={scrollTop}> <BiUpArrow/>  </Button>
        </div>
    )     
}

export default Topscroll;

Implemented draft-publish system.I tweaked and wrote a lot of Scss to style the views.Actually using style modules is very good experience.By the way , In Angular you can write sass in component based too.

Finally , the initial version is ready.And i deployed to Vercel as you predict.Because , Vercel is designed for essentially Next.js projects and very easy to use.I have a lot of experiences with AWS and i can say Vercel is easy peasy comparing to Aws.

This is it.🥳Mission accomplished in 3 days and I grasp the next.js’s main concepts by myself with doing.Because as you now , the most effective way of learning is always doing...😎

I’ll write about programming JS , React , Angular , Next.js and other frameworks , my experiences , failures and success’. And also Webgl.I created some big projects in Webgl and i’ll share my experiences , my snippets and tutorials.Finally as a 3D Designer i will share my 3D experiences ,too.

So keep watching here guys…📺

If you have any questions , feel free to contact me...