Hugoifier

hugoifier / prompts.md
Source Blame History 222 lines
48176db… ragelink 1 # Hugo-ifier (AI-Powered Theme Converter)
48176db… ragelink 2 This project aims to create a fully production-ready, AI-assisted Hugo theme converter with Decap CMS support as efficiently as possible.
48176db… ragelink 3
48176db… ragelink 4 Objective
48176db… ragelink 5 To build a Hugo-ifier, a Python-based utility that:
48176db… ragelink 6 - Converts any HTML/JS/CSS theme into a Hugo-compatible theme using AI.
48176db… ragelink 7 - Extracts layout data into structured files (data/*.yaml or data/*.json) to make the theme editable via Decap CMS.
48176db… ragelink 8 - Generates and wires Decap CMS into the Hugo setup, making it fully ready for content management.
48176db… ragelink 9 - Uses OpenAI's cheapest and most efficient model to analyze theme files and determine the best Hugo template tag placements.
48176db… ragelink 10
48176db… ragelink 11 Core Features & Workflow
48176db… ragelink 12 - Phase 1: AI-Powered HTML Conversion
48176db… ragelink 13 - - Use GPT-4-Turbo to analyze an HTML theme and suggest where Hugo template tags ({{ .Title }}, {{ .Content }}, etc.) should be placed.
48176db… ragelink 14 - - Identify partials (header.html, footer.html, etc.) and reusable elements.
48176db… ragelink 15 - -Convert hardcoded links, images, and text into Hugo-friendly components.
48176db… ragelink 16 - Phase 2: Decap CMS Integration
48176db… ragelink 17 - - Extract site structure elements (navigation, hero sections, footers) into YAML/JSON files in Hugo’s data/ directory.
48176db… ragelink 18 - - Generate a Decap CMS config.yml file with proper collections for pages, posts, and layout elements.
48176db… ragelink 19 - - Ensure the generated theme is fully editable via Decap CMS.
48176db… ragelink 20 - Phase 3: Automation & Deployment
48176db… ragelink 21 - - Provide a Python CLI tool to automate the entire conversion process.
48176db… ragelink 22 - - Offer interactive mode for customization and auto mode for full automation.
48176db… ragelink 23 - - Ensure themes are deployable on Cloudflare Pages CMS setups.
48176db… ragelink 24 - - CMS will be deployed on Cloudflare Pages too.
48176db… ragelink 25
48176db… ragelink 26 TODOs
48176db… ragelink 27 - Setup the project with the necessary files and folders.
48176db… ragelink 28 - Prototype AI-powered template conversion (parse an HTML file, apply Hugo modifications).
48176db… ragelink 29 - Implement Decap CMS integration (extract layout elements, generate CMS config).
48176db… ragelink 30 - Refine automation to ensure a seamless pipeline from theme to Hugo + Decap-ready setup.
48176db… ragelink 31 - Test with existing template library (local library with an initial bunch of themes) to validate output and improve efficiency.
48176db… ragelink 32 - Develop an initial AI-powered script to process basic HTML templates.
48176db… ragelink 33 - Expand functionality to support complex, multi-page themes.
48176db… ragelink 34 - Fully automate Decap CMS setup and data file generation.
48176db… ragelink 35 - Use python-based code harnesses to generate the Decap CMS config.yml file, analyze the HTML file and generate the Hugo-ready templates, etc.
48176db… ragelink 36 - If the template is partially implemented, the AI should be able to identify the missing parts and generate the necessary code to complete the theme.
48176db… ragelink 37 - The project should be able to be deployed on Cloudflare Pages.
48176db… ragelink 38 - The project should manage the workflow of the conversion process, from the initial HTML file to the fully converted Hugo theme with Decap CMS integration and any ai connected api calls, it should also have a checker to ensure the theme is fully compatible with the Decap CMS.
48176db… ragelink 39 - The project requires a linter to ensure the code is clean and follows the best practices.
48176db… ragelink 40 - the project should use AI to fix any errors or issues that may arise during the conversion process, deployment or linting.
48176db… ragelink 41 - The project should use different AI models for different tasks, for example:
48176db… ragelink 42 - GPT-4-Turbo for the initial analysis of the HTML file and the generation of the Hugo-ready templates.
48176db… ragelink 43 - GPT-4o for the generation of the Decap CMS config.yml file.
48176db… ragelink 44 - GPT-4o for the generation of the Python code harnesses.
48176db… ragelink 45
48176db… ragelink 46 - Use the below prompts for the corresponding AI integrations part of the code.
48176db… ragelink 47
48176db… ragelink 48 ## Phase 1: AI-Powered HTML Conversion
48176db… ragelink 49
48176db… ragelink 50 ### **Step 1: Analyze HTML Theme with GPT-4-Turbo**
48176db… ragelink 51 **Prompt**:
48176db… ragelink 52 ```plaintext
48176db… ragelink 53 You are an AI designed to convert an HTML theme into a Hugo-compatible theme. Analyze the following HTML file and provide the following:
48176db… ragelink 54 1. Identify reusable components like headers, footers, navbars, and sidebars.
48176db… ragelink 55 2. Suggest Hugo template tags (e.g., {{ .Title }}, {{ .Content }}, {{ .Params.hero }}) for dynamic content replacement.
48176db… ragelink 56 3. Recommend splitting the file into Hugo partials where applicable.
48176db… ragelink 57 4. Score the content blocks for whether they need specialized Hugo `data` configurations.
48176db… ragelink 58
48176db… ragelink 59 Example HTML:
48176db… ragelink 60 {html_code}
48176db… ragelink 61
48176db… ragelink 62 Provide a clear explanation, the transformed Hugo-ready template, and code harness for parsing similar HTML files.
48176db… ragelink 63 ```
48176db… ragelink 64
48176db… ragelink 65 ---
48176db… ragelink 66
48176db… ragelink 67 ### **Step 2: Split HTML into Hugo Partials**
48176db… ragelink 68 **Prompt**:
48176db… ragelink 69 ```plaintext
48176db… ragelink 70 You are converting an HTML theme into a Hugo-compatible theme. Based on the analysis of the provided HTML file, split the following reusable components into partials:
48176db… ragelink 71
48176db… ragelink 72 1. Header (header.html)
48176db… ragelink 73 2. Footer (footer.html)
48176db… ragelink 74 3. Navigation (nav.html)
48176db… ragelink 75 4. Sidebar (sidebar.html, if applicable)
48176db… ragelink 76 5. Boxes, lists, and special containers
48176db… ragelink 77
48176db… ragelink 78 Here’s the HTML file:
48176db… ragelink 79 {html_code}
48176db… ragelink 80
48176db… ragelink 81 Output:
48176db… ragelink 82 1. Extracted partial files.
48176db… ragelink 83 2. Placeholder template to include these partials in Hugo’s base layout.
48176db… ragelink 84 3. Python code to automate this splitting process.
48176db… ragelink 85 ```
48176db… ragelink 86
48176db… ragelink 87 ---
48176db… ragelink 88
48176db… ragelink 89 ### **Step 3: Replace Hardcoded Content**
48176db… ragelink 90 **Prompt**:
48176db… ragelink 91 ```plaintext
48176db… ragelink 92 Analyze the provided HTML and replace all hardcoded links, images, and text with Hugo-compatible template tags. Examples include:
48176db… ragelink 93
48176db… ragelink 94 1. Replace static links with {{ .Permalink }} or {{ .RelPermalink }}.
48176db… ragelink 95 2. Replace inline text content with placeholders like {{ .Params.variable }}.
48176db… ragelink 96 3. Replace hardcoded image URLs with {{ .Site.BaseURL }} or similar.
48176db… ragelink 97 4. Ensure support for all Hugo data types (string, list, map, etc.) where appropriate.
48176db… ragelink 98
48176db… ragelink 99 HTML Input:
48176db… ragelink 100 {html_code}
48176db… ragelink 101
48176db… ragelink 102 Provide the updated Hugo template-ready file with the changes applied and a Python parser to automate this process.
48176db… ragelink 103 ```
48176db… ragelink 104
48176db… ragelink 105 ---
48176db… ragelink 106
48176db… ragelink 107 ## Phase 2: Decap CMS Integration
48176db… ragelink 108
48176db… ragelink 109 ### **Step 1: Extract Layout Data**
48176db… ragelink 110 **Prompt**:
48176db… ragelink 111 ```plaintext
48176db… ragelink 112 You are building a Hugo-compatible theme with Decap CMS integration. Extract the following elements from the provided HTML/CSS structure into structured YAML or JSON files:
48176db… ragelink 113
48176db… ragelink 114 1. Navigation menu items.
48176db… ragelink 115 2. Hero section text and images.
48176db… ragelink 116 3. Footer links and copyright text.
48176db… ragelink 117 4. Boxes, lists, or other specialized containers.
48176db… ragelink 118
48176db… ragelink 119 Output the data as YAML files in the following format:
48176db… ragelink 120
48176db… ragelink 121 Example YAML:
48176db… ragelink 122 ```yaml
48176db… ragelink 123 navigation:
48176db… ragelink 124 - label: "Home"
48176db… ragelink 125 url: "/"
48176db… ragelink 126 - label: "About"
48176db… ragelink 127 url: "/about/"
48176db… ragelink 128
48176db… ragelink 129 hero:
48176db… ragelink 130 title: "Welcome to My Website"
48176db… ragelink 131 subtitle: "Your tagline here"
48176db… ragelink 132 image: "static/images/hero.jpg"
48176db… ragelink 133
48176db… ragelink 134 footer:
48176db… ragelink 135 copyright: "© 2025 My Website"
48176db… ragelink 136 ```
48176db… ragelink 137
48176db… ragelink 138 HTML Input:
48176db… ragelink 139 {html_code}
48176db… ragelink 140
48176db… ragelink 141 Provide the extracted YAML files and a Python harness for automating this extraction.
48176db… ragelink 142 ```
48176db… ragelink 143
48176db… ragelink 144 ---
48176db… ragelink 145
48176db… ragelink 146 ### **Step 2: Generate Decap CMS `config.yml`**
48176db… ragelink 147 **Prompt**:
48176db… ragelink 148 ```plaintext
48176db… ragelink 149 You are setting up Decap CMS for a Hugo site. Generate a `config.yml` file based on the following requirements:
48176db… ragelink 150
48176db… ragelink 151 1. Create collections for Pages (`content/page/`), Blog Posts (`content/blog/`), and Layout Elements (navigation, hero sections, footer, etc.).
48176db… ragelink 152 2. Define widgets for editing text, images, lists, and links.
48176db… ragelink 153 3. Configure media uploads to use `static/images/uploads` as the folder.
48176db… ragelink 154 4. Include support for editing CSS, theme images, and specialized content blocks.
48176db… ragelink 155
48176db… ragelink 156 Use the extracted YAML data structure as part of the CMS configuration.
48176db… ragelink 157
48176db… ragelink 158 Example Data:
48176db… ragelink 159 {yaml_data}
48176db… ragelink 160
48176db… ragelink 161 Output a `config.yml` file for Decap CMS and Python code for generating it programmatically.
48176db… ragelink 162 ```
48176db… ragelink 163
48176db… ragelink 164 ---
48176db… ragelink 165
48176db… ragelink 166 ## Phase 3: Automation & Deployment
48176db… ragelink 167
48176db… ragelink 168 ### **Step 1: Python CLI Tool**
48176db… ragelink 169 **Prompt**:
48176db… ragelink 170 ```plaintext
48176db… ragelink 171 You are designing a Python CLI tool for automating the conversion of HTML themes to Hugo-compatible themes with Decap CMS integration. Define the CLI commands and their functionality:
48176db… ragelink 172
48176db… ragelink 173 1. `convert`: Parse an HTML theme and generate Hugo-compatible templates.
48176db… ragelink 174 2. `cms-setup`: Set up Decap CMS configuration and integrate it with the Hugo project.
48176db… ragelink 175 3. `deploy`: Generate Cloudflare Pages configuration for deployment and trigger CI.
48176db… ragelink 176
48176db… ragelink 177 Provide a Python script template for implementing this CLI tool. Ensure it includes argument parsing, modular functions for each command, and support for Cloudflare Pages deployment.
48176db… ragelink 178 ```
48176db… ragelink 179
48176db… ragelink 180 ---
48176db… ragelink 181
48176db… ragelink 182 ### **Step 2: Deployment Hooks for Cloudflare Pages**
48176db… ragelink 183 **Prompt**:
48176db… ragelink 184 ```plaintext
48176db… ragelink 185 You are configuring deployment for a Hugo site with Decap CMS. Generate a configuration file for Cloudflare Pages that:
48176db… ragelink 186
48176db… ragelink 187 1. Defines the build command as `hugo`.
48176db… ragelink 188 2. Sets the publish directory to `public/`.
48176db… ragelink 189 3. Supports environment variables for Hugo version and other necessary configurations.
48176db… ragelink 190 4. Automatically integrates Cloudflare's autogenerated project name for callbacks.
48176db… ragelink 191
48176db… ragelink 192 Output the complete configuration file and Python code to programmatically generate it.
48176db… ragelink 193 ```
48176db… ragelink 194
48176db… ragelink 195 ---
48176db… ragelink 196
48176db… ragelink 197 ### **Step 3: Testing with Real-World Templates**
48176db… ragelink 198 **Prompt**:
48176db… ragelink 199 ```plaintext
48176db… ragelink 200 Analyze the following HTML theme and test its conversion into a Hugo theme using the provided Hugo-ifier pipeline. Identify any issues with:
48176db… ragelink 201
48176db… ragelink 202 1. Template tag placement.
48176db… ragelink 203 2. Partial splitting logic.
48176db… ragelink 204 3. Decap CMS data extraction and integration.
48176db… ragelink 205 4. Compatibility with Cloudflare Pages deployment.
48176db… ragelink 206
48176db… ragelink 207 Theme:
48176db… ragelink 208 {html_code}
48176db… ragelink 209
48176db… ragelink 210 Output:
48176db… ragelink 211 1. A summary of identified issues.
48176db… ragelink 212 2. Recommendations for improving the pipeline.
48176db… ragelink 213 3. Python code for debugging or resolving the issues.
48176db… ragelink 214 ```
48176db… ragelink 215
48176db… ragelink 216 ---
48176db… ragelink 217
48176db… ragelink 218 ### Next Steps
48176db… ragelink 219
48176db… ragelink 220 Use these prompts in an AI-assisted tool like Cursor.com to segment tasks and iteratively build and refine the Hugo-ifier Python-based utility. By combining these detailed prompts with GPT-4-Turbo, you can streamline the development process and ensure accurate results.
48176db… ragelink 221
48176db… ragelink 222

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button