Home / Essays / Build a Blog With Google Docs and PHP

Build a Blog With Google Docs and PHP

Believe it or not, this essay is a Google Doc. Everything I wrote in Google Docs was automatically converted to HTML. So where is the Google branding? And how is it available through my domain marvinscheffold.com?

Convert a Google Doc to HTML

This is pretty straightforward. Open any Google Doc and Click [File] -> [Share] -> [Publish to Web]. Google will automatically turn your document into an HTML file and publish it on a random domain.

Use Your Own Domain

For this step you need a server you have control over. I chose the webserver I already use for my personal website. It runs PHP and I can access it using FTP.

Next I created a file that fetches a web page and simply returns the HTML. This way you could even pretend to host facebook on your domain. Yes, the web is exciting. Unfortunately we tend to forget that nowadays.

$html = file_get_contents($url);

Remove Google Branding and Add Custom Styling

When you convert a Google Doc to HTML there are two things that suck about it.

  1. There is Google branding
  2. The web page is not mobile friendly at all

To get rid of the Google branding, I added a little CSS to the end of the HTML string.

"#banners{display:none;}”

This works perfectly fine. But when I found out you can actually build and manipulate the “DOM” through PHP, I chose to take the more elegant approach. The following removes the Google branding completely from the HTML.

$document = new DOMDocument;

$document->loadHTML($html);

$bannersElement = $document->getElementById("banners");

$bannersElement->parentNode->removeChild($bannersElement);

Turning the rest of the HTML into something you can actually read on a mobile phone wasn't hard either. First I added a missing meta tag to the document head.

$metaViewportElement = $document->createElement("meta");

$metaViewportElement->setAttribute("name", "viewport");

$metaViewportElement->setAttribute("content", "width=device-width");

$headElement->insertBefore($metaViewportElement, $headElement->firstChild);

Then I wrote a little CSS to make the page look more professional. (The code below also resolves image placement issues and headline styling inconsistencies)  

$headElement = $document->getElementsByTagName("head")->item(0);

$styleElement = $document->createElement("style", "html{overflow-x:hidden;}

body{overflow:hidden} h1,h2,h3,h4,h5,h6,h7{font-weight:normal!important}

#contents{padding-top:100px!important}

.doc-content{max-width:668px!important; margin:0 auto!important; padding:0!important;}

p > span{width:100%!important; height:auto!important}

p > span > img{width:100%!important; height:auto!important}");

$headElement->appendChild($styleElement);

Rewrite Links

I said there are two annoying things about a Google Doc converted to HTML. Actually there are three. Every link you add to your document will be changed to include a Google redirect.

If you add a link to www.example.com, Google will turn it into https://www.google.com/url?q=https://www.example.com

I don't want a redirect on my blog to feel like clicking on a shady facebook ad. Not to mention doing SEO this way will be a pain.

First, I tried to solve this problem with regex. It worked, but wasn't elegant. Besides, what if the link structure suddenly changes? Then my carefully crafted regular expression is worthless.  

Around that time I learned about manipulating the “DOM” with PHP (see above). In the end I chose the following solution.

$hrefElements = $document->getElementsByTagName("a");

foreach ($hrefElements as $hrefElement) {

$href = $hrefElement->getAttribute("href");

$cleanHrefStart = strpos($href, "?q=") + 3;

$cleanHrefEnd = strpos($href, "&sa=D&source=editors");

$cleanHref = substr($href,$cleanHrefStart, $cleanHrefEnd-$cleanHrefStart);

$hrefElement->setAttribute("href", $cleanHref);

}

No More FTP

So far so good. Now we have a web page that is automatically generated out of a Google Doc. It actually looks nice (even on mobile) and all the links are working properly.

What more could I want? How about not opening my FTP client every time I want to publish a new essay.

To accomplish this I needed some kind of database. Somewhere I can list all the essays I want to be published. I also need to define slugs (This is the variable part of a URL) for my essays. A slug could be: /how-to-get-rich-as-a-street-musician or /build-a-blog-with-google-docs-and-php

What is a database in its purest form? A table with rows and columns.

So I created a Google Doc with a table in it. Each row of the table represents one published essay. The left column is the slug and the right column is the random URL Google assigns each published document.

example-essay

https://random-docs-url

 

Next I wrote a PHP function to access this database and retrieve all my published essays.

function fetchPublishedEssaySlugsWithUrl() {

$html = file_get_contents("https://url-to-my-google-docs-database");

$document = new DOMDocument;

$document->loadHTML($html);

$tableRowElements = $document->getElementsByTagName(("tr"));

$essaySlugsWithUrl = array();

foreach ($tableRowElements as $tableRowElement) {

$columnElements = $tableRowElement->childNodes;

$essaySlugsWithUrl[$columnElements[0]->textContent] = $columnElements[1]->textContent;

}

return $essaySlugsWithUrl;

}

Conclusion

You might be thinking: “Why care? Nobody needs to build a blog in 2023, the problem is solved.” And I guess you're right. It would be much easier to register for Wix.com or get a WordPress account. But then again, there is a special kind of magic in things we build ourselves. This is why setting up that IKEA Pax closet feels better than it should.

The internet is here for all of us to build, design and share what is important to us. I for myself want to participate directly in this magical wonderland. Not through some proxy built by a big internet corporation. Yes, I get the irony. I am still using Google Docs. But the first step has to be made somewhere.

Back to all Essays