DEV Community: uuware

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

uuware — Wed, 04 Mar 2026 12:25:58 +0000

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.

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:

Source Repository: https://github.com/uuware/lupine-template-doc-starter

You can also view the live demo here:

Live Demo: https://uuware.github.io/lupine-template-doc-starter/

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>

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

User visits deep link /guide/started.
GitHub Pages returns the 404 page.
Script immediately redirects the page to /?redirect=/guide/started.
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

Start the project:

cd my-docs
npm install
npm run dev

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

10 Minutes! Build a Stunning Personal CV Website with Markdown

uuware — Sun, 15 Feb 2026 00:49:34 +0000

Finding a good job starts with a great CV. If you can turn that CV into a professional personal website, it's even better and sure to catch a recruiter's eye.

This article introduces how to use the CV Starter template provided by the Lupine.js framework to generate a beautiful, responsive resume website just by writing simple Markdown files. It comes with black and white theme switching, multi-language support, and can be hosted for free on GitHub Pages.

Why Choose Lupine CV Starter?

Minimalist Markdown: Focus on content, writing your CV just like writing a document.
Beautiful Design: A fresh and professional default theme that supports both Light and Dark modes.
Multi-language Support: Easily build bilingual resumes to show your international perspective.
Mobile Responsive: Perfectly adapted for mobile desktops, displaying elegantly anytime, anywhere.
Free Hosting: Pure static pages that can be deployed directly to GitHub Pages with zero cost.

🚀 Quick Start

1. Create Project

Initialize your CV project with just one command:

npx create-lupine@latest my-cv

Select the cv-starter template when prompted.

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:

Source Repository: https://github.com/uuware/lupine-template-cv-starter
You can also view the live demo here:

Live Demo: https://uuware.github.io/lupine-template-cv-starter/

2. Start Preview

Enter the project directory and start the local development server:

cd my-cv
npm install
npm run dev

Now, open your browser and you'll see a complete resume prototype containing Profile, Experience, Projects, Skills, and Education sections!

📝 Customize Your CV

The template has already pre-set a standard resume structure for you; you only need to add, delete, or modify it according to your situation.

Modify Content

All content is located in the web/markdown directory.

en/: English version content
xx/: Any Language version content

You can modify the Markdown files directly. Even better, you can carefully write just one language version (like English) and let AI help you translate it into another language. Current AI is very good at handling Markdown formats and translation quality is usually high, saving you a lot of time.

Manage Directory & Sidebar

When you add or delete a page (e.g., adding an "Open Source" section), you need to tell the website how to display the sidebar navigation.

Open the index.md file under the language root directory (e.g., web/markdown/en/index.md) and modify the sidebar configuration:

sidebar:
  - text: Details
    items:
      - /en/01-experience/index
      - /en/02-projects/index
      - /en/03-skills/index
      - /en/04-education/index
      # - /en/05-open-source/index  <-- New page

After saving the file, the browser page will update automatically. What you see is what you get.

Configure Top Navigation (Optional)

Since resumes usually don't contain many pages, the template does not enable the top navigation menu by default. If you want to show navigation at the top of the page, you can add the nav configuration in index.md:

nav:
  - text: Experience
    link: /en/01-experience/index
  - text: Projects
    link: /en/02-projects/index

This way, your configured menu items will appear on the left side of the Header.

Personalization Settings

In the Frontmatter of index.md, you can make more personalized settings.

GitHub Link

The right side of the Header shows the GitHub project link by default. If you want to modify or hide it:

# Modify link
github-title: View on GitHub
github-link: https://github.com/yourusername/my-cv
# Or delete these two lines directly to hide

Custom Styles

Want to change the theme color? Want to adjust the sidebar width? No problem! You can directly override CSS variables via the styles attribute in index.md:

styles:
  ':root': { '--primary-accent-color': '#0ac92a' } # Change primary color to green
  # body: { font-family: 'Inter', sans-serif; }    # Change global font

For more style configurations, please refer to this introduction about Lupine.Press.

Conclusion

Using Lupine.js to build a resume website not only showcases your professional skills, but the act itself also demonstrates your passion and pursuit of technology.

Lupine is under active development. Welcome to GitHub to follow us and check our code frequency and contributions:

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

Wish you get your dream Offer soon!

Lupine.js - The Lightweight Frontend & Efficient Backend Framework

uuware — Sun, 08 Feb 2026 05:38:48 +0000

Introducing Lupine.js: The "Unreasonably" Efficient Web Framework

In a world dominated by massive meta-frameworks and complex build chains, Lupine.js asks a simple question: What if we could have the power of a modern full-stack framework without the bloat?

Lupine.js is a lightweight (7kb gzipped), full-stack web framework that combines a React-like frontend with an Express-like backend. It is designed from scratch for speed, simplicity, and efficiency.

Why Lupine.js?

1. 🪶 Extremely Lightweight Frontend

The lupine.web frontend package is tiny—just 7kb gzipped. Yet, it retains the developer experience you know and love: TSX syntax (React JSX), components, and hooks. There is no heavy runtime to download, meaning your pages load instantly even on slow connections.

2. ⚡ Built-in Server-Side Rendering (SSR)

Most frameworks treat SSR as an add-on. In Lupine, SSR is a first-class citizen. The lupine.api backend is optimized to render your frontend pages on the server automatically.

No FOUC: Critical CSS is injected server-side.
Zero-Config SEO: Meta tags (og:image, description) are calculated before the page leaves the server.
Sharing Ready: Your links look great on Twitter/Facebook out of the box.

3. 🎨 Native CSS-in-JS Engine

Say goodbye to configuring PostCSS, Tailwind, or styled-components. Lupine includes a powerful CSS-in-JS engine built right in.

Scoped Styles: Styles are automatically scoped to your component.
Nesting: Support for .parent & syntax.
Performance: Styles are extracted and injected efficiently during SSR.

const Button = () => {
  const css = {
    backgroundColor: '#0ac92a',
    '&:hover': {
      backgroundColor: '#08a823',
    },
  };
  return <button css={css}>Click Me</button>;
};

4. 🚀 Full-Stack in One Place

Lupine isn't just a frontend library; it's a complete app solution.

Backend (lupine.api): An efficient, minimalist Node.js framework similar to Express.
Frontend (lupine.web): A reactive UI library.
Dev Experience: Run npm run dev and debug both frontend and backend in a single VS Code session.

Quick Start

Ready to give it a try? You can scaffold a new project in seconds.

Step 1: Create a Project

Use our CLI tool to create a new app.

npx create-lupine@latest my-awesome-app

Step 2: Run it

Enter the directory and start the dev server.

cd my-awesome-app
npm install
npm run dev

Visit http://localhost:11080 and you'll see your first Lupine app running!

Code Frequency & Activity

Lupine is actively developed. You can check our code frequency and contributions directly on GitHub:
👉 https://github.com/uuware/lupine.js

Conclusion

Lupine.js is perfect for developers who want:

Control: Understand every part of your stack.
Speed: Deliver the fastest possible experience to users.
Simplicity: No hidden magic, just clean code.

Give Lupine.js a star on GitHub and try it for your next project!

DEV Community: uuware

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

Lupine.Press: Writing Documentation No Longer Painful

Why Choose Lupine.Press?

1. ⚡ Incredible Speed

2. 📝 Markdown-Driven Just Works

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

4. 🛠️ Flexible Extensibility

Deployment Hack: SPA on GitHub Pages?

The Smart 404.html

Quick Start

Deploying to GitHub Pages

10 Minutes! Build a Stunning Personal CV Website with Markdown

Why Choose Lupine CV Starter?

🚀 Quick Start

1. Create Project

2. Start Preview

📝 Customize Your CV

Modify Content

Manage Directory & Sidebar

Configure Top Navigation (Optional)

Personalization Settings

GitHub Link

Custom Styles

Conclusion

Lupine.js - The Lightweight Frontend & Efficient Backend Framework

Introducing Lupine.js: The "Unreasonably" Efficient Web Framework

Why Lupine.js?

1. 🪶 Extremely Lightweight Frontend

2. ⚡ Built-in Server-Side Rendering (SSR)

3. 🎨 Native CSS-in-JS Engine

4. 🚀 Full-Stack in One Place

Quick Start

Step 1: Create a Project

Step 2: Run it

Code Frequency & Activity

Conclusion

The Smart `404.html`