Personal Website with Next.js & Notion CMS

Context

I started this project to learn more about the technical side of creating web applications. What began as a basic HTML and CSS project ended up as a Next.js site using Notion as its CMS, a journey to learn how to code and realization that I don't know how to market me, as a professional.

The inspiration for this project came from a really cool service called Super.so. which I had used previous to creating my own. It worked really well! Through intuitive UI it connected Notion to a front end template and published it live with a possibility to use a custom domain.

Notion Integration

I find using Notion really convenient. I use it with many integrations that help me unify everything into one productivity center. Using Notion to control the site content was a time-saver for me.

The second factor for choosing Notion was that its free and the learning curve for actually using it felt faster than in comparison to some headless open source CMS. I simply wasn't skilled enough to understand how to integrate such open source resources into my project.

Creation

I wanted something that has basic functionalities. I started with the project requirements which I outlined as so:

• A place to showcase my services, projects and blog posts

• Contact form

• Minimalist design that gives a technical vibe

• Fast website running on modern technology

• Good SEO abilities

The website should be small with only a few pages:

• Homepage

• About

• Services

• Blog

• Projects

• Cooperation

Learning Next.js and CSS

The learning on the go felt surprisingly easy and satisfying. With all the resources available from both Next.js and Notion it was just a matter of time to finish the project. What I found really hard was the rendering logic for page blocks but I found really open source code that I slightly adjusted and used.

Unfortunate is that Notion an only serves dynamic image URL, meaning the URL is changing every 10 minutes making it unusable with Next.js image optimization. I created workaround with a function that completes the full path to the file in a public folder with a text from a text block.

// A piece of function that renders blocks from Notion.
const renderBlock = (block) => {
    const { type, id } = block;
    const value = block[type];
    switch (type) {
      case "paragraph":
        const textContent = value.rich_text
          .map((textObj) => textObj.text.content)
          .join("");
        const imageTagRegex = /<image>(.*?)<\/image><cap>(.*?)<\/cap>/g;
        const match = imageTagRegex.exec(textContent);

        if (match) {
          const imageUrl = match[1];
          const caption = match[2];
          return (
            <figure key={Math.random()} className='article-image-container'>
              <Image
                src={`/images/blog/${imageUrl}`}
                alt={caption}
                className='article-img'
                width={1000}
                height={1000}
              />
              {caption && <figcaption>{caption}</figcaption>}
            </figure>

Results

The whole project took me about 127 hours without little to none preexisting knowledge of coding & programming.

Besides the website itself I had gained invaluable experience doing this project. I learned many details, that will differentiate my future thinking, as a marketer and project manager.

Having a great testing environment for e.g. Google Tag Manger tags et. is a big plus too.

Stack

• Framework: Next.js 13.5.6

• CMS: Notion

• Forms: Formsubmit

• Analytics: Umami.is, GA4, Google Tag Manger

• PaaS: Vercel

The full code is in my Github repo.