Behind the Scenes · My Actual Process

My Content Workflow:
From Idea to
Published Page

How I plan, write, edit, and publish content using Google Documents, VI, and Visual Studio Code.

Content Workflow · 6 Steps
1
Plan the Idea
Google Docs · VS Code
2
Draft the Content
Google Docs · VS Code
3
Structure & Refine
VS Code
4
Generate the Page
Claude AI → HTML/CSS
5
Edit & Finalize
VS Code
6
Publish & Update
Git · VI (server)
The Foundation

You Don't Just Need Tools.
You Need a System.

If you want to build a blog or online business, you need a repeatable content workflow—not just a list of tools, not just ideas, but a system.

This page breaks down exactly how I move from an idea to a finished, published webpage using three core tools. Each plays a different role in the process. Some are beginner-friendly. Others are more advanced.

The goal is not to use every tool right away. The goal is to understand how content actually gets created, refined, and published—so you can build a system that works for you.

Keep in mind that this is an advanced workflow. It doesn't involve the use of Wordpress-which is where most beginning workflows should start.

📄
Google Documents
Brainstorming, rough drafts, and early-stage notes
💻
Visual Studio Code
Structured drafting, editing HTML/CSS, file organization
⌨️
VI (Vim)
Direct server editing, config files, and live fixes
The Big Picture

Six Steps. One Repeatable System.

These steps stay consistent. What changes is the tool used at each stage.

01
Plan the Idea

Define the topic, target keyword, search intent, headings, monetization angle, internal links, and CTAs before writing a single word.

📄 Google Docs  ·  💻 VS Code
02
Draft the Content

Create a rough version of the content—messy bullet points, rough paragraphs, and early structure. Focus on getting ideas out, not polish.

📄 Google Docs  ·  💻 VS Code
03
Structure & Refine

Clean up the writing, improve clarity, add headings, organize sections, insert internal links, and add monetization elements.

💻 VS Code
04
Generate the Page

Feed the structured draft into Claude AI to generate the HTML and CSS layout. This bridges writing and publishing in one step.

🤖 Claude AI → HTML/CSS
05
Edit & Finalize

Review the generated page, fix layout issues, update links, improve formatting, and organize files before it's ready to go live.

💻 VS Code
06
Publish & Update

Deploy via Git or make direct server-level edits using VI. Quick live fixes happen here without downloading and re-uploading files.

⌨️ VI  ·  🔀 Git
Tool Deep Dive

Google Documents

Google Documents is the simplest tool in this workflow—and the best place to start if you're new to content creation. It's cloud-based, requires no setup, and gets out of your way.

I use Google Docs when I want a distraction-free writing environment and I'm still figuring out the structure. It's ideal for messy drafts, bullet points, and rough paragraphs without worrying about formatting.

I also use it for brainstorming and early-stage notes when I'm evaluating whether an idea is worth developing into a full article.

Brainstorming ideas and topics
Writing rough outlines
Creating content checklists
Storing early-stage notes
Flexible, distraction-free drafting
Best For
Google Documents
Starting content without any setup
Cloud access from any device
Sharing drafts for review
Messy, exploratory early writing
Beginner-friendly from day one
💡 If you're just starting out, Google Docs is where to begin. No configuration, no learning curve.
Tool Deep Dive

Visual Studio Code

Visual Studio Code is the main bridge between writing and development in my workflow. It's more powerful than Google Docs, but still far more approachable than working directly on a server.

I use VS Code for structured drafts when I'm thinking about the final page layout, and for editing HTML and CSS after a page is generated. It's especially useful when I'm working with multiple files at once.

I often write in plain text or Markdown format inside VS Code, which keeps things clean and easy to move into the next stage of the workflow.

Structured drafting in Markdown or plain text
Editing HTML and CSS after generation
Organizing content folders and project files
Searching across multiple files at once
Preparing files for publishing
Example Folder Structure
VS Code Project Setup
📁 my-blog-content/
  ├─ 📁 content-drafts/
  ├─ 📁 page-outlines/
  ├─ 📁 seo-research/
  ├─ 📁 published-pages/
  └─ 📁 notes/
Reorganize sections easily
Search and find across files
Syntax highlighting for HTML/CSS
Tool Deep Dive

VI (Vim)

VI—or Vim—is a command-line text editor that runs inside the Linux terminal. It allows you to edit files directly on the server without downloading or re-uploading anything.

I reach for VI when I need to make quick, direct changes on the live server: fixing a typo on a live page, adjusting a CSS rule, updating a link, or editing server configuration files.

It's not a beginner tool. VI has a learning curve and works in modes—but once you understand it, it's the fastest way to handle server-side edits.

Quick HTML and CSS fixes on live pages
Apache configuration and virtual host files
Editing .htaccess and environment settings
Deployment configuration changes
VI Quick Reference
Basic Commands
Common VI Commands
i Enter insert mode (start typing)
Esc Exit insert mode
:w Save the file
:q Quit VI
:wq Save and quit
:q! Quit without saving
Note: VI is not where you should start. If you're new to blogging, skip this for now and come back once you're comfortable with VS Code.
At a Glance

Tool Roles in One Simple View

Each tool has a distinct role. You don't need all three to get started.

📄
Google Documents
Beginner Friendly
Primary Role
Writing, brainstorming, and early-stage content creation
Brainstorming ideas
Writing rough drafts
Creating outlines
Storing notes
💻
Visual Studio Code
Intermediate
Primary Role
Structured drafting, editing, and file organization
Structured blog drafts
Editing HTML and CSS
Organizing project files
Preparing files for publish
⌨️
VI (Vim)
Advanced
Primary Role
Direct server editing and configuration management
Live page edits on server
Apache config files
.htaccess edits
Deployment configs
Beginner Recommendation

Build Your Workflow Step by Step

Don't overcomplicate the process early. Publishing consistently matters more than having the perfect setup.

1
Start Here
Google Documents

Open a document and start writing. No setup, no learning curve. Just get your ideas out. This is where every piece of content begins.

2
Start Here
Basic Publishing

Use WordPress or simple HTML to get your content live. Don't wait for the perfect setup—publishing your first page teaches you more than any tool.

3
Then Add
Visual Studio Code

Once you're publishing regularly, move into VS Code to get more control over your files, structure your drafts better, and edit HTML and CSS directly.

4
Much Later
VI and Server-Level Editing

Only when you're comfortable managing your own server. VI is a power tool—useful when you need it, but not required for most bloggers starting out.

Ready to Build?

Build a Workflow You Can Actually Stick To

You don't need a complicated system to start. Start writing, publish consistently, and improve your workflow over time. Tools change—workflows scale.

Explore More Tools →