Hello, world!

Writing is an invaluable skill, and I enjoy writing and getting lost in thought. I spent my Saturday redesigning and styling my personal site, so what a better time to start a blog. This article will go over how I did it.

Picking the technology

I initially planned to use Notion to implement my blog with the recent beta release of the Notion API. Although I do intend to migrate towards the Notion API, as it sits right now, the functionality it offers isn't quite there yet. The main issue for me not choosing the Notion API is that it doesn't currently support code blocks.

I intend to write/blog about development, and not having code blocks seemed like a significant issue.

I have used react-notion, which uses Notion as a CMS. Using react-notion has worked quite well in the past, but the one thing I don't like about using Notion is the inability to customize colors (i.e., text colors, code blocks).

I finally decided to use MDX, which allows for flexibility because it will enable you to integrate with JSX.

MDX Setup

I didn't want to overcomplicate getting the blog set up, so I started looking for a few examples online. Vercel offer's an excellent Github repo full of tons of examples using various technologies. I looked over the MDX example and quickly got set up.

Here is my `getStaticProps` function at my `/blog` route used to pre-fetch my blogs.

export const getStaticProps: GetStaticProps = async () => {
  const posts = postFilePaths.map(filePath => {
    const source = fs.readFileSync(path.join(POSTS_PATH, filePath));
    const { content, data } = matter(source);

    return {
      content,
      data,
      filePath,
    };
  });

  return { props: { posts } };
}

`postFilePaths` is a function that reads from my `data` directory where I have all of my MDX files.

Customization

MDX allows customizable styles for the markdown that you render. For simplicity's sake, the `MDXRemote` component from the `next-mdx-remote` library takes in a `components` prop that you can define with your styles.

const components = {
  a: CustomLink,
  h1: H1,
  h2: H2,
  h3: H3,
  p: P,
  ul: UL,
  li: LI,
  em: Code,
	pre: props => (
		<Highlight
		  {...defaultProps}
      theme={determineTheme()}
      code={props.children.props.children}
      language="jsx"
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <pre className={pre()} style={style}>
          {tokens.map((line, i) => (
            <div
              className={styleline()}
              key={i}
              {...getLineProps({ line, key: i })}
            >
              <span className={linecontent()}>
                {line.map((token, key) => (
                  <span key={key} {...getTokenProps({ token, key })} />
                ))}
              </span>
            </div>
          ))}
        </pre>
      )}
    </Highlight>
  ),
};

I explicitly state how I want my markdown to be styled in my `components` object. I replace the anchor, heading, paragraph, list, code, and pre tags with my styles.

The `pre` key in my `components` object is what styles my code blocks, like this one:

	function styling() {
		return 'This is pretty cool';
	}

Conclusion

Implementing a personal, professional-looking blog with your design system has been made simple with MDX and Next.js.