Google Site Personal Website｜Modern Setup and Experience Guide

点击这里查看本文章简体中文版本。

點擊這裡查看本文章正體中文版本。

This post was translated with AI assistance — let me know if anything sounds off!

---

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

New Google Site Personal Website Creation Experience and Setup Guide

Update 2022–07–17

I have used my own tool, ZMediumToMarkdown, to download and convert Medium articles into Markdown format for migration to Jekyll.

zhgchg.li

• Step-by-step painless transfer tutorial click here 🚀🚀🚀🚀🚀

===

Origin

When I changed jobs last year, I somewhat frivolously registered a domain to serve as a personal resume link. After six months, I thought of making the domain more useful by adding more information. At the same time, I was looking for a second website to back up the articles I published on Medium, just in case.

Expected Features

• Is there a custom page available?

• A smooth writing interface like Medium

• Interactive features (Like/Comment/Follow)

• Good SEO structure

• Lightweight and fast loading

• Can bind your own domain

• Low intrusiveness (Ad intrusiveness, website labeling)

• Easy to build

Hosting Options

1. Self-Hosted WordPress
   A long time ago, I rented hosting and a domain to set up a personal website using WordPress. After setting it up, customizing the layout to my liking, installing plugins, and even developing missing plugins myself, I lost the motivation to write. It felt bulky, and the loading speed and SEO were not as good as Medium. Spending more time tweaking it would only drain my energy for writing even further.

2. Matters/简书… etc.
   Similar to the Medium platform, but since I don’t consider profitability, it’s not suitable.

3. wix/weebly are too focused on business websites, and their free versions are too intrusive.

4. Google Site (This Article)

5. Github Pages + Jekyll

6. Still looking »> Suggestions are welcome

About Google Site

Around 2010, I used the old version of Google Sites to create a personal website -> a file download center page. My memory is a bit vague, but I only remember the layout was bulky and the interface was not smooth. After 10 years, I thought the service had been discontinued, but I accidentally saw some domain investors using it as a domain parking page with contact info for sale:

At first glance, I thought, “Wow! The visuals are nice, they even made a page just to sell a domain.” Looking closer at the bottom left corner’s watermark, I realized, “Wow! This was built with Google Sites,” which is completely different from the interface I used 10 years ago. After checking, I found out Google Sites hasn’t stopped service; instead, it launched a new version in 2016. Although it’s been almost five years, at least the interface is now modern!

Finished Product Display

Don’t say anything yet, first check out the final product I made. If you also have a “kindred spirit,” you might want to give it a try!

Home

Personal Resume Page

City Corner (Waterfall Photo Layout)

Table of Contents (link back to Medium)

Contact Me (Embedded Google Form)

Why not give it a try?

To save reading time, here is my conclusion first; I am still looking for a better service option. Although it is continuously maintained and updated, Google Site fails to meet several key needs for me. Below are the critical drawbacks I encountered while using it.

Fatal Flaws

1. Code Highlighting Limitations
   The feature only provides a gray background for code blocks without color syntax highlighting. To embed a Gist, you must use Embed JavaScript (iframe), but Google Site does not handle this well. The height cannot adjust with page scaling, resulting in either excessive blank space or dual scroll bars on small mobile screens, which looks ugly and is hard to read.

2. SEO structure is basically zero
   “Surprised or not?” Google’s own service results have terrible SEO structure, offering no customization for head meta (description/tag/og:). Forget about SEO ranking; just sharing the site on Line/Facebook shows no preview info, only an ugly URL and site name.

Advantages

1. Low invasiveness, only a floating exclamation mark appears at the bottom left, and clicking it will display “Google Workspace Report Abuse”

2. Easy Interface: Quickly Build Pages by Dragging Components on the Right

Similar to wix/weebly or cakeresume? Layout and components are just dragged and filled to complete!

3. Support RWD, Built-in Search, Navigation Bar

4. Support for Landing Page

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

6. 🌟 Custom Domain Binding Available

7. 🌟 Direct Integration with GA for Visitor Analysis

8. Official Community collects feedback and continuously maintains updates

9. Support Announcement Alerts

10. 🌟 Seamlessly embed Youtube, Google Forms, Google Slides, Google Docs, Google Calendar, Google Maps, with support for responsive design on both desktop and mobile

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

12. Clean and simple URLs (http://example.com/page-name/subpage-name), customizable page path names

13. 🌟 Page layout has guidelines/auto-alignment, very thoughtful

Dragging a component shows alignment guide lines

Applicable Websites

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

Some Setup Instructions

List some problems you encountered and solved during use; everything else is straightforward and doesn’t need to be documented.

How to Bind a Personal Domain?

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

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

4. Go to the domain service provider’s website (Here we use Namecheap.com as an example, similar for others)

Add a new record in the DNS settings section. Select the type “TXT Record”, enter “@” for the host, and input the copied DNS verification string as the value. Then click Add to submit.

Add a new record, select the type “CNAME Record”, enter “www (or your desired subdomain)” for the host, and enter “ghs.googlehosted.com.” for the value, then click Add to submit.

You can also redirect more from http://zhgchg.li -> http://www.zhgchg.li

After setting this up, please wait a moment… waiting for the DNS records to take effect…

5. Return to Google Master and click Verify

If you see “Verification of resources failed”, don’t worry! Please wait a moment. If it still doesn’t work after more than an hour, double-check your settings for any errors.

Successfully Verified Domain Ownership

6. Return to your Google Site settings page

Click the top right “Gear (Settings)” icon, select “Custom URL,” enter the domain name or subdomain you want to assign, then click “Assign.”

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

Please wait a moment here… waiting for the DNS record to take effect…

7. Open a new browser and enter the URL to see if it can be accessed normally

If you see “Page cannot be opened”, don’t worry! Please wait a moment. If it still doesn’t open after more than 1 hour, check your settings for any errors.

Done!

Subpage and Page Path Settings

Subpages in the navigation menu will automatically expand and display.

How to Set Up?

Switch to the “Pages” tab on the right.

You can add a new page by dragging it under an existing page to make it a subpage, or by clicking the “…” for options.

Selecting attributes allows customization of the page path.

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

Page Header and Footer Settings

1. Header Settings

Hover the mouse over the navigation bar and select “Add Header”

After adding the header, moving the mouse to the bottom left corner allows you to change the image, enter the title text, and change the header type.

2. Footer Settings

Hover the mouse at 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 use the same content!

You can also click the “eye” icon at the bottom left to toggle the display of footer information on this page

Set Website Favicon, Header Name, and Icon

favicon

Website Title, Logo

How to Set Up?

Click the “Gear (Settings)” icon at the top right and select “Brand Image” to set it up. After setting, don’t forget to return to the page and click “Publish” to apply the changes!

Hide/Show Page Last Updated Info and Page Anchor Link Tips

Last Updated Information

Page Anchor Link Tip

How to Set Up?

Click the “Gear (Settings)” icon in the top right corner and select “Viewer Tools” to configure. After setting, don’t forget to return to the page and click “Publish” for the changes to take effect!

Integrate GA to Analyze Traffic

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 (Settings)” icon at the top right, select “Analytics,” and enter the “GA Tracking ID” to set it up. Don’t forget to return to the page and click “Publish” for the changes to take effect!

Set Site-wide/Homepage Banner Announcement

Banner Announcement

How to Set Up?

Click the “Gear (Settings)” icon at the top right and select “Announcement Banner” to set it up. After setting it, don’t forget to go back to the page and click “Publish” for it to take effect!

You can specify the banner message content, color, button text, click-through link, whether to open in a new tab, and set it to display site-wide or only on the homepage.

Release Settings

Top right corner “Publish ▾”

You can review the changes and publish.

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

Embedding Javascript/HTML/CSS, Large Number of Images

Example of Gist

However, as mentioned in the fatal flaw above, embedding an iframe cannot adjust its height responsively according to the webpage size.

How to Insert?

Choose “Embed”

Choose Embed Code

Allows input of JavaScript/HTML/CSS, which can be used to create custom styled Button UI.

Alternatively, selecting “Image” allows inserting multiple pictures, which will be displayed in a waterfall layout (like my City Corner page above).

Embedded Google Forms cannot be filled out directly on the page?

The reason is that the form includes a “File Upload” field, which cannot be embedded in other pages using an iframe due to browser security restrictions; therefore, only the survey information is displayed, and users must click the fill button to open a new window to complete the form.

The solution is simply to remove the file upload issue, allowing direct input on the page.

Button Component URL Content Cannot Include Anchors

EX: #lifesection, I want to place it at the top of the page as a table of contents or at the bottom as a GoTop button.

Checked the official community, currently it’s not possible. The button link can only 1. open an external link in a new window or 2. specify an internal page. So I ended up splitting the menu using subpages.

Further Reading

• [Productivity Tools] Ditching Chrome for the Sidekick Browser

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

---

This post was originally published on Medium (View original post), and automatically converted and synced by ZMediumToMarkdown.

Improve this page on Github.

Follow Me on Medium 1K+ Followers