- Refine automation to ensure a seamless pipeline from theme to Hugo + Decap-ready setup.
31
- Test with existing template library (local library with an initial bunch of themes) to validate output and improve efficiency.
32
- Develop an initial AI-powered script to process basic HTML templates.
33
- Expand functionality to support complex, multi-page themes.
34
- Fully automate Decap CMS setup and data file generation.
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.
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.
37
- The project should be able to be deployed on Cloudflare Pages.
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.
39
- The project requires a linter to ensure the code is clean and follows the best practices.
40
- the project should use AI to fix any errors or issues that may arise during the conversion process, deployment or linting.
41
- The project should use different AI models for different tasks, for example:
42
- GPT-4-Turbo for the initial analysis of the HTML file and the generation of the Hugo-ready templates.
43
- GPT-4o for the generation of the Decap CMS config.yml file.
44
- GPT-4o for the generation of the Python code harnesses.
45
46
- Use the below prompts for the corresponding AI integrations part of the code.
47
48
## Phase 1: AI-Powered HTML Conversion
49
50
### **Step 1: Analyze HTML Theme with GPT-4-Turbo**
51
**Prompt**:
52
```plaintext
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:
54
1. Identify reusable components like headers, footers, navbars, and sidebars.
55
2. Suggest Hugo template tags (e.g., {{ .Title }}, {{ .Content }}, {{ .Params.hero }}) for dynamic content replacement.
56
3. Recommend splitting the file into Hugo partials where applicable.
57
4. Score the content blocks for whether they need specialized Hugo `data` configurations.
58
59
Example HTML:
60
{html_code}
61
62
Provide a clear explanation, the transformed Hugo-ready template, and code harness for parsing similar HTML files.
63
```
64
65
---
66
67
### **Step 2: Split HTML into Hugo Partials**
68
**Prompt**:
69
```plaintext
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:
71
72
1. Header (header.html)
73
2. Footer (footer.html)
74
3. Navigation (nav.html)
75
4. Sidebar (sidebar.html, if applicable)
76
5. Boxes, lists, and special containers
77
78
Here’s the HTML file:
79
{html_code}
80
81
Output:
82
1. Extracted partial files.
83
2. Placeholder template to include these partials in Hugo’s base layout.
84
3. Python code to automate this splitting process.
85
```
86
87
---
88
89
### **Step 3: Replace Hardcoded Content**
90
**Prompt**:
91
```plaintext
92
Analyze the provided HTML and replace all hardcoded links, images, and text with Hugo-compatible template tags. Examples include:
93
94
1. Replace static links with {{ .Permalink }} or {{ .RelPermalink }}.
95
2. Replace inline text content with placeholders like {{ .Params.variable }}.
96
3. Replace hardcoded image URLs with {{ .Site.BaseURL }} or similar.
97
4. Ensure support for all Hugo data types (string, list, map, etc.) where appropriate.
98
99
HTML Input:
100
{html_code}
101
102
Provide the updated Hugo template-ready file with the changes applied and a Python parser to automate this process.
103
```
104
105
---
106
107
## Phase 2: Decap CMS Integration
108
109
### **Step 1: Extract Layout Data**
110
**Prompt**:
111
```plaintext
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:
113
114
1. Navigation menu items.
115
2. Hero section text and images.
116
3. Footer links and copyright text.
117
4. Boxes, lists, or other specialized containers.
118
119
Output the data as YAML files in the following format:
Provide the extracted YAML files and a Python harness for automating this extraction.
142
```
143
144
---
145
146
### **Step 2: Generate Decap CMS `config.yml`**
147
**Prompt**:
148
```plaintext
149
You are setting up Decap CMS for a Hugo site. Generate a `config.yml` file based on the following requirements:
150
151
1. Create collections for Pages (`content/page/`), Blog Posts (`content/blog/`), and Layout Elements (navigation, hero sections, footer, etc.).
152
2. Define widgets for editing text, images, lists, and links.
153
3. Configure media uploads to use `static/images/uploads` as the folder.
154
4. Include support for editing CSS, theme images, and specialized content blocks.
155
156
Use the extracted YAML data structure as part of the CMS configuration.
157
158
Example Data:
159
{yaml_data}
160
161
Output a `config.yml` file for Decap CMS and Python code for generating it programmatically.
162
```
163
164
---
165
166
## Phase 3: Automation & Deployment
167
168
### **Step 1: Python CLI Tool**
169
**Prompt**:
170
```plaintext
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:
172
173
1. `convert`: Parse an HTML theme and generate Hugo-compatible templates.
174
2. `cms-setup`: Set up Decap CMS configuration and integrate it with the Hugo project.
175
3. `deploy`: Generate Cloudflare Pages configuration for deployment and trigger CI.
176
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.
178
```
179
180
---
181
182
### **Step 2: Deployment Hooks for Cloudflare Pages**
183
**Prompt**:
184
```plaintext
185
You are configuring deployment for a Hugo site with Decap CMS. Generate a configuration file for Cloudflare Pages that:
186
187
1. Defines the build command as `hugo`.
188
2. Sets the publish directory to `public/`.
189
3. Supports environment variables for Hugo version and other necessary configurations.
190
4. Automatically integrates Cloudflare's autogenerated project name for callbacks.
191
192
Output the complete configuration file and Python code to programmatically generate it.
193
```
194
195
---
196
197
### **Step 3: Testing with Real-World Templates**
198
**Prompt**:
199
```plaintext
200
Analyze the following HTML theme and test its conversion into a Hugo theme using the provided Hugo-ifier pipeline. Identify any issues with:
201
202
1. Template tag placement.
203
2. Partial splitting logic.
204
3. Decap CMS data extraction and integration.
205
4. Compatibility with Cloudflare Pages deployment.
206
207
Theme:
208
{html_code}
209
210
Output:
211
1. A summary of identified issues.
212
2. Recommendations for improving the pipeline.
213
3. Python code for debugging or resolving the issues.
214
```
215
216
---
217
218
### Next Steps
219
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.