Google Blogger as CMS??? Free and Easy Blogging Backend???

5 min read

Categories

Blog
CMS
Coding
Full Stack Development
Google Blogger
Portfolio Website
ReactJS
Typescript

Picture this: You’re a cash-strapped computer science student trying to land a CS internship. You’ve built your portfolio website (because everyone in CS does, right?). Now you want a blog section where you can share all the tech stuff you’re learning in school (or maybe just rant about life). But setting up a blog can be a real pain. You could cough up cash for a headless CMS like Sanity, or keep manually committing blog posts directly to your website’s repo. Or you could just give in to Wix or Squarespace (hey Squarespace, I do photography — shoutout @shotbyj.av on Instagram!). None of those options sound ideal for your wallet or your time, do they?




If you’re anything like me, you want a custom-coded portfolio with a blog that doesn’t break the bank or make you pull all-nighters tweaking it. It’s time to say goodbye to complex CMS setups and hello to a budget-friendly (and sanity-saving) solution. Say hello to Google Blogger. It’s free, it’s (relatively) simple, and it lets you focus on writing instead of wrangling code.

Why Not the Fancy CMS Platforms?

Let’s be real: why mess with those flashy CMS platforms? Here’s why you might want to skip ’em:

  • Sanity CMS and GraphQL: They’re fancy, but who has the money for that as a student? S&P 500 or Nvidia can take my cash instead (disclaimer: not financial advice!).

  • Headless WordPress: Setting it up feels like trying to solve a Rubik’s cube (confession: I’ve never solved one in my life). Plugins, server configurations, security setups — just… no.

That’s where Google Blogger comes in. It’s free, it plays nicely with your portfolio (almost like PB&J), and it lets you do what you love — churn out awesome content.

Meet the Blogger API

Google Blogger isn’t just some old-school blogging tool; it’s got a few cool tricks up its sleeve. The Blogger API serves up your content in neat JSON format, which is perfect for bringing your blog to life on your portfolio site without heavy lifting.

The Secret Sauce: Getting Started with the API

Let’s crack open the API door with this simple URL format to fetch your blog’s info:

GET https://www.googleapis.com/blogger/v3/blogs/byurl?url=https://YOUR_BLOGGER_URL.blogspot.com/&key=YOUR_API_KEY

(Replace YOUR_BLOGGER_URL with your Blogger blog’s URL.)

Here’s an example of what you’ll get back from that request:

{
    "kind": "blogger#blog",
    "id": "YOUR_BLOG_ID",
    "name": "BlogName",
    "description": "",
    "published": "2024-11-10T04:08:44-08:00",
    "updated": "2024-11-10T12:04:01-08:00",
    "url": "http://YourName.blogspot.com/",
    "selfLink": "https://www.googleapis.com/blogger/v3/blogs/###",
    "posts": {
        "totalItems": 2,
        "selfLink": "https://www.googleapis.com/blogger/v3/blogs/###/posts"
    },
    "pages": {
        "totalItems": 0,
        "selfLink": "https://www.googleapis.com/blogger/v3/blogs/###/pages"
    },
    "locale": {
        "language": "en",
        "country": "GB",
        "variant": ""
    }
}

Pretty neat, right? Let’s keep the fun going!

Pulling Your Blog Posts

Want to grab all your blog posts? Here’s the endpoint for that:

GET https://www.googleapis.com/blogger/v3/blogs/YOUR_BLOG_ID/posts?key=YOUR_API_KEY

Once you have the list of posts, you can zoom in on a specific post by its ID with this URL:

GET https://www.googleapis.com/blogger/v3/blogs/YOUR_BLOG_ID/posts/POST_ID?key=YOUR_API_KEY

These endpoints return all the good stuff like id, title, content, published, updated, labels (tags), and url — basically everything you need to make your blog shine on your portfolio site.

Making the API Dance with Your Portfolio

Now that you can fetch your Blogger content as JSON, how do you display it on your site? To render the HTML content of your posts in a React application, you can use html-react-parser – an NPM package that turns raw HTML strings into actual React elements your browser can show off.

Sample Code: Fetching Posts in TypeScript

Here’s some sample code (in TypeScript) that you can copy and paste (and even let ChatGPT handle, if you’re feeling lazy) to fetch posts from the Blogger API in a React/Next.js project:

// fetchPosts.ts

export interface Post {
  id: string;
  title: string;
  content: string;
  published: string;
  updated: string;
  url: string;
  labels?: string[];
}

const apiKey = "YOUR_API_KEY";
const blogId = "YOUR_BLOG_ID";

export async function fetchPosts(): Promise<Post[]> {
  const response = await fetch(
    `https://www.googleapis.com/blogger/v3/blogs/${blogId}/posts?key=${apiKey}`
  );
  if (!response.ok) {
    throw new Error("Failed to fetch posts");
  }
  const data = (await response.json()) as { items: Post[] };
  return data.items;
}

// Fetch a single post by ID
export async function fetchPostById(postId: string): Promise<Post | null> {
  const res = await fetch(
    `https://www.googleapis.com/blogger/v3/blogs/${blogId}/posts/${postId}?key=${apiKey}`,
    {
      // If using Next.js, this option enables ISR (revalidate every 60 seconds)
      next: { revalidate: 60 },
    }
  );
  if (res.status === 404) {
    return null;
  }
  if (!res.ok) {
    throw new Error("Failed to fetch the post");
  }
  const post = (await res.json()) as Post;
  return post;
}

Displaying Content with html-react-parser

Now, let’s make that blog content pop on your site. First, install the parser library:

npm install html-react-parser

Then you can use it in your React components to safely render the HTML from your Blogger post content:

import parse from 'html-react-parser';

function BlogPost({ content }: { content: string }) {
  // 'content' is a string of HTML from the Blogger post
  return <div>{parse(content)}</div>;
}

With this setup, your Blogger post content (which comes as an HTML string in the JSON) will be parsed and displayed as actual elements on your page.

Perks of Using Google Blogger

  • No More Re-deploys: Your content lives on Blogger, so adding a new post doesn’t mean redeploying your site. Just publish on Blogger and your portfolio site can pull in the new post dynamically.

  • Goodbye, Markdown: Write your posts in Blogger’s built-in WYSIWYG editor and skip the hassle of managing Markdown or .tsx files for each post.

  • Free: It costs you absolutely nothing. Your blog backend is on Google’s dime.

  • More Writing, Less Fuss: Spend your time typing away at 180+ wps (words per second… just kidding 😂) instead of fiddling with CMS configuration. In short, more blogging, less debugging.

Check Out My Example

Want to see this setup in action on a real site? Head over to javianng.com/blog and take a look at my portfolio blog page powered by Blogger.

So there you have it! With Google Blogger’s API, you can build a blog-integrated portfolio that’s not only easy-peasy to set up but also super friendly on your wallet. Focus on what matters – writing and sharing your awesome content – without drowning in code or costs. I hope this inspires you to build your own blog-powered portfolio. Give it a try and let your creativity shine. Now go build something amazing and happy blogging! 🎉

👋 Connect with Me

I’m Javian Ng, an aspiring Full-Stack Infrastructure Architect & LLM Solutions Engineer based in Singapore. I love building scalable infrastructure and AI systems.

Feel free to reach out or explore more about my projects and experiences.