Ever since I started learning programming and web development, I wanted a site of my own. I dabbled with blogging in the past with wordpress and other solutions, but didn't feel the sense of ownership I wanted. This site built with code I wrote myself is my mark on the internet, that I have full control over. And here's why every aspiring developer or creator needs to have a site of their own.

Build in Public

Learning and working on side projects in isolation can get lonely quickly, instead build in public. Do not restrict yourself to sharing the final polished product and share the W.I.Ps and issues you encounter. Who knows, maybe someone else with a similar problem in the future may benefit from your approach.

function BlogImg({ src, alt, layout }) {
  // const getMeta = (url, callback) => {
  //   const img = new Image();
  //   img.src = url;
  //   img.onload = () => cb(null, img);
  // };

  // // Use like:
  // getMeta('https://i.stack.imgur.com/qCWYU.jpg', (err, img) => {
  //   console.log(img.naturalWidth, img.naturalHeight);
  // });
  return (
    <div className="flex justify-center">
      {/* <ExportedImage alt={alt} src={src} layout="fill" objectFit="contain" /> */}
      {/* produced square images with unnecessary padding. */}

      <img src={src} alt={alt} className="max-w-md" />
    </div>
  );
}

Your Digital Garden

A digital garden is a space on the web where you can sow seeds for ideas that can develop over time as you grow. It is based on a popular movement with the same name that encourages people to share and promote their work on their own space. I was particularly inspired by A Brief History & Ethos of the Digital Garden by Maggie Appleton. Your site is your digital garden, an archive and a place to express yourself on the internet with complete control.

As for this site, here is the stack I used to build it: image

image using <BlogImg /> component

• Hosting : Netlify
• Front-end : Next.js
• Backend : Next.js with locally stored Mdx files
• Markdown to HTML : MDX-remote library
• Styling : TailwindCSS

image using basic markdown

The site was based on the project structure of leerob.io site along with tag system implementation based on Tailwind CSS Next.js Blog Template