Is Using Google Sites to Build a Personal Website Still Relevant?

---

ℹ️ℹ️ℹ️ The following content is translated by OpenAI.

Click here to view the original Chinese version. | 點此查看本文中文版

---

Is Using Google Sites to Build a Personal Website Still Relevant?

Experience and setup guide for creating a personal website with the new Google Sites.

Update 2022–07–17

I have successfully packaged and downloaded my Medium articles using my own tool, ZMediumToMarkdown, and converted them to Markdown format for migration to Jekyll.

zhgchg.li

• Click here for a step-by-step painless migration guide 🚀🚀🚀🚀🚀

===

Background

Last year, when I changed jobs, I whimsically registered a domain to serve as a link to my personal resume. After six months, I thought it would be more useful to provide more information. Additionally, I was looking for a backup site for the articles I had published on Medium, just in case.

Desired Features

• Customizable pages
• A smooth writing interface similar to Medium
• Interactive features (likes/comments/following)
• Good SEO structure
• Lightweight and fast loading
• Ability to bind my own domain
• Low intrusiveness (advertising and site branding)
• Easy to set up

Options for Building a Website

1. Self-hosted WordPress
   I used to rent a server and domain a long time ago and built a personal website with WordPress. After setting it up, customizing the layout, installing plugins, and even developing missing plugins, I found I had no energy left for writing. It felt heavy, and the loading speed/SEO was not as good as Medium. If I continued to spend time tweaking it, I would have even less motivation to write.
2. Platforms like Matters/Jianshu
   Similar to Medium, but since I’m not considering monetization, they are not suitable for me.
3. Wix/Weebly
   Too commercial-focused, and the free versions are too intrusive.
4. Google Sites (this article)
5. GitHub Pages + Jekyll
6. Still searching »> Suggestions welcome!

About Google Sites

I used the old version of Google Sites around 2010 to create a personal website and a file download center. My memory is a bit hazy, but I remember the interface being clunky and not user-friendly. Ten years later, I thought this service had been discontinued, but I stumbled upon a domain investor using it to create a landing page with contact information for selling the domain:

At first glance, I thought, “Wow! This looks nice; they made a page to sell the domain.” Upon closer inspection of the bottom left corner, I realized, “Wow! This is built with Google Sites.” The interface is worlds apart from what I used ten years ago. I found out that Google Sites has not been discontinued; instead, a new version was launched in 2016. Although it’s been almost five years, at least the interface has kept up with the times!

Showcase of My Work

Before saying anything else, let’s take a look at the product I created. If you resonate with it, you might want to give it a try!

Home

Resume Page

City Corner (Masonry Photo Display)

Article Directory (Linking Back to Medium)

Contact Me (Embedded Google Form)

Why Not Give It a Try?

To save reading time, I’ll get straight to the conclusion: I am still looking for a more suitable service option. Although Google Sites continues to maintain and update its features, there are several critical needs that it fails to meet for me. Here are some fatal drawbacks I encountered while using it.

Fatal Drawbacks

1. Code Highlighting Issues
   The feature only provides a gray background for Code Blocks without color changes. If you want to embed Gist, you can only use Embed JavaScript (iframe), but Google Sites does not handle this well. The height cannot adjust with the page scaling, resulting in either too much blank space or two scroll bars on small mobile screens, which is very unattractive and hard to read.
2. Basic SEO Structure is Nonexistent
   “Surprised? Not really?” The SEO structure of Google’s own service is as bad as 💩. It doesn’t allow any customization of head meta (description/tag/og:). Forget about SEO indexing and ranking; just sharing your website on Line/Facebook and other social media provides no preview information, only an ugly URL and the website name.

Advantages

1. Low intrusiveness; only a floating exclamation mark in the bottom left corner that shows “Google Collaboration Platform Report Abuse” when clicked.

2. User-friendly interface; components can be easily dragged and dropped to quickly create pages.

Similar to Wix/Weebly or Cakeresume, just drag and drop components to complete the layout!

3. Supports RWD, built-in search, and navigation bar.

4. Supports Landing Pages.

5. No special traffic limits; storage is based on the creator’s Google Drive capacity.

6. 🌟 Can bind your own domain.

7. 🌟 Can directly integrate GA for visitor analysis.

8. Official community collects feedback and continues to maintain updates.

9. Supports announcement prompts.

10. 🌟 Seamlessly embed YouTube, Google Forms, Google Slides, Google Docs, Google Calendar, Google Maps, and supports RWD for both desktop and mobile browsing.

11. 🌟 Page content supports embedded JavaScript/HTML/CSS.

12. Clean and simple URLs (http://example.com/page-name/sub-page-name), and page path names can be customized.

13. 🌟 Page layout has reference lines/auto-alignment, which is very thoughtful.

Dragging components shows reference alignment lines.

Suitable Websites

I believe Google Sites is only suitable for very lightweight web services, such as school clubs, small event pages, or personal resumes.

Some Setup Guides

Here are some issues I encountered and solved while using it; the rest are straightforward operations with a WYSIWYG interface, so there’s not much to document.

How to Bind a Personal Domain?

1. Go to http://google.com/webmasters/verification
2. Click “ Add Property “ and enter “ Your Domain “, then click “Continue”.

3. Choose your “ Domain Service Provider “ and copy the “ DNS Verification String “.

4. Go to your domain service provider’s website (using Namecheap.com as an example; the process is similar).

In the DNS settings section, add a record, select “ TXT Record “, enter “ @ “ for the host, and paste the DNS Verification String you just copied, then submit.

Next, add another record, select “ CNAME Record “, enter “ www (or your desired subdomain) “ for the host, and input “ ghs.googlehosted.com. “, then submit.

You can also redirect http://zhgchg.li to http://www.zhgchg.li.

After setting this up, you’ll need to wait a bit for the DNS records to take effect…

5. Return to Google Master and click verify.

If you see “ Verification of resource failed “, don’t worry! Just wait a bit longer. If it’s still not working after an hour, double-check your settings for any errors.

Successfully verified domain ownership.

6. Return to your Google Site settings page.

Click the gear icon (settings) in the upper right corner, select “ Custom URL “, enter the domain name you want to assign or the subdomain you wish to use, and click “ Assign “.

After successful assignment, close the settings window and click “ Publish “ in the upper right corner to publish.

You’ll also need to wait a bit for the DNS records to take effect…

7. Open a new browser and enter the URL to see if it works.

If you see “ The webpage cannot be opened “, don’t worry! Just wait a bit longer. If it’s still not working after an hour, double-check your settings for any errors.

Done!

Subpages and Page Path Settings

Subpages will automatically cluster in the navigation menu.

How to set it up?

Switch to the “Pages” tab on the right.

You can add a page and drag it under an existing page to make it a subpage, or click “…” for options.

Select properties to customize the page path.

Enter the path name (e.g., dev -> http://www.zhgchg.li/dev).

Header and Footer Settings

1. Header Settings

Hover over the navigation bar and select “ Add Header “.

After adding a header, hover over the bottom left corner to change the image, enter the title text, and change the header type.

2. Footer Settings

Hover over the bottom of the page and select “ Edit Footer “ to enter footer information.

Note! The footer information is shared across the entire site, and all pages will apply the same content!

You can also click the eye icon in the bottom left corner to control whether to display footer information on this page.

Setting the Website Favicon, Header Name, and Icon

Favicon.

Website Title, Logo.

How to set it up?

Click the gear icon (settings) in the upper right corner and select “ Brand Image “ to set it up. Don’t forget to return to the page and click “ Publish “ for the changes to take effect!

Hiding/Showing Last Updated Information and Page Anchor Link Prompts

Last Updated Information.

Page Anchor Link Prompt.

How to set it up?

Click the gear icon (settings) in the upper right corner and select “ Viewer Tools “ to set it up. Don’t forget to return to the page and click “ Publish “ for the changes to take effect!

Integrating GA for Traffic Analysis

1. Go to https://analytics.google.com/analytics/web/?authuser=0#/provision/SignUp to create a new GA account.

2. After creation, copy the GA Tracking ID.

3. Return to your Google Site settings page.

Click the gear icon in the upper right corner ( Settings ) and select Analytics to enter your GA Tracking ID. Don’t forget to return to the page and click Publish for the changes to take effect!

Setting Up Sitewide/Homepage Banner Announcements

Banner Announcement

How to Set It Up?

Click the gear icon in the upper right corner ( Settings ) and select Announcement Banner to set it up. After configuring, remember to return to the page and click Publish for it to take effect!

You can specify the banner message content, colors, button text, the link to navigate to, whether to open in a new tab, and whether to display sitewide or only on the homepage.

Publishing Settings

Publish in the upper right corner

You can review the changes and publish them.

You can set whether to allow search engines to index the site and disable the content review page that appears before each publication.

Embedding Javascript/HTML/CSS and Multiple Images

Example with Gist

However, as mentioned in the critical drawbacks above, embedding an iframe cannot adjust its height responsively based on the webpage size.

How to Insert?

Select “Embed”

Choose Embed Code

You can input JavaScript/HTML/CSS to create custom styled Button UI.

Additionally, selecting “Image” allows you to insert multiple images, which will be displayed in a waterfall layout (like my City Corner page above).

Can’t Fill Out Embedded Google Forms Directly on the Page?

This is because the form includes a File Upload question, which cannot be embedded in other pages using iframe due to browser security issues; thus, it only displays the questionnaire information and requires clicking the fill-out button to open a new window for input.

The only solution is to remove the file upload question, allowing users to fill it out directly on the page.

Anchor Links Cannot Be Entered in Button Component URLs

For example: #lifesection, which I want to use at the top of the page for a directory index or at the bottom for a GoTop button.

I checked with the official community, and currently, it’s not possible. The button links can only 1. open external links in a new window or 2. specify internal pages, so I ended up using subpages to split the directory.

Further Reading

• [Productivity Tools] Abandoning Chrome for the Embrace of Sidekick Browser

If you have any questions or suggestions, feel free to contact me.

---

This article was first published on Medium ➡️ Click Here

Automatically converted and synchronized using ZMediumToMarkdown and Medium-to-jekyll-starter.

Improve this page on Github.

Follow Me on Medium 988+ Followers

19,522 Total Views
Last Statistics Date: 2025-03-10 | 19,263 Views on Medium.