Website Polish

Add Logo Image to Homepage

Add the following code to index.md, and let AI add CSS styles to give the image a nice background. Need to put the logo file in the public folder.

hero:
  name: "moomboss"
  text: "Technology, Life & Thoughts"
  tagline: Welcome to my blogs, where I document my technical explorations and life insights
  image:
    src: /favicon-310x310.png
    alt: moomboss logo
    light: /favicon-310x310.png
    dark: /favicon-310x310.png

Add Favicon

Add the following code to config.mts to generate favicon.

  head: [
    ['link', { rel: 'icon', href: '/favicon-16x16.png' }],

Image Compression Optimization (Failed)

Install vite-plugin-imagemin to compress images and reduce bandwidth usage. I failed, configuration was not successful 😢. Through AI generated scripts, can convert png to webp, but dev and preview are always inconsistent. Not handling it now, let cloudflare handle it when I have money.