Skip to content

Preview a static site ​

Goal: place a complete HTML file in the workspace and verify files, requests and JavaScript through the mini server. Node, Termux and Linux are unnecessary.

Open
View on GitHub

Files ​

Download the static-site ZIP, extract it and place index.html in an empty workspace, or copy the complete source:

html
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lyra Code Preview</title>
  <style>
    :root { font: 18px/1.6 system-ui, sans-serif; color: #17213d; background: #f4f6fc; }
    body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
    main { max-width: 32rem; margin: 1.5rem; padding: 2rem; background: white; border-radius: 1rem; }
    button { font: inherit; padding: .6rem 1rem; background: #3659d9; color: white; border: 0; border-radius: .5rem; cursor: pointer; }
    button:focus-visible { outline: 3px solid #b15316; outline-offset: 4px; }
    output { font-weight: bold; }
  </style>
</head>
<body>
  <main>
    <h1>Hello, Lyra Code!</h1>
    <p>网页已从工作区加载。This page runs without a build step.</p>
    <button id="counter" type="button">点击计数 / Count</button>
    <p aria-live="polite">Count: <output id="value">0</output></p>
  </main>
  <script>
    let count = 0;
    document.querySelector('#counter').addEventListener('click', () => {
      document.querySelector('#value').textContent = String(++count);
    });
    console.info('Lyra preview ready');
  </script>
</body>
</html>

Run and verify ​

  1. Select the directory containing index.html and check the mini-server root.
  2. Start local HTTP and open the reported URL.
  3. Confirm Hello, Lyra Code! and initial Count: 0.
  4. Click three times to get Count: 3; refreshing should reset it to 0.
  5. Check successful page requests and absence of related JavaScript errors.

These checks establish file origin, script execution and refresh behavior. State is in memory, without a database or local storage.

Ask for a small change ​

Add a Reset button to index.html in the current workspace that sets the count to 0. Keep the existing button, use plain JavaScript and install no dependencies. Read back the relevant code, show the diff and list browser acceptance steps.

Verify count three times → reset to 0 → click once to 1 → refresh to 0. If content is stale, check workspace, server root and refresh. For connectivity problems, see Local services.

Lyra Code. All rights reserved.