The smallest upgrade path from blog to technology platform (3): Build a platform-based homepage - let readers go from 'seeing' to 'discovering'

Writing Statement This article is based on the author’s practical experience of reconstructing the blog homepage three times. The design decisions involved come from real reader feedback and behavioral observations.

---

Introduction: The homepage is not the starting point of the article, but the entrance to content discovery.

After the theming and tagging system was completed, I started rebuilding the homepage.

The initial idea is simple: since there are topics, let’s display the topic list on the homepage. So the homepage became like this:

[Blog title]

Topic list:
- AI Engineering Practice
- Backend Engineering
- Agent System Building
- ...

Latest posts:
- Post 1
- Post 2
- Post 3

It looks neat and organized, but readers reported a problem:

“Every time I open the homepage, I have to first think about which topic I should enter. Sometimes I just want to see what you have written recently, but the topic list blocks the latest content.”

The core of the problem: I confused “category navigation” and “content discovery”.

The topic list is suitable for readers with a clear goal (“I want to read AI-related content”), but most readers who visit the homepage are in a “casual look” state. What they need is a content discovery interface, not a category directory.

---

Problem Diagnosis: Why traditional blog homepage fails

The default structure of a traditional blog homepage

The home page of most blog templates follows the same pattern:

Latest posts (reverse chronological)
├── Post 1()
├── Post 2
├── Post 3
├── ...
└── pagination → older posts

This structure makes three assumptions:

1. Time is the dimension that readers are most concerned about → In fact, readers are more concerned about “whether it is relevant”
2. Readers will read in order → Readers will actually skip to read
3. New articles are valuable to everyone → In fact, new and old readers have different needs

Core differences in technology platform homepages

The homepage design of a technology platform needs to solve a more complex problem: How ​​to allow different types of readers to find content that suits them.

Diversity of Reader Types:

• New readers: I don’t know who you are and want to quickly understand “what does this person write”
• Old readers: I want to see what you have updated recently
• Target Reader: Come with a specific question (e.g. “RAG Deployment”)
• Exploratory readers: want to learn about a certain field (such as “AI Engineering”)

Key Design Principle: The homepage should offer multiple paths, not a single path.

---

Framework design: four-layer content discovery system

After trial and error, I designed a “four-layer content discovery system” for the homepage:

The first level: Featured content

Target Readers: New readers visiting for the first time

Design Intent: Use the best quality content to establish a first impression and demonstrate the value proposition of the blog

Content Selection:

• 3-6 representative articles
• Covering different thematic areas
• Balance depth and readability

Implementation:

# Post frontmatter
---
title: "xxx"
featured: true  # featured marker
---

// Home pageget featured posts
const featuredPosts = await getCollection('blog')
  .filter(post => post.data.featured)
  .slice(0, 6);

Second level: Topic entrance (Topics)

Target Readers: Exploratory readers with field interests

Design Intent: Provide a browsing path by technical area

Display Strategy:

• Show topic title + short description
• Display the number of articles under this topic
• Highlight popular or recommended topics

<section class="topics-section">
<h2>Topic</h2>
  <div class="topic-grid">
    {topics.map(topic => (
      <a href={`/topics/${topic.slug}`} class="topic-card">
        <h3>{topic.data.title}</h3>
        <p>{topic.data.description}</p>
        <span>{topic.postCount} posts</span>
      </a>
    ))}
  </div>
</section>

The third layer: latest update (Latest)

Target Readers: Returning regular readers

Design Intention: Meet the need of “see what has been updated recently”

Key Design:

• Limit the number of articles (4-6 articles), no infinite scrolling
• Clearly mark release time
• Provide a “view all” entry link

Why is the quantity limited:

• Old readers only care about the “recent” and do not need historical archiving.
• Too many recent articles crowd out other discovery paths
• The complete history list has a dedicated “/blog” page

The fourth level: Quick Index (Quick Index)

Target Reader: Target readers with specific questions

Design Intent: Provide metadata entrances such as tags and classifications

Content Composition:

• Popular tags (top 10-15 high frequency tags)
• Content classification (by article type such as tutorials, guides, explanations)
• Recommended reading path (if any)

---

Page structure: from linear to grid layout design

Problems with traditional linear layout

[Header]

[Hero area]

Latest posts
- Post 1
- Post 2
- Post 3
...

[Footer]

The reader has only one path: scroll down. What you see depends on what you’ve written recently.

Grid layout of platform homepage

[Header - ]

[Hero - value proposition + search entry]

[Featured content - horizontal cards]
┌─────────┐ ┌─────────┐ ┌─────────┐
│ Post 1  │ │ Post 2  │ │ Post 3  │
└─────────┘ └─────────┘ └─────────┘

[Topic entry - grid layout]
┌─────┐ ┌─────┐ ┌─────┐
│topic│ │topic│ │topic│
└─────┘ └─────┘ └─────┘

[Recent updates - two-column list]
┌──────────┐ ┌──────────┐
│ Post 4   │ │ Post 5   │
├──────────┤ ├──────────┤
│ Post 6   │ │ Post 7   │
└──────────┘ └──────────┘

[quick index]
tag cloud + category entry + RSS

[Footer]

Key changes:

• Each block is an independent entrance
• Readers can “jump horizontally” at any level
• Different blocks serve different types of readers

---

Practical code: Astro home page implementation

1. Data acquisition layer

---
// src/pages/index.astro
import { getCollection } from 'astro:content';

// fetch all data in parallel
const [
  featuredPosts,
  recentPosts,
  topics,
  tagCounts
] = await Promise.all([
  // featured posts, up to 6
  getCollection('blog')
    .then(posts => posts
      .filter(p => p.data.featured)
      .slice(0, 6)
    ),

  // latest posts, 4
  getCollection('blog')
    .then(posts => posts
      .sort((a, b) => b.data.pubDate - a.data.pubDate)
      .slice(0, 4)
    ),

  // Topic list
  getCollection('topics'),

  // tag statistics
  getTagCounts(),
]);
---

2. Hero area

<section class="hero">
  <div class="hero-content">
    <h1>A personal knowledge base organized around technical topic paths</h1>
    <p>Covers backend engineering, AI engineering, distributed systems, and related domains</p>
    <div class="hero-actions">
      <a href="/topics" class="btn-primary">Browse topics</a>
      <a href="/guides" class="btn-secondary">View guides</a>
    </div>
  </div>
</section>

3. Featured content block

<section class="featured">
  <div class="section-header">
    <h2>Featured content</h2>
    <p>Start with these representative pieces</p>
    <a href="/blog">Browse all writing →</a>
  </div>

  <div class="featured-grid">
    {featuredPosts.map(post => (
      <article class="featured-card">
        <span class="topic-badge">{post.data.topic}</span>
        <h3><a href={`/blog/${post.slug}`}>{post.data.title}</a></h3>
        <p>{post.data.description}</p>
        <div class="meta">
          {post.data.tags.slice(0, 3).map(tag => (
            <span class="tag">{tag}</span>
          ))}
        </div>
      </article>
    ))}
  </div>
</section>

4. Topic entrance block

<section class="topics">
  <div class="section-header">
<h2>Topic</h2>
    <p>Browse content by technical domain</p>
    <a href="/topics">View all topics →</a>
  </div>

  <div class="topic-grid">
    {topics.map(topic => (
      <a href={`/topics/${topic.slug}`} class="topic-card">
        <h3>{topic.data.title}</h3>
        <p>{topic.data.description}</p>
        <span class="count">{topic.postCount} posts</span>
      </a>
    ))}
  </div>
</section>

5. Latest update block

<section class="latest">
  <div class="section-header">
    <h2>recentUpdate</h2>
    <p>Recently published content</p>
  </div>

  <div class="latest-grid">
    {recentPosts.map(post => (
      <article class="latest-card">
        <div class="meta">
          <span class="topic">{post.data.topic}</span>
          <time>{formatDate(post.data.pubDate)}</time>
        </div>
        <h3><a href={`/blog/${post.slug}`}>{post.data.title}</a></h3>
        <p>{post.data.description}</p>
      </article>
    ))}
  </div>
</section>

6. Fast index block

<section class="quick-index">
  <div class="tags-section">
    <h3>Popular tags</h3>
    <div class="tag-cloud">
      {tagCounts.slice(0, 12).map(([tag, count]) => (
        <a href={`/tags/${tag}`} class="tag">
          {tag} <span>{count}</span>
        </a>
      ))}
    </div>
    <a href="/tags">View all tags →</a>
  </div>

  <div class="categories-section">
    <h3>category entry</h3>
    <div class="category-list">
      <a href="/categories/interpretation">Original interpretations</a>
      <a href="/categories/guide">Practice guides</a>
      <a href="/categories/tutorial">Beginner tutorials</a>
    </div>
  </div>
</section>

---

Design Decision: Why is it arranged this way?

The order of the homepage blocks is not arbitrary, but based on reader behavior analysis:

sequential decision logic

1. Hero(value proposition)
└─ new readers need to understand "what this place is"

2. Featured content
   └─ build trust by showing the highest-quality content

3. Topic entry
   └─ guide exploration so readers can find domains they care about

4. Recent updates
   └─ serve returning readers while limiting the section so it does not dominate the page

5. quick index
   └─ provide shortcuts for readers who arrive with a specific question

Key trade-offs

Featured vs Latest: Featured is placed first to give new readers the best first impression. Old readers will remember the “/blog” page to directly view the latest content.

Topic vs Tag: The topic is placed first because it is a more stable navigation structure. Tags are more suitable as a way of relating “related articles”.

Limited vs Complete: Each block has a limited quantity, the purpose is to provide an “entry” rather than a “complete list”. There is a dedicated page for the complete list.

---

Common pitfalls and countermeasures

Trap 1: The homepage becomes the “second RSS”

Symptoms: There is only “Latest Articles” on the homepage, and it is very long.

Problem: The organizational advantage brought by thematicization is wasted, and readers still need to search according to their time.

Solution: Strictly limit the number of latest articles (4-6), giving more space to special topics and selections.

Trap 2: Too many blocks lead to decision fatigue

Symptoms: The home page has 8+ sections and readers don’t know where to look.

Problem: Information overload, every path matters means no path matters.

Solution: Merge related blocks and keep the number of core blocks at 4-5.

Trap 3: Mobile experience is ignored

Symptoms: The layout on the desktop is beautiful, but all the blocks on the mobile side are stacked into a very long page.

solve:

• The mobile version reduces the number of cards in each row (3 columns → 1 column)
• Consider collapsing some blocks (such as tag clouds) on mobile
• Make sure all clickable areas have a large enough touch area

---

Verification metrics: How to determine if the homepage design is effective

I validate the homepage design using the following metrics:

1. Bounce rate

Has the home page bounce rate decreased? Ideally, a thematic homepage should result in lower bounce rates because readers have more entry points to choose from.

2. Average number of pages visited

How many pages do readers visit after starting from the homepage? A platform homepage should encourage readers to “explore” rather than “leave after reading an article.”

3. Proportion of topic page traffic

How many readers enter the topic page through the home page? This reflects the effectiveness of the topic entry.

4. Search usage

If search usage is high, it may mean that the navigation design is not intuitive enough (readers cannot find it and can only search).

---

Conclusion: The homepage is the “face” of the product

After completing the home page reconstruction, I received a piece of reader feedback:

“Has your homepage changed? It feels like a real technology platform, not just a personal blog anymore.”

This sentence made me realize: **Homepage design changes not only the appearance, but also readers’ expectations for the value of the content. **

Thematicization gives the content a structure, tags make the content relevant, and homepage design makes these structures perceptible and usable.

In the last article, I will share the complete technical implementation - including the complete configuration of Astro Content Collections, dynamic route generation, and access to the search function.

---

Series of articles

1. From “file pile” to “topicization” - the first principle of blog content organization
2. The Art of Designing Tags and Topics—How to Build a Content Taxonomy That’s Not Cluttered
3. Building a platform-based homepage ← This article
4. Astro + Content Collections Practical Guide

---

Reference resources

• Source code of this blog: GitHub repository
• Astro documentation: Content Collections
• Information architecture reference: “Information Architecture” by Louis Rosenfeld