{"id":42238034,"url":"https://github.com/kungfux/qupid","last_synced_at":"2026-01-27T03:43:33.319Z","repository":{"id":326725004,"uuid":"1061985641","full_name":"kungfux/qupid","owner":"kungfux","description":"Effortlessly build your product website in minutes using declarative configuration and customizable sections. Deploy the website without storing the source code by using the provided custom action.","archived":false,"fork":false,"pushed_at":"2025-12-22T09:05:42.000Z","size":1392,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-24T17:59:53.897Z","etag":null,"topics":["website-generator","website-template"],"latest_commit_sha":null,"homepage":"https://kungfux.github.io/qupid/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kungfux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-22T16:43:43.000Z","updated_at":"2025-12-15T09:25:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/kungfux/qupid","commit_stats":null,"previous_names":["kungfux/qupid"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/kungfux/qupid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kungfux%2Fqupid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kungfux%2Fqupid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kungfux%2Fqupid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kungfux%2Fqupid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kungfux","download_url":"https://codeload.github.com/kungfux/qupid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kungfux%2Fqupid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28800364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T03:37:11.304Z","status":"ssl_error","status_checked_at":"2026-01-27T03:37:10.427Z","response_time":168,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["website-generator","website-template"],"created_at":"2026-01-27T03:43:32.768Z","updated_at":"2026-01-27T03:43:33.310Z","avatar_url":"https://github.com/kungfux.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"top\"\u003e\u003c/a\u003e\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n\u003cimg src=\"https://github.com/kungfux/qupid/blob/main/public/logo.png\" alt=\"Qupid logo\" title=\"Qupid\" height=\"96\"\u003e\r\n\r\n# Qupid\r\n\r\nEffortlessly build landing page for your product with declarative configuration and customizable sections. Qupid is made to prepare and build the landing page quickly.\r\n\r\nπŸš€ [Demo](https://kungfux.github.io/qupid/) | πŸ“š [Storybook](https://kungfux.github.io/qupid/storybook/) | ⚑️ [Stackbitz](https://stackblitz.com/github/kungfux/qupid?file=configuration.yaml) | πŸ™ [GitHub](https://github.com/kungfux/qupid)\r\n\r\n\\*\\*\\*\r\n\r\nQupid is a React project that is constructed from your configuration definition where you describe what sections of the website you need and in which order. Then, your static website is being generated that you can publish.\r\n\r\n\\*\\*\\*\r\n\r\nAll you need is to choose what sections do you need and specify the content like titles, subtitles, pictures in a single YAML configuration file like below.\r\n\r\n\u003c/div\u003e\r\n\r\n```yml\r\nsite:\r\n title: Qupid\r\n description: \u003e\r\n Effortlessly build landing page for your product\r\n with declarative configuration and customizable sections.\r\n favicon_url: /favicon.ico\r\n\r\nsections:\r\n header:\r\n type: header\r\n hero:\r\n type: hero\r\n features:\r\n type: features\r\n footer:\r\n type: footer\r\n```\r\n\r\n## πŸ“ƒ Table of contents\r\n\r\n- βœ… [Features](#-features)\r\n - πŸ₯‡ [Sections](#-sections)\r\n - πŸ₯ˆ [Built-in capabilities](#-built-in-capabilities)\r\n- πŸš€ [How to Use](#-how-to-use)\r\n - 🧰 [Custom GitHub action](#-github-custom-action)\r\n - πŸ—‚οΈ [Create from template](#️-create-from-template)\r\n- πŸ› οΈ [Configuration](#️-configuration)\r\n - πŸ•ΈοΈ [Site block](#️-site-block)\r\n - πŸ” [SEO settings](#-seo-settings)\r\n - πŸ“Š [Analytics settings](#-analytics-settings)\r\n - 🧱 [Sections block](#-sections-block)\r\n - 🎨 [Theme block](#-theme-block)\r\n - βš“ [Section anchors](#-section-anchors)\r\n - Ⓜ️ [Markdown support](#β“œοΈ-markdown-support)\r\n - πŸ”£ [Font Awesome support](#-font-awesome-support)\r\n - πŸ–ΌοΈ [Images and light/dark themes](#️-images-and-lightdark-themes)\r\n - πŸ“ [Special characters in YAML](#-special-characters-in-yaml)\r\n- 🀝 [Feedback and Contributions](#-feedback-and-contributions)\r\n- πŸ“ƒ [License](#-license)\r\n\r\n## βœ… Features\r\n\r\n### πŸ₯‡ Sections\r\n\r\nQupid comes with pre-built sections that you can use to create your landing page. You can choose which sections to include and in which order. Each section is customizable with various options.\r\n\r\n| Section | Description |\r\n| -------- | --------------------------------------------------------------------------------------------- |\r\n| Header | Top section with logo, title, navigation links, and theme switcher. |\r\n| Footer | Bottom section with logo, description, icon links, and copyright text. |\r\n| Hero | Prominent section with image, title, subtitle, and primary/secondary buttons. |\r\n| Cards | Section with title, subtitle, and multiple cards (icons with title and description). |\r\n| Steps | Section with title, subtitle, and multiple steps (numbered icons with title and description). |\r\n| FAQ | Section with title, subtitle, and multiple questions with answers. |\r\n| Terminal | Section with title, subtitle, and terminal-like code block with optional prompt. |\r\n\r\n\u003e [!TIP]\r\n\u003e See [Storybook](https://kungfux.github.io/qupid/storybook/) for live demo of each section and how to configure them or use [Stackblitz](https://stackblitz.com/github/kungfux/qupid?file=configuration.yaml) to play with the configuration.\r\n\r\n### πŸ₯ˆ Built-in capabilities\r\n\r\n- Responsive design\r\n- Customizable themes (colors, fonts)\r\n- Dark theme support\r\n- Image inversion for light/dark mode\r\n- Markdown support with code highlighting\r\n- Font Awesome support\r\n- SEO optimization with meta tags\r\n- Open Graph tags for better social media sharing\r\n- Analytics integration\r\n\r\n## πŸš€ How to Use\r\n\r\nThere are two main ways to use Qupid to generate your landing page. You can either use the custom GitHub action in your own repository or create a new repository from the template.\r\n\r\n### 🧰 GitHub custom action\r\n\r\nThis option is suitable if you already have a repository for your project and want to add a landing page to it. Assuming you have a repository with some images already that can be used on the website, you can omit storing the Qupid source code in your repository. Instead, you can use the custom GitHub action that will build the website for you.\r\n\r\n1. Enable GitHub Pages in your repository settings.\r\n\r\n- Go to the \"Settings\" tab of your repository.\r\n- Select \"Pages\" from the sidebar.\r\n- Under \"Source\", select \"GitHub Actions\".\r\n\r\n2. Create a new file `.github/workflows/deploy-website.yml` in your repository with the following example content.\r\n\r\n\u003cdetails\u003e\r\n \u003csummary\u003eClick to see example workflow content.\u003c/summary\u003e\r\n\r\n```yml\r\nname: Deploy My Website\r\n\r\non: # Choose when to trigger the workflow on push or manual trigger\r\n push: # Trigger on push to main or master branch\r\n branches:\r\n - main\r\n - master\r\n workflow_dispatch: # Allow manual triggering of the workflow\r\n\r\npermissions:\r\n contents: read\r\n pages: write\r\n id-token: write\r\n\r\njobs:\r\n deploy:\r\n name: Deploy\r\n runs-on: ubuntu-latest\r\n\r\n steps:\r\n - name: Use Qupid\r\n uses: kungfux/qupid@main\r\n with:\r\n # Define your Qupid configuration here as a YAML string\r\n configuration: |+\r\n site:\r\n title: My Website\r\n description: This is my website built with Qupid.\r\n\r\n sections:\r\n header:\r\n type: header\r\n logo:\r\n fa: fa fa-heart\r\n invert_on: light\r\n title: My Website\r\n links:\r\n home:\r\n text: Home\r\n href: '#hero'\r\n features:\r\n text: Features\r\n href: '#features'\r\n get_started:\r\n text: Get Started\r\n href: '#get_started'\r\n faq:\r\n text: FAQ\r\n href: '#faq'\r\n\r\n hero:\r\n type: hero\r\n title: Welcome to My Website\r\n subtitle: The best place to showcase your product.\r\n image:\r\n href: https://www.digitalsilk.com/wp-content/uploads/2020/06/website-development-process-hero-image.png\r\n invert_on: light\r\n primary_button:\r\n text: Get Started\r\n href: #\r\n secondary_button:\r\n text: Learn More\r\n href: #\r\n\r\n features:\r\n type: cards\r\n title: What We Offer\r\n subtitle: Discover the amazing features of our product.\r\n cards:\r\n - title: Easy to Use\r\n description: Simple and intuitive interface for everyone.\r\n icon: fas fa-thumbs-up\r\n - title: Customizable\r\n description: Tailor the product to fit your needs.\r\n icon: fas fa-cogs\r\n - title: Fast Performance\r\n description: Optimized for speed and efficiency.\r\n icon: fas fa-tachometer-alt\r\n - title: Secure\r\n description: Built with security in mind to protect your data.\r\n icon: fas fa-shield-alt\r\n - title: 24/7 Support\r\n description: We're here to help whenever you need us.\r\n icon: fas fa-headset\r\n - title: Affordable\r\n description: Great value for a powerful product.\r\n icon: fas fa-dollar-sign\r\n\r\n get_started:\r\n type: steps\r\n title: Get Started\r\n subtitle: Follow these simple steps.\r\n steps:\r\n - title: Sign Up\r\n description: Create an account to get started.\r\n icon: fas fa-user-plus\r\n - title: Customize\r\n description: Tailor the product to your preferences.\r\n icon: fas fa-sliders-h\r\n - title: Launch\r\n description: Start using the product and enjoy its benefits.\r\n icon: fas fa-rocket\r\n\r\n faq:\r\n type: faq\r\n title: Frequently Asked Questions\r\n subtitle: Got questions? We have answers.\r\n items:\r\n - question: What is this product about?\r\n answer: This product is designed to help you showcase your offerings effectively.\r\n - question: How do I get started?\r\n answer: Simply sign up, customize your settings, and launch!\r\n - question: Is there customer support available?\r\n answer: Yes, we offer 24/7 customer support to assist you.\r\n - question: Can I customize the product?\r\n answer: Absolutely! The product is highly customizable to fit your needs.\r\n - question: What are the pricing options?\r\n answer: We offer various pricing plans to suit different budgets.\r\n\r\n footer:\r\n type: footer\r\n logo:\r\n fa: fa fa-heart\r\n invert_on: light\r\n title: My Website\r\n description: The best place to showcase your product.\r\n copyright: Β© {year} My Website. All rights reserved.\r\n links:\r\n email:\r\n icon: fas fa-envelope\r\n href: 'mailto:'\r\n phone:\r\n icon: fas fa-phone\r\n href: 'tel:'\r\n address:\r\n icon: fas fa-map-marker-alt\r\n href: #\r\n twitter:\r\n icon: fab fa-twitter\r\n href: #\r\n```\r\n\r\n\u003c/details\u003e\r\n\r\n3. Commit and push the changes to your repository.\r\n4. Enjoy your new landing page at `https://\u003cyour-github-username\u003e.github.io/\u003cyour-repository-name\u003e/`.\r\n\r\n### πŸ—‚οΈ Create from template\r\n\r\nIf you want to have a new separate repository for your landing page, you can use the [Qupid template repository](https://github.com/new?template_name=qupid\u0026template_owner=kungfux).\r\n\r\n1. Click on the link to create a new repository from the Qupid template.\r\n2. Name your repository and click \"Create repository\".\r\n3. Enable GitHub Pages in your repository settings.\r\n\r\n- Go to the \"Settings\" tab of your repository.\r\n- Select \"Pages\" from the sidebar.\r\n- Under \"Source\", select \"GitHub Actions\".\r\n\r\n4. Modify the `configuration.yaml` file in the root of the repository to customize your landing page.\r\n5. Commit and push the changes to your repository.\r\n6. Enjoy your new landing page at `https://\u003cyour-github-username\u003e.github.io/\u003cyour-repository-name\u003e/`.\r\n\r\n## πŸ› οΈ Configuration\r\n\r\nConfiguring your landing page is done by YAML notation. If you are not familiar with YAML, you can [Learn YAML in Y minutes](https://learnxinyminutes.com/yaml/).\r\n\r\nConfiguration that describes the structure and the content of the website to be generated should be defined in the `configuration.yaml` file in the root of the project (or in case of using the custom GitHub action, it can be defined directly in the workflow file as a multi-line string). There are 3 main configuration blocks: `site`, `sections`, and optinally `theme`.\r\n\r\n### πŸ•ΈοΈ Site block\r\n\r\n`Site` block is used to define site's title, favicon, base URL and SEO-related settings.\r\n\r\n```yml\r\nsite:\r\n url: https://kungfux.github.io/qupid/\r\n base_url: /qupid\r\n title: Qupid\r\n favicon_url: /favicon.ico\r\n```\r\n\r\n\u003e [!NOTE]\r\n\u003e The `base_url` is required if your website is hosted in a subdirectory like `https://\u003cyour-github-username\u003e.github.io/\u003cyour-repository-name\u003e/` to make sure all links and assets are correctly resolved. Omit it if your website is hosted in the root directory like `https://\u003cyour-domain\u003e/`.\r\n\u003e\r\n\u003e For GitHub Pages, both `url` and `base_url` are being set automatically by the custom GitHub action and the template repository workflow, so these settings can be omitted. In case you use custom domain, you have to set the `url` property accordingly and optionally `base_url` if needed.\r\n\r\n#### πŸ” SEO settings\r\n\r\nSEO settings are optional but recommended to improve your website's visibility on search engines and social media platforms. Each SEO property generates corresponding meta tags in the HTML head section as well as Open Graph tags for better sharing on social media.\r\n\r\n```yml\r\nsite:\r\n seo:\r\n description: Effortlessly build landing page for your product with declarative configuration and customizable sections.\r\n author: kungfux\r\n canonical_url: https://kungfux.github.io/qupid/\r\n image: https://kungfux.github.io/qupid/og-image.png\r\n keywords:\r\n - qupid\r\n - landing page generator\r\n - landing page builder\r\n - static site generator\r\n - static site builder\r\n - product website\r\n - github action\r\n - template repository\r\n```\r\n\r\n#### πŸ“Š Analytics settings\r\n\r\nYou can enable one or more analytics providers to track your website traffic. Just provide the required identifier for each provider you want to use.\r\n\r\n```yml\r\nsite:\r\n analytics:\r\n google: G-XXXXXXXXXX # Google Analytics Measurement ID\r\n cloudflare: YOUR_TOKEN # Cloudflare Web Analytics token\r\n fathom: YOUR_SITE_ID # Fathom Analytics site ID\r\n goatcounter: yoursubdomain # GoatCounter subdomain (without https:// and .goatcounter.com)\r\n matomo: https://matomo.yourdomain.com/YOUR_SITE_ID # Matomo Analytics URL and site ID\r\n umami: https://umami.yourdomain.com/YOUR_WEBSITE_ID # Umami Analytics URL and website ID\r\n```\r\n\r\n### 🧱 Sections block\r\n\r\nUse `sections` block to define which sections should display and in which order.\r\n\r\nEach section has it's own configuration entries.Most of the elements are optional. Omit property declaration in the configuration if you don't need a section to display particular element.\r\n\r\n```yml\r\nsections:\r\n header:\r\n type: header\r\n hero:\r\n type: hero\r\n features:\r\n type: features\r\n footer:\r\n type: footer\r\n```\r\n\r\n\u003e [!TIP]\r\n\u003e See [Storybook](https://kungfux.github.io/qupid/storybook/) for live demo of each section and how to configure them or use [Stackblitz](https://stackblitz.com/github/kungfux/qupid?file=configuration.yaml) to play with the configuration.\r\n\r\n### 🎨 Theme block\r\n\r\n`Theme` block can be used to override the default theme including colors and fonts.\r\n\r\n```yml\r\ntheme:\r\n colors:\r\n background: 'oklch(1.0000 0 0)'\r\n foreground: 'oklch(0.1884 0.0128 248.5103)'\r\n ...\r\n font-sans: 'Open Sans, sans-serif'\r\n font-serif: 'Georgia, serif'\r\n font-mono: 'Menlo, monospace'\r\n dark:\r\n background: 'oklch(0 0 0)'\r\n foreground: 'oklch(0.9328 0.0025 228.7857)'\r\n ...\r\n font-sans: 'Open Sans, sans-serif'\r\n font-serif: 'Georgia, serif'\r\n font-mono: 'Menlo, monospace'\r\n```\r\n\r\n\u003e [!TIP]\r\n\u003e The easiest way to customize a theme is to use online tools like https://tweakcn.com/ or https://ui.shadcn.com/themes to generate all necessary keys and values.\r\n\r\n### βš“ Section anchors\r\n\r\nSection to render is identified from the section type e.g. `type: hero` as in the example below while section key `hero1` is converted into section's `id` that can be used in anchor links. Let's say you want to add a header links poiting to a section. Then, the configuration may looks like the following.\r\n\r\n```yml\r\nsections:\r\n header:\r\n type: header\r\n links:\r\n hero:\r\n text: Link to Hero Section\r\n href: '#hero1'\r\n tooltip: Go to Hero Section\r\n\r\n hero1:\r\n type: hero\r\n```\r\n\r\n### Ⓜ️ Markdown support\r\n\r\nConfiguration settings under `sections` block that expect the text to display as a value (e.g. `title`, `subtitle`, `description`, `copyright`, `question`, `answer`), support [markdown](https://www.markdownguide.org/) format. This is useful to make the text bold, or add a link instead of a text.\r\n\r\n```yml\r\nsections:\r\n faq:\r\n type: faq\r\n title: Frequently Asked Questions\r\n subtitle: '**Answers** to common questions.'\r\n items:\r\n - question: '*Can I use Markdown with Qupid?*'\r\n answer: \u003e\r\n Yes! You can use Markdown for:\r\n - **Bold text**\r\n - _Italic text_\r\n - [Links](https://example.com)\r\n - `Inline code`\r\n - Lists and more\r\n```\r\n\r\n### πŸ”£ Font Awesome support\r\n\r\nImage settings like `image`, `logo`, `icon` support [Font Awesome](https://fontawesome.com/icons).\r\n\r\n```yml\r\nsections:\r\n header:\r\n type: header\r\n logo:\r\n href: # Omit image path for Font Awesome icon\r\n fa: fas fa-rocket\r\n```\r\n\r\n### πŸ–ΌοΈ Images and light/dark themes\r\n\r\nTo make images adapt to light/dark themes, you can specify `invert_on` setting with either `light` or `dark` value. The image will be inverted when the specified theme is active.\r\n\r\n```yml\r\nsections:\r\n hero:\r\n type: hero\r\n image:\r\n href: /hero-light.png\r\n invert_on: dark\r\n```\r\n\r\n### πŸ“ Special characters in YAML\r\n\r\nYAML has special characters that need to be escaped or enclosed in quotes to be interpreted correctly. This is especially important for GitHub custom action where the configuration is defined as a multi-line string in the workflow file.\r\n\r\nHere are some common special characters and how to handle them:\r\n\r\n- `:`, `#`, `$`, `-`, `,`, `{`, `}`, `[`, `]`, `\u0026`, `*`, `%`, `|`, `\u003e` (special characters)\r\n\r\n Use quotes if they are part of a string value or escape them with a backslash. Example: `title: \"My Title: An Introduction\"` or `title: My Title\\: An Introduction`.\r\n\r\n- `\"`, `'` (double and single quotes)\r\n\r\n Use double or single quotes to enclose strings with special characters or spaces. Example: `title: 'My \"Special\" Title'` or `title: \"My 'Special' Title\"`.\r\n\r\n- `\\` (backslash)\r\n\r\n Use quotes if the backslash is part of a string value. Example: `path: \"C:\\\\Program Files\\\\MyApp\"`.\r\n\r\n- `` ` `` (backtick)\r\n\r\n Use quotes if the backtick is part of a string value. Example: ```code: \"Here is some `inline code` in a sentence.\"``` or use backslash to escape it: ```code: Here is some \\`inline code\\` in a sentence.```.\r\n\r\n## 🀝 Feedback and Contributions\r\n\r\nFeel free to contribute by reporting issues, suggesting features, or submitting pull requests on the [GitHub repository](https://github.com/kungfux/qupid).\r\n\r\n## πŸ“ƒ License\r\n\r\nThe project is free to use and licensed under [MIT License](LICENSE).\r\n\r\n[πŸ” Back to top](#top)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkungfux%2Fqupid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkungfux%2Fqupid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkungfux%2Fqupid/lists"}