Making a Website with AI: My Journey into a New Digital Frontier

The Myth of Easy Website Creation with AI

It's easy to think that AI can whip up a professional website with a single command. After all, the headlines scream about AI revolutionizing everything encouraging everyone to think you can 'build a website with AI tools in 5 minutes'! However, website code is a complex beast—especially if you're aiming for stunning effects, seamless navigation, and a polished appearance. If you choose this AI-assisted route, be prepared to roll up your sleeves and take an active role. It's not a hands-off process, but with the right mindset, it's a rollercoaster emotional adventure.

My Humble Beginnings with Coding

I'll admit, I wasn't starting from scratch. Years ago, I dabbled in rudimentary coding using a different system—one that relied on frames rather than the sleek cascading style sheets (CSS) we use today. It was a clunky start, but it gave me a foundation. When I decided to build this website, I turned to AI, and what a ride it's been! The process was a labor of love, filled with late nights, moments of dark despair which, through persistence, led to others of the quasi-religious joy of creative breakthrough epiphanies. But I never felt alone. AI was like a tireless expert companion.

You can fall out with companions on a long journey. The same can happen with AI. So you have to remember to be open and sociable. Grok 3 (Grok 3, I tell you) could not solve the problem of getting the nice underline hover effect at the top of these pages working (go on, hover over that 'home' button now to enjoy the result of my hours of suffering). I spent days going around in Dante's rebooted circles of clashing style sheet hell. The actual solution I will come to shortly, but I learned I needed another companion on my digital pilgrimmage. There, when I needed help most, was my elegant acquaintance, Mr Claude, Esq. Without a grumble he tirelessly guided me through the twists and turns with patience and precision. At the risk of sounding rather nerdish, when those hover underline effects finally worked, I was unnaturally overjoyed. Patience has its own rewards, indeed. So one of the AIs will probably be able to turn a daunting task into the wonderful experience that I would encourage any aspiring creator to embrace, but be flexible. Unless you have several thousand pounds/dollars burning a hole in your pocket and want an easy life.

Recommendations: Laying the Foundation with Branding

Before you dive into coding, let's talk about branding—your online identity's heartbeat. If you haven't considered it yet, now's the perfect time! A strong brand is the cornerstone of your digital presence, and it starts with a Brand Style Guide. These used to cost thousands of pounds/dollars and months of design work, but thanks to AI, you can create one for free in just five minutes. Here's how:

Create Your Author Style Guide

Fill out a simple form with the details below and hand it over to your AI. It will generate a cohesive style guide tailored to your vision—perfect for authors, businesses, or any creative endeavor. The magic lies in the colour palette: provide AI with one principal colour shade, and it will craft a complementary set of secondary and accent colors to bring your brand to life. Once you have your colours, your main font and your contrasting secondary font, you are in business.

Basic Style Guide Creation List

1. Author's Personal Information
   • Full Name and Pen Name: Include your real name and any pen name, along with the reasons behind your choice.
   • Background and Biography: Highlight key life experiences, career milestones, and influences that shape your work.
   • Personality and Values: Define your core values (e.g., authenticity, adventure) and unique traits that define you.
2. Literary Style and Genre
   • Genres: List your writing genres (e.g., travel anthologies, fiction, non-fiction).
   • Writing Style: Describe your tone—witty, reflective, bold—and any distinctive voice.
   • Target Audience: Identify your readers' demographics (age, location) and psychographics (interests, values).
3. Existing Works and Themes
   • Published Works: Share titles, cover images, and brief summaries of your books (e.g., Pills and Presidents).
   • Recurring Themes: Note common motifs, like resilience or global exploration, in your storytelling.
4. Brand Goals and Vision
   • Objectives: Set goals like growing your readership or establishing authority.
   • Long-term Vision: Envision how your brand might evolve—perhaps into a multimedia empire!
5. Market Position and Competitors
   • Competitive Analysis: Study other writers in your niche and their branding.
   • Unique Selling Proposition (USP): What sets you apart? My global adventures and pharmacist-turned-storyteller journey, perhaps?
6. Preferred Branding Elements
   • Visual Identity: Choose logo ideas, color schemes (e.g., my #005C78 and #F5A623), fonts, and imagery.
   • Voice and Messaging: Decide on a tone—casual like a travel companion or authoritative like a seasoned pro.
   • Taglines and Slogans: Craft a catchy phrase, like "Stories from the Edge of the World."
7. Digital Presence
   • Current Platforms: List your website, social media (X, Instagram), and online interactions.
   • Content Strategy: Plan blogs, newsletters, or videos to engage your audience.
8. Marketing and Promotion
   • Marketing Channels: Consider social media, email campaigns, or virtual book tours.
   • Partnerships: Explore collaborations with travel influencers or literary communities.
9. Audience Engagement
   • Interaction Style: Will you host Q&As or share behind-the-scenes stories?
   • Feedback and Reviews: Embrace reader input to refine your brand.

Gathering this info might feel like a chore, but it's the bedrock of a brand that authentically represents you, resonates with your readers, and fuels your professional goals.

Choosing the Right Website Platform

Next, decide on your website's platform—a critical choice that shapes its look and feel. Research options like Bootstrap, Tailwind CSS, or WordPress, or ask AI to compare them. These are frameworks and libraries that unlock effects like animated pages, theme colors, and hover interactions. Once you pick one (I chose Tailwind CSS for its flexibility), brush up on its basics. Watch tutorials or let AI explain the essentials—knowledge is your superpower here! You can also use AI to create your own basic course in the essentials of whatever system you plan to use.

Incremental Development: Building Step by Step

Website creation is a journey of incremental development. Start by sketching your structure—ask AI for suggestions if needed. Will your contact form sit at the bottom or near the top? Should you kick off with a captivating video or a striking image? How many sections will you include, and what content will fill them? For me, this site began with a desert image from my travels, setting the tone for my anthology and my story-driven services.

Expect Hiccups

Be prepared for bumps along the road. As I mentioned earlier, I hit a snag with Tailwind CSS. It turned out that version 4, with its 'updated behaviors' didn't 'align with my needs' (this is a euphemism for the fact that it didn't 'effing work). AI was stumped (Grok 3, I tell you!). In my desperation, I turned to YouTube (remember them?). In a starburst of digital irony, a YouTuber from India—where else?—solved what 100,000 H100 GPU processor chips couldn’t! He found that a downgrade to Tailwind 3 solved my problem. I felt like John Lennon when he first discovered the Maharishi Mahesh Yogi. Suddenly, everything clicked! Later, after the high, the low: I could not find a way to stop my website building program, 'Pinegrow' from overwriting my tailwind code and introducing errors. We parted ways. Now it is VS Code (free from Microsoft) which is a much more raw coding environment. But, thanks to the hand-holding from AI, I'm a big boy now. So, that's just a reminder to stay flexible and seek AI PLUS community wisdom.

Hosting and Uploading Your Site

Once your site is ready, you'll need a web host. I opted for Namecheap—I love the name! Can you imagine the brainstorming for that. "Namecheap!" "Um, doesn't that sound a bit uh 'cheap'" "Well, yeah, duh, that's because we are..." I find they deliver on their promise, supplying domains and hosting with great support (And no, I am not 'affiliated' although I am here if they want to reach out 😀). Connecting to your host and uploading files involves FTP (File Transfer Protocol). My go-to is the open-source FileZilla, which simplifies the process. There's some technical learning curve with FTP and remote servers, but AI can quickly guide you with clear, non-technical explanations.

Embrace the Revolution

And there you have it—your gateway to a self-made digital haven! Building a website with AI is a revolution in creativity and control. It's challenging, rewarding, and, above all, fun. But it might not suit those of a nervous disposition. So, for the rest, grab your virtual passport, dive in, and create something extraordinary. Welcome to the revolution!