Blogger Publisher - VS Code Extension

bySuryakand -
0

Blogger Publisher - VS Code Extension

VS Code Blogger Extension

A powerful VS Code extension that allows you to write blog posts in Markdown and publish them directly to your Blogger account with automatic image upload to Google Drive.

Why I created Blogger Publisher VS Code Extension?

The need for the Blogger VS Code extension arises from the cumbersome workflow that I was going through to publish blogs to Blogger previously.

This blog post itself is published using the Blogger Publisher VS code extension with just one click from VS Code

Old Workflow:

  • Write your post in a Markdown editor or plain text.
  • Manually convert Markdown to HTML.
  • Sign in to Blogger in your browser.
  • Copy-paste the HTML, often losing formatting or introducing inconsistencies.
  • Manually upload images, get their URLs, and update your post.
  • Fix formatting issues and inconsistencies across posts.

Problems with the Old Workflow:

  • Time-consuming: Multiple manual steps slow down publishing.
  • Error-prone: Formatting issues and broken image links are common.
  • Inconsistent: Each post might look different due to manual HTML tweaks.
  • Fragmented: You have to switch between tools (editor, browser, image host).

How the Extension Helps:

  • All-in-one Workflow: Write, preview, and publish directly from VS Code.
  • Automatic Conversion: Markdown is converted to clean HTML automatically.
  • Image Handling: Local images are uploaded to Google Drive and linked in your post.
  • Consistent Formatting: Standardized conversion ensures all posts look uniform.
  • Single Place: No need to leave VS Code—everything from writing to publishing happens in one place.

Result:

You get a streamlined, reliable, and efficient blogging experience with less manual work and more consistency across your posts.

Features

  • ✍️ Markdown Support: Write your blog posts in Markdown with live preview
  • 🚀 Direct Publishing: Publish posts directly to Blogger.com from VS Code
  • 🎨 HTML Conversion: Automatically converts Markdown to clean HTML
  • 📝 Draft Support: Save posts as drafts or publish them live
  • 🏷️ Labels/Tags: Add labels to your posts using metadata comments
  • 🔐 Secure Authentication: OAuth 2.0 integration with Google
  • 📱 Multi-blog Support: Select which blog to publish to if you have multiple
  • 👀 Preview: Preview your HTML output before publishing
  • 📸 Automatic Image Upload: Local images in markdown are automatically uploaded to Google Drive
  • 🔗 Smart Image Handling: Duplicate images are uploaded only once and reused across references
  • 🌐 Public Image Access: Uploaded images are made publicly accessible with view-only permissions
  • ⚡ Optimized Publishing: Images are processed and uploaded before publishing for faster blog loading

Setup

1. Google Cloud Console Setup

Before using this extension, you need to set up Google OAuth credentials and enable required APIs:

  1. Go to the Google Cloud Console
  2. Create a new project or select an existing one
  3. Enable the required APIs:
    • Go to “APIs & Services” > “Library”
    • Search for and enable “Blogger API v3”
    • Search for and enable “Google Drive API”
  4. Create OAuth 2.0 credentials:
    • Go to “APIs & Services” > “Credentials”
    • Click “Create Credentials” > “OAuth 2.0 Client IDs”
    • Choose “Web application”
    • Add http://localhost:3000/oauth/callback to “Authorized redirect URIs”
    • Note down the Client ID and Client Secret

Required Scopes: The extension requires the following OAuth scopes:

  • https://www.googleapis.com/auth/blogger - For publishing to Blogger
  • https://www.googleapis.com/auth/drive.file - For uploading images to Google Drive

2. Extension Configuration

  1. Open VS Code Settings (Cmd/Ctrl + ,)
  2. Search for “blogger”
  3. Configure the following settings:
    • Client ID: Enter your Google OAuth Client ID
    • Client Secret: Enter your Google OAuth Client Secret
    • Google Drive Image Folder (optional): Specify a custom folder path in Google Drive for organizing your blog images (e.g., “Blog Images” or “Blog Images/2025”)

Note: If you don’t specify a Google Drive Image Folder, images will be uploaded to your Google Drive root folder.

You can also access these settings by:

  • Opening the Command Palette (Cmd/Ctrl + Shift + P)
  • Running “Preferences: Open Settings (UI)”
  • Searching for “blogger”

Usage

Blogger Extension View

Creating a New Blog Post

  1. Use the Command Palette (Cmd/Ctrl + Shift + P)
  2. Run “Blogger: Create New Blog Post”
  3. Enter your post title
  4. Start writing in Markdown!

Writing Posts

The extension supports standard Markdown syntax with enhanced image handling. You can also use special metadata comments at the top of your file:

# My Awesome Blog Post

<! -- Labels: technology, programming, vscode -->
<! -- Published: false -->

Your blog content goes here...
## Section Header
This is a paragraph with **bold** and *italic* text.

```javascript
// Code blocks are supported too!
console.log("Hello, Blogger!");
``

Image Handling

The extension automatically handles local images in your markdown:

Local Images (automatically uploaded to Google Drive):

![VS Code Blogger Extension](local image url goes here)

Remote Images (used as-is):

![Remote image](remote image url goes here)

Image Processing Features:

  • Local images are automatically uploaded to Google Drive
  • Images are made publicly accessible with view-only permissions
  • Duplicate images are uploaded only once for efficiency
  • Original markdown files are updated with Google Drive URLs
  • Supports: .jpg, .jpeg, .png, .gif, .bmp, .webp formats

Publishing Posts

  • Open a Markdown file
  • Use one of these methods:
    • Click the “Publish” button in the editor toolbar
    • Use Command Palette: “Blogger: Publish Current Post”
    • Right-click in the file explorer and select “Publish to Blogger”
  • Choose whether to publish as a draft or live
  • The extension will:
    • Process Images: Analyze your markdown for local images
    • Upload to Google Drive: Upload local images and make them publicly accessible
    • Update References: Replace local image paths with Google Drive URLs
    • Convert to HTML: Transform your markdown to clean, Blogger-compatible HTML
    • Publish: Upload the post to your selected Blogger blog

Publishing Progress Indicators:

  • “Processing images…” - Analyzing local images in your markdown
  • “Uploading image X/Y” - Uploading each unique image to Google Drive
  • “Converting markdown to HTML…” - Transforming content for Blogger
  • “Uploading to Blogger…” - Publishing the final post

Available Commands

  • Blogger: Authenticate with Blogger - Set up authentication
  • Blogger: Create New Blog Post - Create a new Markdown blog post
  • Blogger: Publish Current Post - Publish the current Markdown file
  • Blogger: Preview HTML Output - Preview how your post will look
  • Blogger: Select Blog - Choose which blog to publish to

Metadata Support

You can include metadata in your Markdown files using HTML comments:

<! -- Labels: tag1, tag2, tag3 -->
<! -- Published: false -->
  • Labels: Comma-separated list of tags for your post
  • Published: Set to false to save as draft, true to publish live

Supported Markdown Features

  • Headers (H1-H6)
  • Bold and italic text
  • Links (automatically open in new tab)
  • Images (local images automatically uploaded to Google Drive)
  • Code blocks with syntax highlighting
  • Inline code
  • Lists (ordered and unordered)
  • Blockquotes
  • Tables
  • Horizontal rules

Image Upload Details

Supported Image Formats

  • JPEG (.jpg, .jpeg)
  • PNG (.png)
  • GIF (.gif)
  • BMP (.bmp)
  • WebP (.webp)

Image Processing Workflow

  1. Detection: Local images are automatically detected in markdown
  2. Deduplication: Identical images are uploaded only once, even if referenced multiple times
  3. Upload: Images are uploaded to your configured Google Drive folder (or root folder if not specified)
  4. Permissions: Uploaded images are made publicly accessible with view-only permissions
  5. URL Generation: Public Google Drive URLs are generated for web access
  6. Reference Update: Original markdown file is updated with new Google Drive URLs
  7. Cleanup: Original local paths are replaced with permanent cloud URLs

Google Drive Integration

  • Images are stored in your specified Google Drive folder or root folder by default
  • Custom folder path can be configured in extension settings (e.g., “Blog Images” or “Blog Images/2025”)
  • If the specified folder doesn’t exist, it will be created automatically
  • Files are named with timestamps to avoid conflicts
  • Public sharing is enabled with view-only access
  • Folder structure is preserved if you specify nested paths (e.g., “Blog/Images/Screenshots”)

Security

  • OAuth tokens are stored securely using VS Code’s built-in secret storage
  • No passwords or sensitive data are stored in plain text
  • Authentication uses industry-standard OAuth 2.0 flow

Requirements

  • VS Code 1.74.0 or higher
  • Google account with access to Blogger and Google Drive
  • Internet connection for publishing and image upload
  • Local images should be accessible from the markdown file location

Extension Settings

This extension contributes the following settings:

  • blogger.clientId: Google OAuth Client ID
  • blogger.clientSecret: Google OAuth Client Secret
  • blogger.selectedBlogId: Currently selected blog ID (auto-set)
  • blogger.defaultLabels: Default labels for new posts
  • blogger.googleDriveImageFolder: Custom folder path in Google Drive for uploading images (e.g., “Blog Images” or “Blog Images/2025”)

Known Issues

  • Large images (>10MB) might take longer to upload to Google Drive
  • Very long posts might hit API rate limits
  • Code syntax highlighting depends on Blogger’s theme support
  • Google Drive API rate limits may affect bulk image uploads
  • First-time authentication requires both Blogger and Google Drive permissions

Release Notes

1.0.2

  • Allow user to configure GDrive folder for photo uploads
  • Updated instruction to enable GDrive API as well for Blogger VS Code Extension

1.0.1

  • Automatic Image Upload: Local images in markdown are automatically uploaded to Google Drive
  • Smart Deduplication: Identical images are uploaded only once and reused across references
  • Public Image Access: Uploaded images are automatically made publicly accessible
  • Enhanced Progress Tracking: Detailed progress indicators during image upload and publishing
  • Google Drive Integration: Seamless integration with Google Drive API for image storage

1.0.0

Initial release of Blogger Publisher extension:

  • Markdown to HTML conversion
  • Direct publishing to Blogger.com
  • OAuth 2.0 authentication
  • Draft and live publishing support
  • Multi-blog support
  • Preview functionality

Contributing

Found a bug or want to suggest a feature? Please create an issue on our GitHub repository.

License

This extension is licensed under the MIT License.

Enjoy blogging directly from VS Code with automatic image management! 🎉

Tips for Best Experience

  • Keep local images in a consistent folder structure relative to your markdown files
  • Use descriptive alt text for images for better accessibility
  • The extension works best with images under 10MB for faster upload times
  • Your Google Drive will contain uploaded blog images - you can organize them in folders if needed
Tags

Suryakand

Digital Engineering and Business Leader | AI and Gen AI Expert | Certified Adobe and Cloud Professional

You may like these posts

Post a Comment

Previous Post Next Post