一个低成本的个人网站方案

最多只需一个域名的钱,没有互联网技术的人也能上手的个人网站方案

经常有朋友问我,不懂互联网技术,怎么拥有自己的个人网站/博客(下文统称个人网站)?他们通常是各自领域的专业者,想要分享自己的学习、研究和实践经验,或者打造个人品牌,却因为不懂互联网技术而畏惧。

我想做一些探索,如何通过一篇文章解决这个问题。我想通过一篇文章,让不懂互联网技术的人,能轻松拥有自己的个人网站。下次有哪位朋友问同样的问题,我把这篇文章发给他/她,就能解决问题。这是我的初心,但事总与愿违。开始写之后发现自己给自己挖了一个大坑,越是想要写成一套完整的解决方案,越难以下手。要把很多线条讲清楚并且通俗易懂,对于目前的我来说是有难度的。

这里,要感谢我的好友 不逃猫 美丽小姐姐给我做心理辅导,给了我很大的启发。这一次,我只写一个方案,先给自己定一个小目标。正所谓,万丈高楼平地起。

本文主要面向新手,如果您有更好的建议,欢迎提出。如果您是新手,不需要完全知道每个步骤的原理,因为要深挖的话,每个点都能写本书。除非您很感兴趣并且有时间,可以顺藤摸瓜慢慢往下学。

摸下去,您会得到什么瓜?

为了更直观地展示,您现在打开的这个网站,就是使用本文的方案搭建的。

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 ,跳转到创建仓库页面。如下图: Create a new repository from hugo-theme-stack-starter

输入您的仓库名称,并选择是否公开您的内容(如选 Public,任何人都可以看到这个仓库的内容)。然后点击 Create repository from template 即可。

恭喜您,又前进了一步 🎊

以后对网站的修改、发布新文章都在这里进行。但现在我们先不管它,我们先看看怎么部署我们的网站,让大家都能看到。

Cloudflare, 部署您的网站

Cloudflare 本是一家专注于网络安全的公司,他们有一个 Pages 产品,提供免费的静态网自动化构建和部署服务。

Cloudflare 提供多语言服务,您可以点击右上角的语言下拉菜单,选择中文。考虑到多数读者的母语为中文,以下选择中文作为演示内容。

拥有 Cloudflare 账号

访问 https://dash.cloudflare.com/sign-up,通过邮箱注册一个 Cloudflare 账号。

Cloudflare 会发一封验证邮件到您填写的邮箱,点击链接进行激活。

创建 Page 项目

登录 Cloudflare 后,点击左侧菜单栏的 Pages , 点击 创建项目, 如图: Create a Page project

点击 连接到 Git,点击 连接到 Github,然后在 Github 授权页面,授权 Cloudflare Pages 与仓库进行连接,您可以选择只把当前仓库授权给 Cloudflare, 也可以选择授权所有仓库。

授权完成后,会自动跳转回创建 Page 项目的页面, 点击 连接到 Git,选择一个存储库,点击 开始设置

输入一个名字,比如 iamwong,平台会分配给您一个域名 iamwong.pages.dev,待完成项目构建,您就可以通过这个网址访问自己的网站。

架构预设 一栏,选择 Hugo;在环境变量 下增加一个指定 Hugo 版本的环境变量 HUGO_VERSION,值为 0.101.0 。如图: Page project setting

点击 保存并部署,恭喜您,完成网站的自动构建设置。以后只要在 Github 上提交内容更新,Cloudflare 会自动拉去内容,并且自动构建和更新。

等待几十秒后,您将看到一个部署成功的提示,您可以点击平台分配的域名访问自己的网站了,开心吗?

Success

拥有属于自己的域名

什么是域名

我们常见的 google.combaidu.com 就是域名,域名指向服务器的 IP 地址。

比如我现在约您去一个餐厅吃饭,告诉您餐厅的经纬度坐标,您是不是很难找到餐厅?但是如果我告诉您一个地址,您在导航软件输入,软件就能把您导航到餐厅。IP 就像一个具体的坐标,而域名就像一个用自然语言描述的地址。

购买域名

市面上有很多域名注册商,通常是按年租用域名的使用权。当然,如果自己想要的域名已经被别人注册了,并且您有经济实力,也可以联系拥有者进行交易,所以域名也是可以流通的。

通常情况下,通过 whois 查询,可以查到域名的注册人信息。有一些注册商倾向于保护注册者隐私,推出了域名隐私保护。由于保护个人隐私也是笔者所强烈提倡的,在这里分享一个笔者常用的注册商 NameSilo,他们提供终身隐私保护服务,也支持支付宝交易。

解析域名

本文以 NameSilo 为例,其他注册商请自行搜索他们的域名解析文档

购买域名后,访问 NameSilo 的域名管理页面 https://www.namesilo.com/account_domains.php

在对应的域名后面,点击蓝色按钮,如图:

DNS manage

由于我们是把自己的域名指向 Cloudflare 分配的域名,所以记录类型选择 CNAME

Hostname 处填写我们想要解析过去的子域名,比如 www blog 等,Target Hostname 处填写 Cloudflare 分配的域名,例如本文中的 iamwong.pages.dev,TTL 处默认即可。如图:

DNS setting

点击 “SUBMIT” , 等待几分钟,就可以通过自己的域名访问网站啦!

下集预告

恭喜您,完成了脚手架的搭建,接下来可以装修房子啦!

接下来会写一篇关于如何更新文章以及 Hugo 的基本使用等。本文也会根据大家的反馈不断更新迭代,让它能够帮助到更多的人,如果能收到您提出的宝贵建议,笔者会感到无比的开心,感谢 😊。

Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy