Create a web wiki of your favorite game or content following these steps (and with AI)

In this article you'll find a clear, actionable guide to building a modern wiki with shareable search, reusable galleries, detail pages, interactive map, and a trivia minigame. All with Vite + React Router and a boost from AI.

Below I will show you how I made mine based on one of my favorite video games: Hollow Knight .

You can access the Wiki from the following links to view the result and all the content in full before explanation: 

• REPOSITORY ON GITHUB
• WIKI WEB LINK

From the Idea to the Living Site

Creating a wiki is like setting up a thematic museum: you choose the collection (your theme), you design the route (the navigation) and curate each piece (the detail pages).

The good news?

Today you can build it quickly with Vite + React, publish it for free on GitHub Pages and enrich it with “surprise” features such as interactive maps, shareable search by URL and a trivia mini-game to learn by playing.

The technical guide you have at hand already gives you the skeleton with routes, styles, image loading and deployment, so you can replicate the project from scratch without getting lost in the configuration.

Why a wiki with the help of AI?

AI can help structure and draft the wiki, and support review as the content grows. Quality still depends on checking its suggestions. Here are some practical uses:

• You start faster: The AI suggests an initial index and helps you organize ideas. You go from “I have a lot of notes” to “I already have a structure.”

• You write more fluently: Convert loose notes into clear texts with the same tone. You decide the style; AI helps you maintain it.

• Everything is more uniform: Provide titles, slugs, and short summaries to make lists look clean and easy to navigate.

• Less errors, more care: It can help spot typos and missing image descriptions. Checking broken links requires access to those links or a tool that verifies them.

• Gives you new ideas: Suggest trivia questions, search synonyms, and little improvements you hadn't thought of.

• You are still in charge: AI accelerates, but does not replace your judgment. You choose what goes in, what gets changed, and how the story is told.

In summary: AI doesn't make the wiki for you; makes it easier, faster and more enjoyable to build.

Quick overview of the project

• Product: site with two main views

  • Wiki: index, galleries by sections and detail pages.
  • Trivia: configurable game (category/difficulty/amount) with results.

• Data: versioned JSON files in the repository.

• Interface- Reusable components and consistent styles.

• Navigation- Clear routes for cover, sections, detail, map and trivia.

• Publication- Ready to easily deploy to GitHub Pages.

• AI: support for structuring, writing and reviewing content.

Once we have a clear idea, we can start creating the folder structure. AI can be a fundamental part of the next step, since it will help you structure it in an efficient way:

Project Start

The first thing we need is to have the base ready to start locally:

• Install dependencies: npm install
• Start the development server: npm run dev
• Production build: npm run build
• Preview the build: npm run preview

Minimum structure we use:

src/main.tsx: mounts the app and applies index.css. 

src/App.tsx: defines routes with React Router.

We use BrowserRouter basename={import.meta.env.BASE_URL} to make it work in GitHub Pages under /repo.

src/index.css: global styles, CSS variables and layouts (grid/gallery, detail, hero, navbar…). Below is a small example of the CSS, (you will find it complete in my GitHub repository):

Routing and Main Pages

Shared components

NavBar.tsx: HOME/WIKI/TRIVIA with NavLink. 

SearchBar.tsx: input which, upon submission, navigates to /wiki?search=… (the URL is the “source of truth”).

Footer.tsx: info that is maintained throughout the wiki.

Page: HOME

Presentation screen with full screen animated background, logo, text, search bar and two CTAs towards the wiki and trivia.

Wiki index: WikiIndex

The Home search takes you to /wiki?search=TERM. The index reads that parameter with useSearchParams, normalizes (lowercase + no diacritics) and filters by title, summary or slug on multiple datasets. Advantage: the search goes in the URL and can be shared or refreshed without losing status.

Section Pages (Lists)

They share a pattern: they assign the section’s background to the CSS variable --page-bg and display the Gallery component with its data and images:

Bosses

List of the game's bosses rated with difficulty stars.

Warrior Dreams

List of dream bosses rated with stars of difficulty.

Variants

List of boss variants rated with difficulty stars.

Charms

List of charms showing how many notches each one uses.

Items

List of items grouped by their function in the game.

Interactive Map

Interactive map with drop-down labels by area. 

The map applies a specific background to the page while it is open. 

The main image is scaled to viewport and you can drag it to move; An invisible stop prevents you from going over the edges. 

Areas are rendered as clickable labels with their own colors. 

The search filters those tags and, when you press Enter, centers the first match and opens its detail (you can also center with ?center=slug). 

The detail panel shows image, summary and lore of the area and can be closed to explore again.

Galleries by category (reusable)

Gallery.tsx: a reusable component that displays cards and links to their detail pages.

• props: title, backTo?, items[{ slug, title, img?, summary?, difficulty?, notches? }], basePath, assetsGlob, resolveBy: "slug"|"filename", showStars?.

• Image: resolves the URL by searching assetsGlob by slug (jpg/png/webp) or by filename; sample fallback with the title if there is no image.

• card: <Link> a ${basePath}/${slug}; figure with backgroundImage, figcaption with title.

• Metadata: if showStars ⇒ stars (1–5) using difficulty; if not ⇒ notches using notches.

• Accessibility/layout: ul.gallery-grid with aria-label; stars and notches with aria-label/title; classes gallery-* for styles.

Detail page: WIKIDETAIL

In /wiki/:group/:slug, WikiDetail.tsx reads parameters, selects dataset and image and renders a two-column layout: large image on the left; to the right DETAILS (e.g. difficulty→stars, effects, drops...) and more information depending on the section. It includes a table pattern that maps each group to its dataset and its image map.

Automatic images per slug (no manual imports)

with import.meta.glob you create maps {path → url} per folder and resolve by slug and extension (.jpg / .png / .webp). It works in dev and build (Vite copies assets with hash).

Trivia: learn by playing

In TriviaStart you configure category/difficulty/quantity, a shuffled deck (Fisher–Yates) is created and played in the same view; upon completion, TriviaResults reads the score from sessionStorage. This version shuffles the questions; answer shuffling can be added later.

Code of Fisher-Yates:

Results page with personalized message depending on the result:

Small part of the code to show the result:

Deploy to GitHub Pages

vite.config.ts (based on subfolder):

Workflow .github/workflows/deploy.yml (build and deployment with Actions), with Pages → Source: GitHub Actions. For SPA, copy index.html to 404.html after building so GitHub Pages can display the app when an internal route is opened directly. This fallback uses the error page and may still return HTTP 404; pre-rendered pages per route are preferable for indexable URLs. Also review the workflow recommended and a checklist (correct base, basename in router, globs to assets, responsive search engine). 

Final tips and how AI comes in

• Ask the AI for initial index (sections, taxonomies, fields) and point out gaps;
• Generate slugs kebab-case and image file names from titles;
• Write summaries of 120–160 characters for cards and 2–3 paragraphs for the detail;
• Create lots of questions (1 correct + 3 distractors) and paste the JSON into questions.json. Shuffling, image loading, and URL searching are already taken care of in the code.
• CODEX can help you develop the wiki; this article teaches you how to get it and use it in VS Code.

Following this structure and the complete project in the repository, you can build a wiki that reads well, is easy to share and invites exploration. 

Add your datasets, name the images by slug, publish with a push and that's it.

If you feel like it, expand categories, add relationships between tiles or more mini-games: architecture is designed to grow.