DEV Community

uuware
uuware

Posted on

Lupine.Press + AI: Create Your Technical Documentation Website in Minutes

#ai #documentation #showdev #webdev

Lupine.Press: Writing Documentation No Longer Painful

With the help of AI, writing documentation is really no longer a painful thing. I love technology and love writing documents, but I'm particularly lazy about writing documents. Writing documents is boring and very tedious. But now it's different. No matter how much code you have or how complex it is, AI can sort it out in minutes. AI is also particularly good at writing Markdown documents. So how do you turn the Markdown written by AI into a beautiful one that can be hosted for free on Github or Cloudflare? This article is about how to use Lupine.Press (built on Lupine.js) to quickly create a technical documentation website.

Lupine.Press is a documentation framework built on Lupine.js, inheriting the latter's "ultra-lightweight" and "high-performance" DNA. It lets you build professional, responsive, and multi-language documentation sites with simple Markdown.

lupine.press

To give you a better idea of what you can build, we have prepared a complete demo project. You can visit the repository or fork it directly as your starting point:

You can also view the live demo here:

Why Choose Lupine.Press?

1. ⚡ Incredible Speed

Need I say more? Based on the Lupine.js core (only 7kb), your documentation site will load incredibly fast. No bloated hydration process, content appears instantly.

2. 📝 Markdown-Driven Just Works

In Lupine.Press, file structure is routing.

  • Just drop a guide.md in the directory, and it automatically becomes the /guide page.
  • Sidebar configuration? Write it directly in the Frontmatter of index.md.
  • Multiple languages? Just create en and zh folders, and the framework automatically handles switching.

3. 🎨 Professional Design Out-of-the-Box

You don't need to know CSS to have a beautiful documentation site. The PressFrame component comes built-in with:

  • Responsive Sidebar: Automatically collapses on mobile.
  • Light/Dark Mode: Follows system preference or switch manually.
  • Syntax Highlighting: Built-in support.

4. 🛠️ Flexible Extensibility

Although it's lightweight, it's not "rigid". Because fundamentally it is a Lupine.js application. You can always:

  • Use TSX syntax to write React-style components.
  • Add custom pages with any styles.
  • Add any styles to override existing styles.

Deployment Hack: SPA on GitHub Pages?

As we all know, static hosting services like GitHub Pages are not friendly to Single Page Applications (SPA). Because they don't know that /guide/started should actually point to index.html, they often return a 404 directly.

Lupine.Press provides a clever solution.

The Smart 404.html

We have built-in magical code in docs/404.html:

<script type="text/javascript">
  // Single Page Apps for GitHub Pages
  if (window.location.pathname.includes('/lupine.js/')) {
    // Take the current path as a parameter and redirect back to the homepage
    window.location.href = '/lupine.js/?redirect=' + window.location.pathname;
  }
</script>
Enter fullscreen mode Exit fullscreen mode

Combined with the frontend routing's automatic recovery logic, this means:

  1. User visits deep link /guide/started.
  2. GitHub Pages returns the 404 page.
  3. Script immediately redirects the page to /?redirect=/guide/started.
  4. Lupine.js app starts, reads the redirect parameter, and seamlessly restores the page the user wanted to see.

The result: You can host a perfectly experienced SPA documentation site on GitHub Pages for free!

Quick Start

Get your documentation site with just one command:

npx create-lupine@latest my-docs
# Select 'doc-starter' template
Enter fullscreen mode Exit fullscreen mode

Start the project:

cd my-docs
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Now, focus on writing!

Deploying to GitHub Pages

Under apps/[your-project-name]/web, you will find a folder named github-pj-name. Please rename this folder to your actual GitHub repository name. Next, perform a global search for github-pj-name and replace all occurrences with your GitHub repository name. This is necessary because GitHub Pages uses the URL structure [github-account].github.io/[github-repository-name]/.

After editing your documentation, run npm run build. Once you confirm there are no compilation errors, run npm run cp-docs. This command copies the static files from the build directory to the /docs directory. Commit and push all changes to your GitHub repository. Then, go to your repository's Settings > Pages. Under "Build and deployment", select the main branch and the /docs folder, then click Save. You will soon be able to access your documentation site at https://[github-account].github.io/[github-repository-name]/.

If you want to display this link in the "About" section of your repository, click the settings icon (gear) next to "About", and check "Use your GitHub Pages website".

Summary
Lupine.js (including Lupine.Press) is under active development. If you are interested, please give Lupine.js a star on GitHub, which is the greatest encouragement to us!

👉 https://github.com/uuware/lupine.js

Top comments (0)