Google Site 个人网站建置教学｜优缺点解析与网域绑定设定全攻略

Click here to view the English version of this article.

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

基于 SEO 考量，本文标题与描述经 AI 调整，原始版本请参考内文。

---

使用 Google Site 建立个人网站还跟得上时代吗？

新 Google Site 个人网站建立经验及设定教学

Update 2022–07–17

目前已透过我自己撰写的 ZMediumToMarkdown 工具将 Medium 文章打包下载并转换为 Markdown 格式，搬迁到 Jekyll。

zhgchg.li

• 手把手无痛转移教学可点此 🚀🚀🚀🚀🚀

===

起源

去年换工作时，很「虚花」的注册了个 域名 来做个人履历的导向连结；时隔半年想说让域名更有用一些能放更多资讯、另一方面也是一直在寻觅第二网站备份 Medium 上已发表的文章，以防有个万一。

期望功能

• 可有自订页面

• 跟 Medium 一样的流畅写作介面

• 互动功能（按赞/留言/追踪）

• SEO结构好

• 轻量载入快

• 能绑定自己的网域

• 侵入性低 (广告侵入性、网站标注)

• 建置容易

架站选择

1. 自架 WordPress 很久以前租过主机、网域，使用 WordPress 架过个人网站；从架设到调整到自己喜爱的版面样式、安装 Plugin/甚至自己开发缺少的 Plugin 完以后，我已没有心力写作，而且觉得很笨重、载入速度/SEO 也不如 Medium，要再继续花时间调校，那就更没有写作的心力了。

2. Matters/简书…之类 跟 Medium 平台差不多，因我不考虑盈利方面，不适合。

3. wix/weebly 太偏商业网站，且免费版侵入性太强

4. Google Site（本篇）

5. Github Pages + Jekyll

6. 还在找 >>> 欢迎提供建议

关于 Google Site

大约 2010 年时有用过旧版的 Google Site，当初拿来做个人网站的 -> 档案下载中心页面；印象已有点模糊，只记得那时候的版面很笨重、介面用起来也很不顺；事隔 10 年，我本来以为这个服务已经收收掉了，无意间喵到有网域投资者，拿来做域名停泊页放出售联络资讯：

第一眼看到的时候觉得「哇！视觉不错，居然为了卖网域弄了个页面」；仔细一下左下角浮标，才发现「哇！居然是 Google Site 建的」，跟我 10 年前用的介面天差地远，查了一下才知道 Google Site 没有停止服务，反而在 2016 年推出全新版本，虽然也距今快五年，但至少介面跟得上时代了！

成品展示

什么都先别说，先来看我做的成品，如果你也「心有灵犀」可以考虑使用看看！

首页

个人简历页

城市一隅(瀑布流相片呈现)

文章目录(连回 Medium)

与我联络 (内嵌 Google 表单)

何不试试？

节省阅读时间，我 先讲结论；我依然在寻找更合适的服务选项 ，虽然他有在持续维护更新功能，但 Google Site 有几个对我很重要点需求无法满足，以下列举我在使用上遇到的致命缺点。

致命缺点

1. 程式码高亮功能缺陷 功能只有 Code Block 底色反灰显示 不会变色，若要嵌入 Gist 只能使用 Embed JavaScript (iframe)，但 Google Site 没有特别处理，高度无法随页面缩放进行改变，要马空白太多、要马手机小萤幕上会出现里外两个 ScrollBar，非常丑也不好阅读。

2. SEO 结构基本为零 「惊不惊喜、益不意外?」Google 自己的服务结果 SEO 结构跟💩ㄧ样，不给客制任何 head meta (description/tag/og:) 先别管 SEO 收录排名，光把自己的网站贴到 Line/Facebook 等社群，没有任何预览资讯，只有丑丑的网址跟网站名称而已。

优点

1.侵入性低，仅左下会有悬浮惊叹号点了才会显示「Google 协作平台 检举滥用」

2.介面易用，右边元件拉一拉就能快速建立页面

类似 wix/weebly. .or cakeresume? 版面配置、元件拉一拉填一填就完成了！

3. 支援 RWD、内建搜寻、导航列

4.支援 Landing Page

5.流量无特别限制、容量按照创建者的 Google Drive 容量上限

6. 🌟 可绑定自己的网域

7. 🌟 可直接串GA分析访客

8. 官方社群 会收集意见、持续维护更新

9. 支援公告提示

10. 🌟 无痛完美嵌入 Youtube、Google 表单、Google 简报、Google 文件、Google 行事历、 Google 地图，且支援 RWD 电脑/手机浏览

11. 🌟 页面内容支援 JavaScript/Html/CSS 内嵌

12. 网址干净简洁(http://example.com/页面名/子页面名)、页面路径名可自订

13. 🌟 页面排版有参考线/自动对齐，非常贴心

拖曳元件位置会出现参考对齐线

适用网站

我觉得 Google Site 只适合非常轻量的网页服务，例如学校社团、小活动的网页、个人简历。

一些设定教学

列举一些自己在使用上遇到＆解决的问题；其他都是所见即所得的操作，没有什么好纪录的。

如何绑定个人网域？

1. 前往 http://google.com/webmasters/verification 2. 点击「 新增资源 」输入「 您的网域」 点击 「继续」

3. 选择您的「 网域服务供应商 」复制 「 DNS 设定验证字串 」

4. 前往网域服务供应商的网站 (这边以 Namecheap.com 为例，大同小异)

在 DNS 设定区块新增一笔纪录，类型选「 TXT Record 」、主机输入「 @ 」、值输入 刚复制的DNS 设定验证字串 ，按新增送出。

再新增一笔纪录，类型选「 CNAME Record 」、主机输入「 www (或你想用的子网域) 」、值输入「 ghs.googlehosted.com. 」按新增送出。

另外也可多转址 http://zhgchg.li -> http://www.zhgchg.li

这边设定完需要稍等一下…等待 DNS 纪录生效。。。

5. 回到 Google Master 按验证

若出现 「验证资源失败」 别急！请再稍等一下，如果超过 1 小时都还是无法，再回头检查一下设定是否有误。

成功验证网域所有权

6. 回到您的 Google Site 设定页面

点击右上角「 齿轮(设定) 」选择「 自订网址 」输入想要指派的网域名称，或你想用的子网域，按「 指派 。

指派成功后关闭设定视窗，点击右上角的「 发布 」发布。

这边一样需要稍等一下…等待 DNS 纪录生效。。。

7. 新开一个浏览器输入网址试试看能不能正常浏览

若出现 「网页无法开启」 别急！请再稍等一下，如果超过 1 小时都还是无法，再回头检查一下设定是否有误。

完成!

子页面、页面路径设定

再导航列目录子页面会自动聚集显示

如何设定？

右方切换到「页面」页签。

可新增页面用拖曳的方式拖到现有页面下就会变成子页面、或点击「…」操作。

选择属性可自订页面路径。

输入路径名称（EX: dev -> http://www.zhgchg.li/dev）

页首页尾设定

1.页首设定

滑鼠移到导航列，选择「 新增页首 」

新增页首后滑鼠移到左下角就能变更图片、输入标题文字、变更标头类型

2.页尾设定

滑鼠移到页面底部，选择「 编辑页尾 」即可输入页尾资讯。

注意！页尾资讯是全站共用的，所有页面都会套用同样的内容！

也可点左下角的「眼睛」，控制本页是否要显示页尾资讯

设定网站 favicon 、标头名称、图示

favicon

网站标题、Logo

如何设定？

点击右上角「 齿轮(设定) 」选择「 品牌图片 」即可设定，设定完别忘了回到页面按「 发布 」才会生效喔！

隐藏/显示页面最后更新资讯、页面锚点连结提示

最后更新资讯

页面锚点连结提示

如何设定？

点击右上角「 齿轮(设定) 」选择「 检视者工具 」即可设定，设定完别忘了回到页面按「 发布 」才会生效喔！

串接 GA 分析流量

1.前往 https://analytics.google.com/analytics/web/?authuser=0#/provision/SignUp 建立新 GA 帐户

2.建立完成后复制 GA 追踪 ID

3.回到您的 Google Site 设定页面

点击右上角「 齿轮(设定) 」选择「 分析 」输入「 GA 追踪 ID 」即可设定，设定完别忘了回到页面按「 发布 」才会生效喔！

设定全站/首页横幅公告

横幅公告

如何设定？

点击右上角「 齿轮(设定) 」选择「 公告横幅 」即可设定，设定完别忘了回到页面按「 发布 」才会生效喔！

可指定横幅讯息内容、颜色、按钮文字、点击前往连结、是否在新分页开启、设定全站 or 仅首页显示。

发布设定

右上角「发布 ▾」

可检查变更内容并发布。

可设定是否让搜寻引擎收录及取消每次发布都要先跳检查内容页。

嵌入 Javascript/HTML/CSS、大量图片

Gist 为例

但如上述致命缺点所说，嵌入 iframe 无法依照网页大小响应高度。

如何插入？

选「内嵌」

选择嵌入程式码

可输入 JavaScript/HTML/CSS，可拿来做自订样式的 Button UI。

另外选「图片」插入可插入多张图片，会以瀑布流呈现(如上述我的 城市一隅 页面)。

内嵌的 Google 表单无法在页面直接填写？

这个原因是因为表单题目中有「 档案上传 」项目， 因浏览器安全性问题无法使用 iframe 嵌入在其他页面中 ；所以会变成只显示问券资讯然后要点击填写按钮新开视窗前往填写内容。

解决办法只有拿掉档案上传的问题，就能直接在页面内进行填写了。

按钮元件网址内容不能输入锚点

EX: #lifesection，我想拿来放页面上方，做目录索引浏览或页底做 GoTop 按钮

查了下官方社群，目前不行，按钮的连结就只能 1.输入外部连结在新视窗中开启或 2. 指定内部页面，所以我后来用子页面的方式来拆分目录了。

延伸阅读

• [生产力工具] 抛弃 Chrome 投入 Sidekick 浏览器的怀抱

有任何问题及指教欢迎 与我联络 。

---

本文首次发表于 Medium (点击查看原始版本)，由 ZMediumToMarkdown 提供自动转换与同步技术。

Improve this page on Github.

Follow Me on Medium 1K+ Followers