经常有朋友问我,不懂互联网技术,怎么拥有自己的个人网站/博客(下文统称个人网站)?他们通常是各自领域的专业者,想要分享自己的学习、研究和实践经验,或者打造个人品牌,却因为不懂互联网技术而畏惧。
我想做一些探索,如何通过一篇文章解决这个问题。我想通过一篇文章,让不懂互联网技术的人,能轻松拥有自己的个人网站。下次有哪位朋友问同样的问题,我把这篇文章发给他/她,就能解决问题。这是我的初心,但事总与愿违。开始写之后发现自己给自己挖了一个大坑,越是想要写成一套完整的解决方案,越难以下手。要把很多线条讲清楚并且通俗易懂,对于目前的我来说是有难度的。
这里,要感谢我的好友 不逃猫 美丽小姐姐给我做心理辅导,给了我很大的启发。这一次,我只写一个方案,先给自己定一个小目标。正所谓,万丈高楼平地起。
本文主要面向新手,如果您有更好的建议,欢迎提出。如果您是新手,不需要完全知道每个步骤的原理,因为要深挖的话,每个点都能写本书。除非您很感兴趣并且有时间,可以顺藤摸瓜慢慢往下学。
摸下去,您会得到什么瓜?
为了更直观地展示,您现在打开的这个网站,就是使用本文的方案搭建的。
Hugo, 一个网站生成器
Hugo, 是一个静态网站生成器,官方说它是世界上最快的网站构建框架。在这里,我们先不研究它是怎么生成网站,咱们先把脚手架搭起来。
Github, 托管您的内容
Git 是一个版本控制系统,Github 可以理解为一个具有版本控制能力的内容托管平台,对于简单的网站应用,使用 Github 提供的免费功能已足够。
拥有 Github 账号
如果您还没有 Github 账号,点击链接https://github.com/signup ,使用邮箱进行注册。
创建存储网站内容的仓库
本站使用的是由 Jimmy 设计的主题 Hugo Theme Stack。作者还提供了方便快速使用的模板,非常感谢作者的的热心奉献。
访问模板仓库 https://github.com/CaiJimmy/hugo-theme-stack-starter,点击 Use this template ,跳转到创建仓库页面。如下图:
输入您的仓库名称,并选择是否公开您的内容(如选 Public,任何人都可以看到这个仓库的内容)。然后点击 Create repository from template 即可。
恭喜您,又前进了一步 🎊
以后对网站的修改、发布新文章都在这里进行。但现在我们先不管它,我们先看看怎么部署我们的网站,让大家都能看到。
Cloudflare, 部署您的网站
Cloudflare 本是一家专注于网络安全的公司,他们有一个 Pages 产品,提供免费的静态网自动化构建和部署服务。
Cloudflare 提供多语言服务,您可以点击右上角的语言下拉菜单,选择中文。考虑到多数读者的母语为中文,以下选择中文作为演示内容。
拥有 Cloudflare 账号
访问 https://dash.cloudflare.com/sign-up,通过邮箱注册一个 Cloudflare 账号。
Cloudflare 会发一封验证邮件到您填写的邮箱,点击链接进行激活。
创建 Page 项目
登录 Cloudflare 后,点击左侧菜单栏的 Pages , 点击 创建项目, 如图:
点击 连接到 Git,点击 连接到 Github,然后在 Github 授权页面,授权 Cloudflare Pages 与仓库进行连接,您可以选择只把当前仓库授权给 Cloudflare, 也可以选择授权所有仓库。
授权完成后,会自动跳转回创建 Page 项目的页面, 点击 连接到 Git,选择一个存储库,点击 开始设置。
输入一个名字,比如 iamwong,平台会分配给您一个域名 iamwong.pages.dev,待完成项目构建,您就可以通过这个网址访问自己的网站。
在 架构预设 一栏,选择 Hugo;在环境变量 下增加一个指定 Hugo 版本的环境变量 HUGO_VERSION
,值为 0.101.0
。如图:
点击 保存并部署,恭喜您,完成网站的自动构建设置。以后只要在 Github 上提交内容更新,Cloudflare 会自动拉去内容,并且自动构建和更新。
等待几十秒后,您将看到一个部署成功的提示,您可以点击平台分配的域名访问自己的网站了,开心吗?
拥有属于自己的域名
什么是域名
我们常见的 google.com
、baidu.com
就是域名,域名指向服务器的 IP 地址。
比如我现在约您去一个餐厅吃饭,告诉您餐厅的经纬度坐标,您是不是很难找到餐厅?但是如果我告诉您一个地址,您在导航软件输入,软件就能把您导航到餐厅。IP 就像一个具体的坐标,而域名就像一个用自然语言描述的地址。
购买域名
市面上有很多域名注册商,通常是按年租用域名的使用权。当然,如果自己想要的域名已经被别人注册了,并且您有经济实力,也可以联系拥有者进行交易,所以域名也是可以流通的。
通常情况下,通过 whois 查询,可以查到域名的注册人信息。有一些注册商倾向于保护注册者隐私,推出了域名隐私保护。由于保护个人隐私也是笔者所强烈提倡的,在这里分享一个笔者常用的注册商 NameSilo,他们提供终身隐私保护服务,也支持支付宝交易。
解析域名
本文以 NameSilo 为例,其他注册商请自行搜索他们的域名解析文档
购买域名后,访问 NameSilo 的域名管理页面 https://www.namesilo.com/account_domains.php 。
在对应的域名后面,点击蓝色按钮,如图:
由于我们是把自己的域名指向 Cloudflare 分配的域名,所以记录类型选择 CNAME。
Hostname 处填写我们想要解析过去的子域名,比如 www
blog
等,Target Hostname 处填写 Cloudflare 分配的域名,例如本文中的 iamwong.pages.dev,TTL 处默认即可。如图:
点击 “SUBMIT” , 等待几分钟,就可以通过自己的域名访问网站啦!
下集预告
恭喜您,完成了脚手架的搭建,接下来可以装修房子啦!
接下来会写一篇关于如何更新文章以及 Hugo 的基本使用等。本文也会根据大家的反馈不断更新迭代,让它能够帮助到更多的人,如果能收到您提出的宝贵建议,笔者会感到无比的开心,感谢 😊。