How I developed my personal website

GitHub Repo - pmpwith2i/fpomponii.it

Some days ago I looked at my old website, and I realized that it was time to update it. I started developing this website to share my knowledge and my experience with the open source world. I decided to start with something simple, and I used common technologies. The idea behind this new website was to start with something easy to develop and then, incrementally, improve it.

Structure of my website

I decided to use Tailwind CSS and Tailwind UI for creating the UI of the website, this because Tailwind offers a lot of templates and components, this speed-up the work. Tailwind also provides a way to style your site without creating plenty of CSS files.ù I used Next.Js in top of React. I'm in love with React and Typescript and I choose to use Next for benefit of the Server-Side Rendering. Next.Js is very useful for my article section, it is generated from MDX files and I want it to be recognized by SEO tools. Now you're reading my post, written in an .MDX file, and then, transformed in a React component. I used MDX to write my posts, because I wanted to use the power of React inside my posts, and I wanted to use the power of Markdown to write it. The issue with this approach is that every time I want to update my blog I've to push my code and restart the development server. The best approach would be to use an Headless CMS like Contentful, but I wanted to keep this website as simple as possible. The configuration of my project is inside the file next.config.mjs

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypePrism],
  },
});

export default withMDX(nextConfig);

Inside the file lib/getAllArticles.ts you can found the methods for getting articles.

async function importArticle(articleFilename) {
  const { meta, default: component } = await import(
    `../pages/articles/${articleFilename}`
  );
  return {
    slug: articleFilename.replace(/(\/index)?\.mdx$/, ''),
    ...meta,
    component,
  };
}

export async function getAllArticles() {
  const articleFilenames = await glob(['*.mdx', '*/index.mdx'], {
    cwd: path.join(process.cwd(), 'src/pages/articles'),
  });

  const articles = await Promise.all(articleFilenames.map(importArticle));

  return articles.sort((a, z) => (new Date(z.date)?.getTime() || 0) - new Date(a.date).getTime());
}

Deploy

I used Vercel to deploy my website, this because Vercel offers a lot of features for free, and it's very easy to use.

This article is still a work in progress, I want to share because just right now someone could find it useful, but I want to improve it in the future.

Final consideration

Obviously this is an embryonal version of my website, it's only a way for creating a structure in which will be possible to introduce new features and new components.

Thanks for the reading!

Credits

• Tailwind UI
• Tailwind CSS
• Spotlight Template (Template UI)