How I'm Doing It - Vibe coding my first blog with free AI tools and Deadlogs blog engine

How I'm Doing It - Vibe coding my first blog with free AI tools and Deadlogs blog engine

Why Blogging? I've always loved blogging writing. I believe in the ✨ magical✨ power of written expression. Over the years, I've enjoyed handwriting personal journal entries and making lists of all kinds. Writing has helped me with planning my days and setting goals, and I plan to delve back into academic writing sometime this year. Blogging has always been a logical part of expressing myself online. I've used blogging platforms - Wordpress, Blogger, and even Livejournal way before that. I've missed the community of online blogging social media sites. Dev.To allows me to write in a community of writers and developers. But I wanted to create a place online that was just for me to write, rant, and create an archived of a life well-lived. The Issue As a beginner web developer, I have been able to admire personal websites built with static site generators like 11ty and Astro. Since I am still not finished with my introductory HTML and CSS learning, I didn't want to jump into those Javascript-based tools yet. I needed a way to build my blog using a blog engine that was much more beginner-friendly. Finding a Solution While scrolling through some Neocities pages one day, I found the Deadlogs site generator. It helps users generate static sites using HTML and CSS with Javascript that helps the pages and navigation menus all work together. I was stoked to find a template for a blog that seemed easily editable by a newbie. About Deadlogs As I mentioned in a previous post, the Deadlogs generator comes with a way to create a static blog page that includes a home page, an archives section, and a way to move between blog entries. I found a template I like - Wheat - and got to work! The default file structure of this template looks something like this: wheat/ ├── assets/ │ ├── images/ │ │ └── favicon.ico # Site icon │ ├── default.css # Primary stylesheet │ └── main.css # Secondary stylesheet ├── scripts/ │ ├── console.js # Javascript for the console │ └── posts.js # Javascript for posts ├── deadlogs.js # Javascript for site structure and navigation ├── entry.html # Template for individual log entries / posts ├── index.hrml # Folder homepage └── index.html # Main homepage I knew that I wanted to include a few pages that were not included in the Wheat Template. /Now would be a Now page that tells users what I'm doing right now and includes a status.cafe embedded page or link. /Garden would be my fun online place to share things I collect and enjoy including sub-pages for /Reading, /Learning, and /Site Stuff Here's where vibecoding comes in. I wanted to use an AI tool that was FREE and did not require an additional account or email address to register. Since I already use Google's services for my 50-11 email addresses, I decided to use Google's Gemini AI. I only wanted Gemini to update my navigation menus, and my templates for each page's index.html page Over the past few weeks with lots of breaks for water and coffee in between, I edited the Deadlogs template to create a blog site that I'm happy with. Gemini came in clutch. I used it to update my navigation menus, fix some of my file structure issues, update and change CSS to my liking. Overall, she is THAT GIRL for launching a site from zero to blog quickly. Site Analytics I recently launched some small personal projects online that I will write about soon. With one of the projects, I was able to use a free analytics tool that is built into another free site hosting tool. This analytics tools lets me easily see my page views, how visitors get to my site, and from where my site visitors are logging in. My visitors are only from the United States and Poland (!) so far. Co słychać u moich Polskich przyjaciół! This helpful tool offers everything I need for now. And for free! But I wanted something a bit easier to use with an admin portal that where I could see analytics for multiple sites at once. I also needed this new analytics tool to work on Github Pages sites. So I decided to go with another great free analytics tool that is standalone and can be used for free on many sites. Google Analytics is it! I added code to my site for Google Analytics and used Gemini to fix some of the outstanding issues. Fun stuff I registered on status.cafe. Still waiting on my account activation. My status profile will eventually go on my now page. The Future of this blog I'll keep my Deadlogs blog around for a while - probably at least until I finish up The Odin Project's Foundations course and more Responsive Web Design learning. The template is simple enough to update with new blog posts a few times per week. Check out my blog teeteate.github.io/blog/ My site is ready for launch (while some things are still a WIP). I have to fix the blog sections over the next few days. But I wanted to get something up tonight. I hope you'll take a look! All of my site tools used can be found in the sources.txt file which is mentioned in my first blog post.

Original Source

Read the full article at Dev →

KhanList aggregates and links to publicly available news content. We do not host full articles from third-party sources. Always verify important information with original sources.