You want to move your Notion pages to a static site generator like Hugo, Jekyll, or Eleventy. Notion can export pages as HTML files, but the raw export includes extra markup and inline styles that break your site theme. This article explains exactly how to export Notion pages as HTML, what problems the exported files contain, and how to clean and integrate them into a static site build. You will learn the export procedure, the required cleanup steps, and a reliable method to automate the process.
Key Takeaways: Notion to Static Site Generator Workflow
- Settings & Members > Settings > Export: Exports all pages as a single HTML file or a ZIP of separate HTML files with assets.
- Remove inline styles and Notion-specific classes: Strips
styleattributes andnotion-CSS classes that conflict with your site theme. - Use a build script or converter tool: Automates cleanup and converts the exported HTML into Markdown or clean HTML for your static site generator.
How Notion Export HTML Works and What It Produces
Notion exports your workspace or individual pages as HTML files. When you export a full workspace, you get a ZIP archive containing one HTML file per page plus a folder called assets that holds images, PDFs, and other attachments. The HTML files use a strict div-based structure with inline styles and Notion-specific CSS classes such as notion-text, notion-h, notion-list, and notion-column.
This markup is designed to preserve the visual layout inside Notion, not to be clean web content. For example, a heading in Notion becomes <div class="notion-h"><div class="notion-h-title">Heading Text</div></div> instead of a simple <h2> tag. Every paragraph gets a style attribute that sets font size, line height, and color. These inline styles will override your static site generator’s theme styles and make your pages look inconsistent.
Before you can use Notion-exported HTML in a static site generator, you must strip the Notion-specific classes, remove inline styles, and convert the structure to semantic HTML5 tags. You also need to handle relative asset paths so images and files link correctly in your final site.
What a Static Site Generator Expects
Most static site generators, including Hugo, Jekyll, and Eleventy, expect either Markdown files with front matter or clean HTML files. Markdown is the preferred format because it separates content from presentation. If you want to keep HTML, the generator expects standard tags like <h1> to <h6>, <p>, <ul>, <ol>, <img>, and <a> without inline styling. Your theme’s CSS handles all visual formatting. Notion export HTML does not meet these requirements out of the box.
Steps to Export Notion Pages as HTML and Prepare Them for a Static Site
Follow these steps to get clean HTML that works with Hugo, Jekyll, Eleventy, or any other static site generator.
- Export your Notion workspace or page
Open Notion and go to Settings & Members > Settings > Export. Choose HTML as the export format. Select Entire workspace or a specific page. Click Export. Notion downloads a ZIP file containing all pages and an assets folder. - Extract the ZIP archive
Unzip the downloaded file to a folder on your computer. You will see one HTML file per Notion page and anassetssubfolder with images and other files. - Remove inline styles and Notion CSS classes
Open each HTML file in a code editor. Use find-and-replace to remove allstyle="..."attributes. Delete CSS classes that start withnotion-by removingclass="notion-..."from every tag. Replace<div class="notion-h">with the appropriate heading tag, for example<h2>for a level-2 heading. Replace<div class="notion-text">with<p>. - Fix image and attachment paths
Notion export uses relative paths likesrc="assets/image.png". Copy theassetsfolder into your static site’sstaticorpublicdirectory. Update the HTMLsrcandhrefattributes to point to the correct location. For Hugo, place assets in/static/assets/and reference them as/assets/image.png. - Add front matter to each page
If your static site generator uses front matter, add it at the top of each HTML file. For Hugo, add---before the HTML content. For Jekyll, use the same YAML front matter format.
title: "Your Page Title"
date: 2025-01-15
--- - Place files in the correct content directory
Move the cleaned HTML files into your static site’s content folder. For Hugo, put them in/content/posts/or/content/pages/. For Jekyll, use/_posts/with the filename formatYYYY-MM-DD-title.html. - Build and verify your site
Run your static site generator’s build command. For Hugo, runhugo. For Jekyll, runjekyll build. Open the generated site in a browser and check that headings, paragraphs, images, and links display correctly.
Using an Automated Converter Tool
Manually cleaning dozens of HTML files is error-prone. Use a converter tool to automate the process. notion-to-markdown is a Node.js package that converts Notion export HTML into clean Markdown files. Install it with npm install notion-to-markdown. Run it against the extracted HTML files to produce Markdown files with front matter. Another option is notion-export, a Python script that strips inline styles and converts divs to semantic tags. Both tools preserve your content structure and handle asset paths.
Common Problems When Using Notion Export HTML with Static Site Generators
Exported HTML Has No Front Matter
Notion export does not add front matter like title, date, or tags. Your static site generator may ignore pages without front matter or display them without a proper title. Solution: manually add front matter to each file, or use a converter tool that generates front matter from the page title and export date.
Inline Styles Override Your Theme
Every paragraph and heading in Notion export includes a style attribute with font size, color, and line height. These inline styles have higher CSS specificity than your theme’s styles. Solution: remove all style attributes from the HTML before placing files into your static site. A regex find-and-replace for style="[^"]" removes them quickly.
Asset Paths Break After Moving Files
Notion export uses relative paths like assets/image.png. When you move the HTML file to a subfolder like /content/posts/, the relative path no longer points to the correct location. Solution: copy the assets folder into your static site’s root static directory and update paths to absolute URLs like /assets/image.png.
Nested Divs Cause Layout Issues
Notion wraps content in multiple nested div elements. A simple paragraph may be inside three or four divs. Static site generators expect flat semantic tags. Solution: flatten the HTML by removing wrapper divs. Keep only the innermost content tags and convert them to semantic HTML.
Notion Export HTML vs Clean Markdown for Static Sites
| Item | Notion Export HTML | Clean Markdown |
|---|---|---|
| Format | HTML with inline styles and non-semantic divs | Plain text with Markdown syntax |
| Front matter | Not included | Added by converter tools |
| Asset paths | Relative to export folder | Converted to absolute or relative to site root |
| Works with Hugo | Requires manual cleanup | Works directly |
| Works with Jekyll | Requires manual cleanup | Works directly |
| Works with Eleventy | Requires manual cleanup | Works directly |
| Maintenance effort | High for each export | Low after initial converter setup |
You can now export Notion pages as HTML, clean the files, and integrate them into Hugo, Jekyll, or Eleventy. Start by exporting a single page and running the cleanup steps manually to understand the structure. Then set up a converter tool like notion-to-markdown to automate the process for future exports. For large workspaces, consider writing a small build script that runs the converter and copies assets into your static site folder before each build.