Is it Still Up-to-Date to Build a Personal Website Using Google Site?

Is it Still Up-to-Date to Build a Personal Website Using Google Site?

New Google Site Personal Website Building Experience and Setup Tutorial

Update 2022–07–17

Currently, I have used my self-written ZMediumToMarkdown tool to package and download Medium articles and convert them to Markdown format, migrating to Jekyll.

zhgchg.li

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

===

Origin

Last year, when I changed jobs, I “extravagantly” registered a domain name to serve as a personal resume link; after half a year, I thought of making the domain more useful by adding more information. On the other hand, I was also looking for a second website to back up the articles published on Medium, just in case.

Desired Features

• Customizable pages
• Smooth writing interface like Medium
• Interactive features (like/comment/follow)
• Good SEO structure
• Lightweight and fast loading
• Ability to bind to own domain
• Low intrusiveness (ad intrusiveness, site branding)
• Easy to set up

Site Options

1. Self-hosted WordPress A long time ago, I rented a host and domain and used WordPress to build a personal website; from setup to adjusting to my preferred layout, installing plugins, and even developing missing plugins myself, I had no energy left to write. Moreover, it felt cumbersome, and the loading speed/SEO was not as good as Medium. Spending more time fine-tuning it would leave me with even less energy to write.
2. Matters/Jianshu, etc. Similar to the Medium platform, but since I’m not considering monetization, it’s not suitable.
3. wix/weebly are too commercial-oriented, and the free version is 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 Site to create a personal website -> file download center page; the impression is a bit vague, but I remember the layout was cumbersome, and the interface was not smooth. After 10 years, I thought this service had been discontinued. I accidentally saw a domain investor using it to create a domain parking page with contact information for sale:

At first glance, I thought, “Wow! The visuals are nice, they even made a page to sell the domain.” Upon closer inspection of the bottom left corner, I realized, “Wow! It’s built with Google Site,” which is vastly different from the interface I used 10 years ago. After checking, I found out that Google Site had not been discontinued; instead, a new version was launched in 2016. Although it’s been almost five years since then, at least the interface is up-to-date!

Finished Product Showcase

Before saying anything else, let’s take a look at the finished product I made. If you also “feel the same,” you might consider giving it a try!

Home

Personal Resume Page

City Corner (Waterfall Photo Display)

Article Directory (Link to Medium)

Contact Me (Embedded Google Form)

Why Not Give It a Try?

To save reading time, I’ll get straight to the point; I’m still looking for a more suitable service option. Although it is continuously maintained and updated, Google Site has several critical shortcomings that are important to me. Here are the fatal flaws I encountered while using it.

Fatal Flaws

1. Code Highlighting Function Defect The function only shows Code Block with gray background without color changes. If you want to embed Gist, you can only use Embed JavaScript (iframe), but Google Site does not handle it well. The height cannot change with page scaling, resulting in either too much blank space or two scroll bars on small mobile screens, which is very ugly and hard to read.
2. SEO Structure is Basically Zero “Surprised? Not really.” Google’s own service has an SEO structure like 💩. It doesn’t allow customization of any head meta (description/tag/og:). Forget about SEO ranking; just pasting your site link on Line/Facebook and having no preview information, only an ugly URL and site name, is already bad enough.

Advantages

1. Low Intrusiveness, only a floating exclamation mark at the bottom left that shows “Google Collaboration Platform Report Abuse” when clicked

2. Easy-to-use Interface, quickly create pages by dragging components on the right

Similar to wix/weebly or cakeresume? Just drag and fill in the components to complete the layout!

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

4. Supports Landing Page

5. No special traffic limits, capacity depends on the creator’s Google Drive limit

6. 🌟 Can bind to your own domain

7. 🌟 Can directly integrate GA for visitor analysis

8. Official Community collects feedback and continuously maintains updates

9. Supports announcement notifications

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

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

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

13. 🌟 Page layout has reference lines/auto-alignment, very considerate

Reference alignment lines appear when dragging components

Applicable Websites

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

Some Setup Tutorials

List some problems I encountered and solved during use; everything else is WYSIWYG operations, nothing much to record.

How to bind a personal domain?

1. Go to http://google.com/webmasters/verification 2. Click “ Add a property “ and enter “ Your domain “ then click “Continue”

3. Choose your “ Domain name provider “ and copy the “ DNS verification string “

4. Go to your domain name provider’s website (Here we use Namecheap.com as an example, others are similar)

In the DNS settings section, add a new record, select “ TXT Record “ as the type, enter “ @ “ as the host, and enter the DNS verification string you just copied as the value, then click add to submit.

Add another record, select “ CNAME Record “ as the type, enter “ www (or the subdomain you want to use) “ as the host, and enter “ ghs.googlehosted.com. “ as the value, then click add to submit.

Additionally, you can also redirect http://zhgchg.li -> http://www.zhgchg.li

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

5. Go back to Google Master and click verify

If you see “Verification failed” don’t worry! Please wait a bit longer, if it still doesn’t work after an hour, go back and check if there are any mistakes in the settings.

Successfully verified domain ownership

6. Go back to your Google Site settings page

Click the top right “ Gear (Settings) “ and select “ Custom URLs “, enter the domain name you want to assign, or the subdomain you want to use, and click “ Assign “.

After successfully assigning, close the settings window and click the top right “ Publish “ to publish.

Again, you need to wait a bit… waiting for the DNS records to take effect…

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

If you see “This site can’t be reached” don’t worry! Please wait a bit longer, if it still doesn’t work after an hour, go back and check if there are any mistakes in the settings.

Done!

Subpages, Page Path Settings

Subpages will automatically gather and display 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 “…” to operate.

Select properties to customize the page path.

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

Header and Footer Settings

1. Header Settings

Hover over the navigation bar and select “ Add Header “

After adding the 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! Footer information is shared across the entire site, and the same content will be applied to all pages!

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

Set Website Favicon, Header Name, and Icon

favicon

Website Title, Logo

How to set it?

Click the “ Gear (Settings) “ in the top right corner and select “ Brand Images “ to set it. Don’t forget to go back to the page and click “ Publish “ for the changes to take effect!

Hide/Show Last Updated Information and Page Anchor Link Tips

Last Updated Information

Page Anchor Link Tips

How to set it?

Click the “ Gear (Settings) “ in the top right corner and select “ Viewer Tools “ to set it. Don’t forget to go back to the page and click “ Publish “ for the changes to take effect!

Integrate GA Traffic Analysis

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

2. Copy the GA Tracking ID after creation

3. Return to your Google Site settings page

Click the “ Gear (Settings) “ in the top right corner and select “ Analytics “ to enter the “ GA Tracking ID “. Don’t forget to go back to the page and click “ Publish “ for the changes to take effect!

Set Site-wide/Homepage Banner Announcement

Banner Announcement

How to set it?

Click the “ Gear (Settings) “ in the top right corner and select “ Announcement Banner “ to set it. Don’t forget to go back to the page and click “ Publish “ for the changes to take effect!

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

Publish Settings

Top right “Publish ▾”

You can review changes and publish them.

You can set whether to allow search engines to index and disable the content review page before each publish.

Embed Javascript/HTML/CSS, Bulk Images

Gist as an example

But as mentioned in the fatal flaw above, embedding an iframe cannot respond to the height according to the webpage size.

How to insert?

Select “Embed”

Choose embed code

You can enter 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 flow (as seen on my City Corner page).

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

This is because the form contains a “ file upload “ item, which cannot be embedded in other pages using an iframe due to browser security issues; thus, it only shows the survey information and requires clicking the fill button to open a new window to complete the form.

The solution is to remove the file upload item, allowing the form to be filled out directly on the page.

Button component URLs cannot include anchor points

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

According to the official community, this is currently not possible. The button link can only 1. open an external link in a new window or 2. specify an internal page. Therefore, I later used subpages to split the directory.

Further Reading

• [Productivity Tools] Abandon Chrome and Embrace the Sidekick Browser

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

===

本文中文版本

===

This article was first published in Traditional Chinese on Medium ➡️ View Here