Leveraging Static Files and Enhancing Design in SvelteKit

Today, I delved into the fascinating realm of managing static files within my SvelteKit project. As my blog posts are stored as markdown files, I aimed to seamlessly integrate them into my project’s build artifacts. To achieve this, I needed to ensure that these markdown files were appropriately placed within my project’s ./src/lib/ directory, which SvelteKit recognizes as “$lib” in the code. Additionally, I had to import these files, as any content not imported or utilized would not be included in the final build.

To meet this objective, within my blog page’s TypeScript (.ts) file, I executed the following:

const paths = import.meta.glob('$lib/posts/*.md', { eager: true });

This code, executed on the build server, effectively brought in and enabled references to my markdown files.

Furthermore, I took the opportunity to enhance the design of my website by transitioning from Tailwind to utilizing open-props. The results were impressive, and I’m immensely pleased with the aesthetic appeal of the updated layout. For this redesign, I draw inspiration and guidance from Joy of Code’s SvelteKit Markdown Blog Tutorial. Their tutorial has been instrumental in guiding me through this process, and I credit them for the outstanding design.

I am now in a state of contentment with the current state of my website. In my upcoming post, I plan to share the progress I’ve made on my personal AI projects. Stay tuned for exciting updates on that front!