小白也会的个人网站搭建指南

在互联网愈加封闭的环境下以及处处404的时代,搭建个人网站成为了一个相对自由的选择,一个微弱的抗议。 本文将完整介绍使用GitHub搭建个人网站的流程,包括域名购买、GitHub Pages设置、域名解析、博客客户端设置、文本编辑器使用、图床设置和其他优化工具。为什么选择GitHub?一是免费,无需增加服务器的费用支出;二是无需备案。

我们将使用的软件、工具或者网站包括:NameSilo、GitHub、DNSPod、Gridea、Markdown、jsDelivr、PicGo、Markdown Nice等。整个过程几乎是“描红”式操作,当然第一次上手难免会遇到各种意外问题,如果本文没有给你解答,那么请善用搜索引擎。

引子:一个比喻

如果我们将搭建网站比喻为房子,域名就相当于门牌地址,GitHub Pages就是承载房子的地皮和地基,有了这两样我们才能用钢筋水泥建设和装修房子(使用Gridea之类的博客框架完善网站)。域名解析就是引路人,相当于将带有文字的地址与纯数字的经纬度对应,它将域名(比如www.abc.com)转换为IP地址(比如114.114.114.114),以便让计算机用他们能够理解的语言帮你找到正确的网站。文本编辑器、图床等内容,则是为了让你能够更加高效、便利地创造内容。

一、 域名购买及域名服务转移

如果用GitHub搭建个人网站,其实并不一定需要买域名,但是为了流程完整性,还是将买域名作为建站的第一步。域名注册商有很多,比如GoDaddy、Namecheap、name.com等等,本文以NameSilo为例,介绍一下购买流程。
Step 1:
注册登录之后,在搜索栏中输入你想购买的域名,然后点击搜索。

Step 2:
查看可购买的域名,如果显示橙色“Registered”,则表示该域名已被别人占有,绿色为可购买。勾选想要的域名后点击“register checked domains”。有些域名会显示两个价格,一般便宜的价格都是指第一年的费用,而有删除线的价格(比如$16.99)则是后续续费的价格,所以不要看第一年哪个便宜就买哪个。

Step 3:
确认订单。如果决定长期使用,Auto-Renew(自动续费)可以选择 Yes。Set all years选择注册时长,但是如果是按促销价购买,只能选择一年。Privacy Setting中建议选择免费赠送的WHOIS隐私保护。然后点击支付金额下方的Continue进入下一步。

Step 4:
选择支付宝或者其他支付方式。

Step 5:
为了提升域名解析速度,我们接下来要将NameSilo默认的域名服务器转移至DNSPOD(腾讯云)。首先在dnspod.cn注册账户,然后进入控制台管理界面。点击DNS管理下的我的域名,然后选择添加域名。填入我们在NameSilo购买的域名,点击确认。

Step 6:
点击生成的域名进入跳转界面,我们可以在上方发现一条提醒:“请在域名注册商处将 DNS 服务器修改为……”,复制文本中提到的f1g1ns1.dnspod.netf1g1ns2.dnspod.net

Step 7:
然后我们回到NameSilo进入My Account,点击右上角的Manage My Domains,勾选我们购买的域名,然后点击选项栏中的Change Nameservers

进入跳转页面后,将刚刚在DNSPOD复制的两个地址分别填入NameServer 1NameServer 2中。删除其他记录,然后点击SUBMIT。然后等待DNS服务器刷新(最多72小时,一般十几分钟也可完成),等待的这段时间内我们先去设置GitHub Pages。

二、Github Pages 设置

Step 1:
注册GitHub个人账户,进入个人主页界面后,点击左边栏上方的New,新建一个Repository(仓库)。

Step 2:
跳转页面之后,在Repository name处填写域名,格式是username.github.io,username就是你注册GitHub的用户名。Description随便填,选择Public,勾选Initialize this repository with a README,点击下方的Create repository

Step 3:
跳转页面之后,点击Settings,接着往下滚动页面找到GitHub Pages。然后点击Choose a theme


跳转页面后随便选择一个模板(后面我们会用Gridea来搭建更加美观的网站)。这时一个最简陋的网站就建好了,GitHub自动跳转回Settings界面,这时我们看GitHub Pages下面会显示Your site is published at username.github.io。这时你在浏览器输入这个域名,就能 看到你的网站雏形啦。

三、域名解析

Step 1:
设置完Github Pages后,就需要让我们的域名地址都能够被他人正常访问。首先打开电脑本地的Git Bash或者cmd命令行控制台,输入ping username.github.io后回车(username即你的GitHub用户名),复制返回结果中的IP地址。

Step 2:
进入DNSPOD的控制台,点击我的域名中此前设置的域名,跳转页面后点击添加记录。这里我们要填写两条,以保证在输入域名时无论是否添加www,人们都可以访问你的网站。
第一条的主机记录填==@== ,记录类型选择A,线路类型默认,记录值填写上一步获得的IP地址。
第二条的主机记录填WWW,记录类型选择CNAME,线路类型默认,记录值填写username.github.io(username为你的GitHub用户名),点击确认。

Step 3:
打开GitHub,点击之前建立的仓库(username.github.io),然后选择Settings ,下拉到GitHub Pages版块,在Custom Domain中填入你在NameSilo上购买的域名,然后点击保存。经过一定时间的等待(我也不知道多久),GitHub Pages将显示Your site is published at abc.com (abc.com指代你购买的个人域名)。

四、使用Gridea构建网站

Gridea 是一个静态博客写作客户端,帮助你更容易地构建并管理博客或任何静态站点。

Step 1:
进入官网gridea.dev下载客户端,在等待下载安装的过程中我们需要先去GitHub设置一个Token。点击GitHub右上角的头像,再点击Settings,在左侧边栏选择最下方的Developer settings

跳转界面后,点击Personal access tokens,然后点击右上角的Generate new token

Step 2:
Note处的内容可以随便填,比如写Personal Website。在其下方面有很长一堆东西,你只需勾选第一个repo即可,然后拉到页面最下方点击Generate token。跳转页面之后,复制那一长串字符。


Step 3:
打开安装完成的Gridea客户端,点击左边栏的远程

  • 平台选择GitHub Pages。
  • 域名填写你的GitHub域名(username.github.io)。
  • 仓库名称即你在GitHub上建立的仓库名称,一般为username.github.io。
  • 分支填master。
  • 仓库用户名为你的GitHub用户名。
  • 邮箱一般填你注册GitHub时的邮箱。
  • 令牌填写我们上一步复制的Token。
  • CNAME填写你在NaseSilo上购买的自定义域名。
    填写完之后点击检测远程连接,如果提示 「远程连接成功」则证明设置成功,点击保存

    Step 4:
    点击侧边栏主题,我们可以对网站界面进行配置。在选择主题中,可以点击右侧查看更多主题,在线主题市场也有更多主题可以选择。网站名称等细节配置请自行摸索,或者参考官方文档。全部设置完毕之后点击左下方的同步,就可将新网站推向全世界了。

五、优化及效率提升

1.写作

Gridea文章编辑器使用了Markdown语言,这也是我推荐你熟悉并使用的一种写作方式。Markdown是一种轻量级标记语言,用语法来代替常见的排版格式,能够让你专注内容而非排版。并且借助一些工具,你的文章无需耗费过大力气,就能高效地迁移至微信公众号等各类平台中。除了Gridea自带的文章编辑器,PC上你还可以使用Typora作为日常写作工具。

2.图床

图床是专门存储图片的网络服务器,将图片上传至图床即可通过外链访问,配合Markdown语法![](图床链接地址) 我们可以很方便的在文内插入图片。将文章搬至其他平台时,也无需重复上传图片,极大节约了时间。

3.PicGo:图片上传及管理工具

PicGo支持了多种图床,包括七牛图床、腾讯云COS、又拍云、GitHub、SM.MS、阿里云OSS、Imgur等,通过其他开发者制作的插件,PicGo还能支持Gitee等其他图床。这里以GitHub为例,介绍一下PicGo的使用技巧。
首先我们按照前文的方式,在GitHub新建一个Repository并重新生成一个Token。然后打开PicGo客户端,在左边栏图床设置中点击GitHub图床

  • 设定仓库名的格式是GitHub用户名/刚刚新建的仓库名,例如sysuyep/ImageHosting。
  • 设定分支名填写master。
  • 设定Token填写你刚刚获取的Token。
  • 存储路径是指你计划把图片放在仓库什么位置,一般可填img/。
  • 自定义域名这里我们可以用jsDelivr进行配置,以便增加访问GitHub图床的速度。可以设置为https://cdn.jsdelivr.net/gh/用户名/仓库名,设置完成后点击确定。

    在上传区我们将链接格式选择为Markdown,选择一张图片上传完成之后,你就可以将该图片外链以Markdown的格式复制粘贴至文本内。比如:
    ![](https://gitee.com/sysuyep/websiteimg/raw/master/img/picgo2.png)

4.图片压缩

图片过大不仅占用GitHub仓库空间而且影响访问的加载速度,因此对图片进行合理的压缩是必要的。在线图片压缩处理网站已经有很多了,比如docsmallTinypng等。
本文主要介绍一种本地处理工具utools,准确地说它是一个工具集合产品。在[官网](https://u.tools/index.html)下载安装后打开插件管理,可以发现其分门别类了不同功能的插件,大家可以根据自己需要安装,这里我以压缩图片为例介绍一下其使用方法。首先在左边栏点击图片,点击图片压缩右侧的图标下载,安装之后我们可以在已安装中查看插件的使用介绍。


这时我们只要使用快捷键Alt+Space就可快速唤出操作框,将想要压缩的图片拖进操作框,在弹出插件列表中选中图片压缩

在跳转界面中,我们可以在左下方选择本地压缩或者通过TinyPNG源压缩。界面上方则显示了压缩后大小、压缩比例、压缩状态等。压缩完成后,界面右下方将可选择覆盖源文件保存或者另存为

5.微信公众号同步

为了传播效果,我们往往会将个人网站的文章同步在微信公众号发布,Markdown Nice这个产品则能大大提升我们同步的效率。复制我们在Gridea文章编辑器内撰写的内容,在Chrome浏览器中打开mdnice.com,把刚刚复制的内容粘贴至页面左边的操作栏中,此时右边会实时显示排版效果。在上方工具栏内我们可以选择不同的主题、格式等,确定之后点击右侧边栏的第一个图标,然后打开微信公众号粘贴发布即可。

最后

以上就是搭建个站的基本教学,祝愿大家可以更加自由地发表作品。