I am a marketer, not a developer. While I could handle content and brand messaging directly, changing the site’s structure and code required a developer’s assistance.
This time, working alongside Codex, I rebuilt the 247COMPASS WordPress website into a Hugo-based Korean and English site. I have organized the process sequentially, starting from content migration to multilingual configuration, search settings, deployment, and operational tools.
Looking back on the experience, this article outlines a working framework that can be reused for future builds.
There was one core principle: Establish the big picture first, then finalize the details.
1. What Did We Build?#
| Item | Approach Chosen for This Build |
|---|---|
| Previous Site | WordPress corporate website |
| New Foundation | Hugo static site |
| Design | Utilized the default structure of hugo-theme-pico-corp |
| Languages | Korean default, English at /en/ |
| Key Content | Home · About · Services · Projects · Insights · Contact |
| Deployment | Connected GitHub and Cloudflare Pages |
| Operational Tools | Authoring guides, reusable CTAs, translation sync scripts |
The goal went beyond simply refreshing the website’s look. It was vital to create a structure that allowed me, as a marketer, to continuously edit and manage content.
2. First Decision: Utilizing a Ready-Made Design#
Rather than building a new design from scratch, I chose a theme suited for a corporate website. I liked its clean layout and business-centric interface.
The strategy was to maintain the default structure of the home, services, about, project list, and detailed reference pages while populating them with our own company’s content.
| What I Decided First | What I Could Focus On Afterward |
|---|---|
| Maintain the theme's default layout | Draft services and brand messaging |
| Standardize service detail page formats | Organize descriptions needed by customers |
| Standardize project detail page formats | Organize challenges, approaches, and results |
| Align Korean and English structures | Review translation terminology and phrasing |
I showed reference pages to Codex and requested, “Change the content while keeping this structure.” I specifically added the scope of application, elements to preserve, files to modify, and validation criteria.
3. Why Start with the Big Picture?#
Even if you finalize button colors or individual sentences first, changes to the page structure will force you to readjust them. Therefore, I established menus, content types, and multilingual paths first before refining the details.
| Big Picture to Establish First | Detailed Elements to Complete Later |
|---|---|
| Site objectives and primary visitors | Page-specific messaging and copy |
| Menus and content types | Cards, buttons, and spacing |
| URLs and multilingual connection structure | Link labels and translation expressions |
| Service and project detail formats | Images and results for each case study |
| Roles and placement of common components | CTA phrasing and icons |
While starting with the big picture, it is best to validate using actual content on representative pages. Empty layouts alone make it difficult to spot issues like long titles, result lists, or awkward mobile line breaks.
4. If Rebuilding: The 7-Step Framework#
Below is the recommended sequence reorganized based on this experience. This is not a schedule representing actual task durations, but rather the order in which decisions in earlier steps serve as criteria for subsequent steps.
Objective → Structure → Representative Pages → Common Elements → Content → Deployment → Operations
STEP 01 · Direction Setting
Organizing Objectives and Existing Assets
Determine what to communicate to whom and what actions to drive. Organize existing content, URLs, and images to distinguish what to keep versus exclude.
Completion Criteria · Site objectives, content inventory, existing URL list
STEP 02 · Structural Design
Determining Menus, URLs, and Multilingual Rules
Establish content types and menus, and connect Korean and English paths. Also design redirect plans for previous URLs and translation criteria at this stage.
Completion Criteria · Sitemap draft, URL rules, language-specific content mapping table
STEP 03 · Small-Scope Validation
Validating Layouts with Representative Pages
Create one each of the home, service detail, project detail, and insight pages. Populate with actual content and check information flow on desktop and mobile.
Completion Criteria · Reviewed representative pages and list of items to modify
STEP 04 · Finalizing Common Elements
Making Repetitive Functions Reusable
Organize headers, footers, CTAs, author cards, table of contents, and image display methods. Apply across all pages after verifying on representative pages.
Completion Criteria · Common components, shortcodes, authoring examples
STEP 05 · Content Expansion
Synchronizing English After Finalizing Korean
Review Korean messaging and case studies first, then draft English versions based on the glossary. Verify client names, metrics, links, and language switching.
Completion Criteria · Reviewed Korean/English content and Korean-English glossary
STEP 06 · Preparation for Launch
Technical Validation and Deployment
Check redirects, meta information, sitemaps, structured data, analytics tools, and performance. Re-verify links and key pages on the live domain after deployment.
Completion Criteria · Successful build, live site verification, remaining issues list
STEP 07 · Ongoing Operations
Establishing Guides and Automation
Document content creation, preview, and deployment procedures. Validate translation automation starting with a small scope and set protection rules for manually reviewed files.
Completion Criteria · Operations guide, automation tools, human review criteria
Proceed to the next step only after verifying the completion criteria for each step. If structural issues are discovered belatedly, return to the relevant step to revise the criteria and check affected pages.
5. Sequence Adjustments for Future Builds#
While maintaining the big-picture-first approach, I would like to move the following tasks earlier next time:
| Item | Desired Approach Next Time | Reason |
|---|---|---|
| Existing URLs and Redirects | Draft inventory and migration plans before moving content | To minimize missing connections between old and new addresses |
| Common CTAs and Author Cards | Finalize on representative pages before global application | To reduce repeated edits across multiple files |
| Translation | Proceed after finalizing Korean structure and core messaging | To reduce re-translation caused by Korean edits |
| Search Optimization | Determine criteria during structural design, final check before deployment | To avoid delaying decisions impacting URL and language structures |
| Mobile Verification | Iteratively check starting from the representative page stage | To check long titles, images, and button layouts early |
| Automation | Execute on a small scale after setting manual operations rules | To prevent unnecessarily overwriting reviewed content |
6. Division of Labor Between Marketer and AI#
| Area | My Responsibilities | Codex's Assistance |
|---|---|---|
| Direction | Determine site objectives and desired design | Implementation aligned with chosen direction |
| Content | Review service messaging, case studies, and display order | Organize content structure and support translation |
| Functionality | Explain required elements and placement | Write shortcodes, templates, and styles |
| Technology | Communicate requirements and operational criteria to check | Check configurations, build, and fix errors |
| Review | Make final judgments based on screens and copy | Reflect revisions and repeat verification |
Even with AI assisting in implementation, I had to verify the factual accuracy of the company’s messaging and content. Clearly explaining desired outcomes and review criteria was my role.
7. Precision Prompting Reduced Errors#
Actual requests did not end with one or two short instruction sentences. I first explained the role and objectives, then organized the project environment, file paths, step-by-step requirements, forbidden modifications, validation methods, and output formats.
In particular, I paid close attention to refining words and conditions used within prompts so they did not conflict with one another. Referring to the same target by different names or mixing instructions to preserve versus modify could lead to unwanted results.
| Request Component | What Was Clarified | Errors Aimed to Be Reduced |
|---|---|---|
| Role and Objectives | Objectives of the work such as Hugo development, localization, and technical SEO | Confusion in work direction |
| Environment and Locations | Theme name, configuration files, content paths, reference pages | Modifications to unintended files or structures |
| Terminology and Values | Company name, brand name, language paths, exact contact URL | Notation inconsistencies and broken links |
| Scope and Exceptions | Korean/English targets, reviewed files, prohibited modifications | Omissions or unnecessary overwriting |
| Implementation Conditions | Shortcode parameters, default values, display locations, link attributes | Unintended behaviors |
| Validation and Output | Builds, page-by-page checks, modified files, and result reports | Ending reviews based solely on explanations that it was implemented |
For instance, in multilingual content work, I specified both the rule that Korean serves as the translation standard and the exception that reviewed service files must not be modified. For CTA work, I clearly distinguished the location right below results, the Korean/English application scope, default URLs, and new tab attributes.
I felt that this precision in requests contributed significantly to reducing errors. Reference screens and screenshots supplemented explanations, while results were confirmed through previews and validation reports.
8. Completed Work and Next Steps#
| Status | Content |
|---|---|
| Build and Deployment | Built and deployed Hugo-based Korean and English website |
| Content Operations | Established detail page formats, reusable CTAs, and authoring guides |
| Technical Checks | Organized search-related settings, analytics tools, images, and mobile icons |
| Next Steps | Configure prepared translation sync scripts and validate live API execution |
By clarifying your plans, completing items one by one according to step-by-step completion criteria, and optimizing, you can become a happy builder with Codex. Start from the big picture, and finally take care of small details and invisible technical settings.