Putting Dev.to to work - using it as a CMS

I've been pretty lazy these past few months. Little to no progress on any of my projects, and no will to change that. Then, out of the blue, I came across the old project folder for my then portfolio website. That was the spark I needed to start working again.

So, what did I do?

I started out by searching online for other portfolios people have created for inspiration. It was then that I came across James Wallis' portfolio, and I loved the design, to understate how I felt.

The deliberate minimalism was definitely something I was aiming for, and this hit the nail on the head.

Some of the features that really stood out for me were:

• The choice of using Tailwind CSS, a CSS framework that I was comfortable with,
• The use of Next.JS to programmatically create dynamic pages,
• The overall design; uncluttered and intuitive
• Using Dev.to as a CMS to automatically populate the portfolio and blog

A CMS?

Yes! A Content Management System. With the tech that James has developed, I can harness Dev.to to act as a provider for the information I display on my website. There's a few awesome benefits you get for doing this too, like:

• Dev.to stores the articles and any images that are uploaded and used.
• I can use Dev.to's editor and the ability to draft an article and publish it later.
• It has a built-in RSS feed that I can use to share my articles to other sites such as CodeNewbie and Medium.
• Although Dev.to has the article first, the use of a canonical URL ensures that Google and other sites see my personal website as the source site for the articles.

How it works

Built using Next.JS, we have access to two helper functions (getStaticPaths and getStaticProps to generate the Articles and Portfolio pages.

Before an article is displayed on my website, it must meet the two following requirements:

1. Must be published (obviously) Must have a canonical URL directing to my website. This enables me to pick which articles are displayed, what the article's path will be on my website (not the post ID).
2. Moreover, an article with a canonical URL pointing to https://plutonus.dev/articles/... will be built as part of my blog whereas, if its canonical URL is https://plutonus.dev/portfolio/... it will be a portfolio piece.

For every article that meets the requirements, the subsequent build process is followed:

At build time, Next.js calls the getStaticPaths function which

Fetches a list of my published articles using the Dev.to API (/api/articles/me).
Converts the article's markdown to HTML.
Saves the articles to a cache file for use in the next step.
A dynamic page is created within the Next.js context for each article - the page slug will be the canonical URL path.
For each page, Next.js calls getStaticProps which fetches the page's article from the cache. The article contains the name, description and HTML.

The pages are rendered with the markdown using remark-html.
Finally, the page is rendered. I use custom elements to display the article name and description and then display the HTML I rendered earlier in getStaticPaths using remark-html. For styling, I use the Tailwind Typography plugin.

Well, that pretty much sums it up. You can view the articles I write on Dev.to, including this one, on my brand new site!