How to make a one-page website, from idea to published page.

Step 1 — Decide the page’s one job

A one-page website works best when it has a clear primary outcome. You might want a visitor to understand your services, view selected work, register for an event, or choose your latest link.

Write one sentence: “This page helps this audience understand this offer or topic so they can take this action.” If several unrelated goals compete, decide which one leads.

Step 2 — Draft the content before designing

Start in a plain document. You do not need polished marketing copy, but you do need the real information that makes the page useful.

• A specific H1 and a short supporting introduction
• Three to five concrete value points, services, or selected projects
• Proof you are allowed to publish, such as work, a demonstration, or real experience
• Practical details and answers to common concerns
• One clear next action and an explanation of what happens after it

Remove placeholder claims you cannot support. A smaller amount of specific content is easier to trust than a long page of generic adjectives.

Step 3 — Choose a template by structure

A one page website template should match your content, not just your preferred color. Profile layouts emphasize identity, portfolio layouts emphasize work, link layouts emphasize destinations, and launch layouts emphasize an offer.

Compare the original template structures and imagine your actual copy and images in each one. If the layout needs content you do not have, choose a simpler option rather than inventing filler.

Step 4 — Build and order the sections

Begin with the introduction, then arrange the remaining information in the order a new visitor is likely to need it. A common sequence is context, value, proof, practical details, FAQs, and action.

1. Replace every example heading, paragraph, link, and image with your own material.
2. Remove sections that do not support the page’s main job.
3. Keep related details together and use descriptive section headings.
4. Add anchor navigation only if the page is long enough to benefit from it.
5. Repeat the main action only where a visitor has enough information to use it.

For inspiration, study these annotated one-page website examples and borrow the reasoning rather than another brand’s identity.

Step 5 — Check the mobile experience

Review the entire page at a phone width, not only the hero. Long headings, wide images, dense link groups, and forms often reveal problems on smaller screens.

• Read without pinching or zooming.
• Make buttons and links easy to tap without crowding adjacent actions.
• Check that images crop intentionally and do not hide essential copy.
• Keep forms short and use the correct input types for email, phone, or URLs.
• Test the page on a real connection so oversized media does not surprise you.

Step 6 — Add the search and sharing basics

Give the page a unique title that names its topic and a description that sets a truthful expectation for the click. Keep the visible H1 aligned with that topic rather than writing separate messages for people and search engines.

• Use a self-referencing canonical URL for the public page.
• Add an Open Graph image that remains legible as a small sharing card.
• Write useful alternative text for informative images; decorative images can have empty alt text.
• Compress images and keep essential information as real HTML text.
• Do not add ratings, FAQs, or other structured data that visitors cannot see.

These steps improve clarity and technical accessibility. They do not guarantee indexing, rankings, or traffic.

Step 7 — Publish and test every action

Publish to your OnlyPage address, then open that public URL in a fresh browser window. Test the page as a visitor rather than relying only on the editor preview.

1. Follow every navigation, button, email, and external link.
2. Submit every form and confirm where the response arrives.
3. Check the public page on desktop and mobile.
4. Share the URL in a message and inspect the title, image, and description.
5. Review the page for outdated dates, placeholder copy, and missing contact details.

Your one-page website checklist

Frequently asked questions