Using AI to Build This Blog

This blog was an experiment in AI-assisted development. Every aspect except the content was created through conversation with AI, specifically Claude via the Cursor editor. Here’s how it was built:

The Tools

  1. Cursor Editor - A code editor with built-in AI capabilities
  2. Claude (via Cursor) - Anthropic’s AI assistant that helped generate the code
  3. Hugo - The static site generator
  4. GitHub Pages - For hosting

The Process

The entire development process was conversational. I would describe what I wanted, and Claude would suggest implementations. Here’s a typical workflow:

  1. I’d request a feature: “Let’s create a blog with a custom theme”
  2. Claude would suggest the initial structure
  3. We’d iterate through improvements
  4. I’d provide feedback, and Claude would adjust the code

Key Conversations

Here are some of the actual prompts I used:

"Create a custom Hugo theme from scratch"
"Add a highlighted posts section to the homepage"
"Change the color scheme to something modern"
"Help me set up GitHub Pages deployment"
"Create me a footer with the following information:
1. Link to my github: https://github.com/rexposadas
2. Show my email: rexposadas@gmail.com
3. Linked to my linkedin: https://www.linkedin.com/in/rexposadas/"

Sometimes, the theme needed adjustments. Here’s an example of a refinement prompt:

"Make further changes.
In the posts page:
1. Add a hero image beside each of the post. Adjust the size of the image accordingly.
2. Add a 'Read More' button below each of the post.
3. Remove the summary section from each post preview in the post page."

Each conversation led to code generation and refinements. The AI was particularly good at:

  • Suggesting complete file structures
  • Writing consistent CSS
  • Implementing Hugo templates
  • Fixing bugs
  • Suggesting improvements
  • Making iterative refinements to existing features

The Theme Development

The theme was built iteratively through conversations. Some key features we added:

  • Responsive design
  • Featured posts section
  • Image support
  • Modern color scheme
  • Clean typography

Each feature was added through a series of prompts and responses, with Claude suggesting code and explaining the changes.

Deployment Setup

Even the deployment was AI-assisted. Claude helped create:

  • GitHub Actions workflow
  • Deployment script
  • Configuration files
  • Documentation

Lessons Learned

  1. AI as a Coding Partner: The AI served as both a coding assistant and a technical advisor
  2. Iterative Development: The conversational nature led to quick iterations
  3. Learning Opportunity: The AI explained each change, making it educational
  4. Efficiency: Development was significantly faster than traditional coding

Code Examples

Here’s how we added the highlighted posts feature:

{{ range where (where .Site.RegularPages "Section" "posts") "Params.highlight" true }}
<article class="post-card highlight">
    <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
    {{ if .Summary }}
    <p class="summary">{{ .Summary }}</p>
    {{ end }}
</article>
{{ end }}

Conclusion

Building this blog with AI was an experiment in modern development workflows. It showed that AI can be a powerful tool for:

  • Rapid prototyping
  • Learning new technologies
  • Implementing best practices
  • Solving technical challenges

The entire source code is available on GitHub, demonstrating what’s possible with AI-assisted development.