[不花一分钱建WordPress博客]三蛋免费主机 + Freenom顶级域名 + CloudFlare CDN加速

发布于 2022-06-27  925 次阅读


建站两要素:域名 + 主机

域名可以选用Freenom的免费域名,主机可以用Hostinger的免费主机(现在好像是和000webhost合作了),三蛋和Hostinger都算是老牌的免费主机商了。

创建免费空间 / Create Free Host

打开三蛋免费空间官网(建议挂个梯子):https://www.000webhost.com/

点击右上角的Sign In,选择一种自己喜欢的方式登录,我选用google登录。

登录000webhost

登录之后选择右上角的"+ Create New Site"。

创建新站点

输入一个空间名和密码,这将会作为二级域名和ftp密码,然后点击"Create",稍等几秒就可以创建一个虚拟主机(也可以叫空间)。

确认主机信息

主机位置在美国的北卡罗莱纳,速度有些慢,不过后面配合WP Super cache + CloudFlareCDN + 禁用Gavatar等操作会快很多。

安装程序 / Upload

创建完成之后,会有安装Wordpress 或 上传自己的源码的选项,直接选择安装Wordpress就可以。虽然官方会有一些广告。

输入Wordpress的登录账号和密码,这个密码需要牢记以后登录都要用,如果忘记可以通过phpMyAdmin来修改,问题不大。

输入Wordpress信息

点击Install,自动开始安装Wordpress。

至此,主机这边算是搞定了,现在需要去获取一个域名。

获取免费域名 / Get Free Domain

我这里以免费的cf域名为例,进入https:.//dot.cf,输入一个自己喜欢的名字,然后点击GO!

进入到freenom界面,一定要先点击右上角Sign In,我这里依然是用Google登录。

登录freenom

登录之后从右上角进入资料编辑页面,将地区改为当前ip所在的地区。比如我在新加坡就把Country改成Singapore,State随便选一个。如果在Hongkong请自己看图,要改Country。

修改freenom资料

改完之后回到dot.cf,点击check out重新提交一次订单。

在结算的时候可以选择12个月免费,DNS啥的先不要紧,先把域名注册了要紧。

一路确认即可,最后如果出现这个Attention说明当前ip和地区不匹配,需要改地区或者换ip,如果挂了梯子,将梯子模式设置为全局。

Attention

这个可能需要反复操作几次,要有点耐心。

域名注册成功之后在freenom菜单栏Service - My Domain中可以对域名进行管理,我们接下来需要将域名DNS设置为CloudFlare的,用于CDN加速。

CloudFlare CDN加速

进入CloudFlare官网:Cloudflare_智能化云服务平台_免费CDN安全防护_Cloudflare 中国官网 | Cloudflare

开始免费试用,输入刚刚注册的域名,比如我注册的erikse1.cf,然后按照提示回到freenom,在域名管理中,在菜单 - ManageMent Tools - Nameservers里面将DNS修改为CloudFlare提供的。

修改DNS
修改域名dns

等待一段时间DNS更新,更新完成之后首页会变成这样。

CloudFlare获取DNS成功

绑定域名 / Bind Domain

先在CloudFlare - DNS中添加两条CNAME记录,target就是000webhost提供的域名。

等待几分钟解析生效后,在000webhost控制面板中Add Domain,将申请的域名绑定上去。

至此网站算是基本搭建完成了。

现在通过自己的域名也能够访问Wordpress博客了。

一些修改

修改PHP版本

在000webhost的控制面板中,左边WebSite Sittings - General中,找到php version并修改为7.4或8.0等高版本。

PHP-Version

删除插件

进入到Wordpress仪表盘,将自带的插件全部禁用并卸载,这些都是没卵用的。

修改域名

在设置 - 常规选项中,将Wordpress地址和站点地址就改为新的域名地址。

改为新的URL

安装WP Super Cache插件

如果能在线安装WP Super Cache就在线安装,不能就去官网下载然后上传。

之后进入插件设置,打开缓存就行了,其他设置也不用动。

后台加速

在后台禁用谷歌字体、禁用不必要的插件和组件可以做到加速。

屏蔽右下角的广告

000webhost服务器自带有下角的广告,可以通过修改css来屏蔽广告。

在外观 - 自定义 - 额外css中添加以下css:

.disclaimer{display:none}