Creating this dev blog using a Next.js portfolio starter kit

I needed a blog starter kit that was:

minimal, fast and low maintence
has markdown support
SEO friendly
using the technologies I am learning (Next.js, React, Tailwind CSS)

I came across this portfolio starter kit from Vercel's example templates which ticked all the boxes.

Setting up my git repository and bootstrapping the example

I created a new git repository in Github called florim-dev.

Next I followed the instructions to bootstrap the portfolio starter kit and add my newly created git remote.

Finally I pushed an inital commit

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog florim-dev

git remote add origin git@github.com:florim-agimi/florim-dev.git

git branch -M main

git push -u origin main

Metadata

Next.js includes a Metadata API that can be used to define the applications's metadata.

There are two ways to define metadata:

*Config based metadata: Export a static metadata object or dynamic generateMetaData function in the layout.js or page.js
File-based metadata: Adding static or dynamtically generated specially named files e.g. sitemap.ts

`metadata` object

The portfolio starter kit uses a static metadata object in the layout.tsx.

I updated the metadata object with details of my dev blog:

export const metadata: Metadata = {
  metadataBase: new URL(baseUrl),
  title: {
    default: 'Florim Agimi | Dev Blog',
    template: '%s | Florim Agimi Dev Blog',
  },
  description: 'This is my dev blog and portfolio.',
  openGraph: {
    title: 'Florim Agimi | Dev Blog',
    description: 'This is my dev blog and portfolio.',
    url: baseUrl,
    siteName: 'My Portfolio',
    locale: 'en_US',
    type: 'website',
    images: '/assets/florim-dev-logo-og.png'
  },
...
}

The metadata object is using a baseURL variable imported from a sitemap.ts file. I moved on to updating that next.

Sitemap

The sitemap.ts file is used to programmatically generate a sitemap by exporting a default function that returns an array of URL's.

If using typescript, a Sitemap type is available to use, which the portfolio starter kit does not use.

I updated the value of the baseURL in the sitemap.ts file to my blog domain name https://www.florim.dev.

export const baseUrl = 'https://www.florim.dev'

Logo, Favicon and Opengraph images

I jumped on Canva to create a simple logo for my blog based my initials: FA.

The logo is used in the following files I added:

-favicon.ico: Added to the /app directory and automatically add to the the favicon to the app's <head> element.
-florim-dev-logo.png: Added to the nav.ts component and lives in /public/assets/ -florim-dev-logo-og-png: Added to metadata object and also lives in /public/assests/

The nav.tsx component which is used for the nav bar, interates over a navItems array. I added an item in the navItems array for my Projects page.

The footer.tsx component does use an array so I just updated the links directly and added in my LinkedIn profile.

Updating the home page

Next.js uses a file-based router where folders are used to define routes and specially named filed are used to create the ui e.g. pages.tsx

I added a bio to the homepage by updating pages.tsx in the app/ directory.

Adding a new page: Projects

I wanted create a page called "Projects" to showcase my projects (that I will finish some day!).

First I created a new folder called projects and then added a page inside that folder called pages.tsx.

Finally I added the a section to list my projects including the metadata:

export const metadata = {
    title: 'Projects',
}

export default function Page() {
    return (
        <section>
            <h1 className="font-semibold text-2xl mb-8 tracking-tighter">
                Projects
            </h1>
            <ul>
                <li> {/* Add future projects */} </li>
            </ul>
        </section>
    )
}

Writing my first blog post (This blog post)

I deleted all the example blog posts which are mdx files from the portfolio starter kit and thought about what to write as my first blog post.

I thought it would be a good idea to document creating this blog site.

I created a mdx file named creating-this-dev-blog.mdx in the app/posts/ folder and added in the frontmatter and content.

Git commits

I have read that it's best practice to commit early and commit often.

Throughout setting up my blog, I tried to frequently push commits and add meaningful git messages.

florim-dev-blog-git-commits-history

Deployment with Vercel

I added the git repo for this blog as a project in Vercel.

The Vercel platform is extremely easy to use and offers automatic deployments with git pushes.

Conclusion

Creating this blog gave me a great introduction into Next.js and the familiary with the framework's project structure.