此教程适用于国内的建站,英文外贸建站请移步购买位于国外的服务器【外贸建站教程】
一、购买服务器
国内用户推荐购买阿里云服务器:【阿里云官网】
- 福利:超低价租用服务器
- 刚开始需要实名注册账号
一般为云服务器ECS或轻量服务器,推荐选购ECS,相当于一个Linux系统;对比轻量级,买了只能使用其中的一个应用,新建个人博客的内容、浏览量刚开始比较少,配置要求较低,一般选用入门级的服务器即可,分为共享型和突发性能型,长期使用一般选择共享型,突发性能型只适用于短期测试。
这里较为推荐阿里云服务器,除去新人优惠和年终特卖,还有【阿里云·云小站】的各种优惠券可以叠加使用,即可享受最佳优惠。
新用户推荐:ECS共享型 n4 适用于中小型网站搭建,双十一或者年终特惠时,有活动时价格更为亲民,【云服务器ECS年终特惠】。
本博客选择购买的是:ECS共享型 n4,为新用户专享;1核2G,租用了三年+续费了一年,总的财务开销在283.14¥。
配置要求:
- 地域:选择最近城市的实例
- 操作系统:CentOS 版本:7.4 64位
- 带宽:1M
适用于同个时间段访问人数<10人,用户数量增长后,再去升级服务器的性能
再一次确认订单后,支付宝扫码支付成功,一般1-5分钟后,即可收到阿里云的短信:您的云服务器ECS创建成功(公网IP:*.*..***)系统用户名:root。
新用户还有云服务器:n4续费一年享受0.6折的优惠,如果你是长期使用的话,可以考虑续费一手。
二、域名购买与解析
可以上万网,选择自己独特的风格,与众不同的域名【万网:阿里云旗下品牌】。
建议选择 .com 是最常见的域名后缀,用户习惯在输入网址时使用 .com
- 域名持有者:根据实际情况选择
- 实名认证:审核3-5天后即可通过
之后还得申请网站备案,域名持有者信息必须与备案信息一致
- 优惠口令:关注公众号即可领取,新人券后的价格不到55¥/首年
- 更有 阿里云.com 史低价——【新人一元购专区】
依次进入:控制台->实例->公网IP地址(复制到剪贴板)
继续进入:控制台->域名->解析->新手引导(粘贴公网IP),确定即可,配置域名解析完毕。
三、安装宝塔面板
在D盘WorkSpace下新建文件夹:aliyun-workspace,用于存放阿里云服务器文件,避免文件混淆丢失。
依次点击:控制台->云服务器ECS->网络与安全->密钥对->创建密钥对
- 密钥对名称,建议在名称后面加上后缀
- 标签的键和值,方便快速查找,可填可不填
- 选择存储路径,ailiyun-workspace即可
创建完成后请一定下载私钥,您只有一次下载私钥的机会
将新建的密钥对绑定服务器,选择对应的服务器(实例名称)
点击实例,进入服务器管理界面,新建密钥对,需要重启服务器才能生效。
重启后的等待时间大约为几分钟~1小时。重启完毕后,准备安装宝塔面板:
- 确认操作系统为CentOS
- 点击远程连接
- 认证方式:证书认证
- 上传密钥对文件,选择刚刚保存的PEM文件,点击打开
- 语言环境:英文(en_US)或者简体中文,点击确认
Remember:以后远程连接都是这样子操作
连接成功之后,如果你在购买服务器的时候,选择的操作系统是CentOS就复制以下这段安装脚本
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
其他的Linux操作系统,请点击超链接查找对应的安装脚本【宝塔Linux面板命令大全】
输入:y,再次按下回车,等待3-5分钟,出现successfully!即可
复制粘贴出现的登录信息,即可退出远程连接,每次登录宝塔面板都需要用到,请妥善保存。
外网面板地址:http://120.78.191.113:8888/b9da4579
内网面板地址:http://172.16.142.145:8888/b9da4579
username:bfz6k2lf
password:8eb836fa
我们现在要去放行【8888】端口,然后才可以打开宝塔面板,依次点击,云服务器ECS->网络与安全->安全组->安全组的ID名称
确认处于入方向,点击手动添加,开放宝塔面板的8888端口:
- 在目的这一栏输入【8888/8888】
- 授权对象:任何IP地址,都可以访问宝塔面板
- 在源这一栏输入【0.0.0.0/0】,点击保存即可
检查一下:80和443端口是否开放
- 在目的这一栏输入【443/443】
- 开放443端口
- 在源这一栏输入【0.0.0.0/0】,点击保存即可
- 同理可得,开放80端口
测试登录,输入之前保存的外网网址,分别填入账号username和密码password后,登陆成功!
四、安装套件,网站环境
登录成功之后,会让用户绑定一个宝塔账号,可以提前去官网注册一个账号【宝塔官网】
一键安装套件LNMP:
Nginx:选择最新版本,版本越高性能越强,向下兼容。
MySQL:5.5适合小内存服务器(低于2G)使用。5.6适合2G及更大的服务器使用,安装在低于2G的内存服务器上会卡顿,5.7要求内存不低于6G~8G,小内存服务器不要想。大部分常见的云服务器内存是2G、4G、8G,如果程序没有特殊要求,使用5.5或5.6都行,有特殊要求就按照要求选择版本。
Pure-Ftpd:当前版本即可
PHP:默认5.6,只适合某些老程序的需求。WordPress——一般支持最新php版本,越高性能越好,php解析能力强速度快。建议选择最高版本或次高版本
phpMyAdmin:最高版本或次高版本
极速安装:也叫 rpm/dbd,安装时间极快(5~10分钟),版本和稳定性略低,适合测试环境使用;
编译安装:安装时间长(视服务器配置需时30分钟~2小时),性能最大化,适合生产环境;
综合来说短期测试选极速安装,长期运行选编译安装。
之后要安装WordPress最新版5.8.3,宝塔界面一键安装套件选择环境:
- MySQL 5.6及以上
- PHP 7.4及以上
- phpMyAdmin 5.1及以上
- 长期使用,可编译安装
安装完毕,软件面板如图所示即可
修改登陆信息:进入宝塔面板的首页,依次点击,面板设置->面板用户(修改名称)->面板密码(修改密码)->面板端口(随便取一个8888~65535之间的数字)
注意:修改端口时,这个窗口不要关闭,我们先去阿里云添加新的端口号
修改默认端口8888:进入阿里云首页,依次点击,控制台->云服务器ECS->实例->实例ID->安全组->安全组ID/名称->手动添加(确认是入方向)
以10047为例子,如图所示即可(参考三、安装宝塔面板)
回到宝塔界面,修改面板端口为10047,即可
宝塔面板登录信息就更新为:
外网面板地址:http://120.78.191.113:10047/b9da4579
内网面板地址:http://172.16.142.145:10047/b9da4579
username:readcoder
password:****
域名信息:readcoder.com(顶级域名)
www.readcoder.com(www.二级域名)
120.78.191.113(公网IP地址)
五、添加站点
通过新地址打开宝塔面板,点击网站,添加站点:
- 将提前保存的域名信息Ctrl+V复制粘贴,自动生成了备注和根目录,
- 创建FTP
- 创建MySQL数据库
- PHP选择最新版本
如图所示,提交即可。
成功创建站点,会弹窗提示,保存账号资料
FTP账号资料
用户:readcoder_com
密码:EC3WffEcZBBpFMzD
数据库账号资料
数据库名:readcoder_com
用户:readcoder_com
密码:TnN47jyCYrJ3m2MH
遇到的BUG(一)
现在即可通过访问公网IP地址,来访问服务器,却出现bug报错,无法访问此页面,开始寻找bug。
在电脑上ping公网IP成功。
阿里云实例、安全组好像也没有问题……
我是傻逼,还以为是防火墙的问题,发现是自己没有开放80端口
最后的安全组配置,如图所示即可
bug处理完,输入readcoder.com发现无法访问,是因为网站还未备案
直接输入公网IP地址即可访问,创建成功!
六、安装WordPress
点击进入【WordPress官网】,获取ZIP安装包。
下载完成后,打开宝塔面板,进入网站,点击根目录,选择上传文件。
将下载的WordPress压缩包上传至根目录,即可。
选中并解压该文件,进入文件夹全选,将文件剪切至上级目录,即readcoder.com
删除index.html文件(默认的静态首页),现在可以打开网站,查看是否生效,由于网站没有备案,暂时无法通过域名访问,我们照旧使用公网IP地址。
显示这个界面,说明安装已生效ヾ(≧▽≦*)o
七、配置WordPress
公网IP地址:http://120.78.191.113/,点击进入网址,现在就开始!
数据库连接信息,即之前保存的账号资料,也可以在宝塔后台查看。用户名和数据库名是一样的,如果不确定,可以登录宝塔面板查看。
运行安装程序,提交表单即可
遇到的BUG(二)
一边想着自己的站点标题,结果过了个年,都忘记掉了,初五再来看的时候,已经裂开了,又增加了奇奇怪怪的bug。
在清除了所有Cookie之后,依旧无果。
清空缓存,并进行硬刷新,依旧不行,开始度娘解决方案。
以下内容,由CSDN倾情提供
产生原因:
WordPress后台登录出现“将您重定向的次数过多”错误往往是在网站启用了SSL,实现网站HTTPS安全加密协议访问后。造成“ERR_TOO_MANY_REDIRECTS 将您重定向的次数过多”这种错误的原因其实就是 http 和 https 之间的访问重定向导致的。
解决方法:
通过登录网站FTP或者网站主机的文件管理,找到网站根目录下的php文件 wp-config.php 文件,开头加入以下代码,即可完美解决此问题:
// Resolve the redirection problem
$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);
在文件21~24行添加注释和代码之后,修改完毕,Ctrl + S 保存即可。
测试一下,挂的更加惨了,直接被判定连接不安全了。
删除了添加的代码之后,依旧是重定向问题,心态崩了,难受啊!在这之后,去阿里云提交工单,求助售后工程师,依旧无果。
不得不说,阿里云的工程师太敬业了,凌晨4点还在肝,太帅了叭。现在只能使用,不是办法的办法了,最后一招,从控制台删除整个网站,呜呜呜┭┮﹏┭┮。
回退到,⑤添加站点,重新开始写网站。删除之后,访问IP地址,如图所示。
呜呜呜,终于可以了,泪目┭┮﹏┭┮。
重新安装配置完WordPress之后,便可以登录WordPress后台了,泣不成声;其实在安装过一遍之后,速度会变得很快,很多不该犯的错误都可以避开。重启可以解决80%的问题(ノ๑`ȏ´๑)ノ︵⌨。
八、网站备案
域名实名认证通过后,等待2~3天,才能备案,进入控制台->直接在搜索栏:搜索域名->点击相对应的域名,即可查看基本信息。
注意:域名持有者,必须与备案信息一致。点击ICP备案->开始备案,这里以自助申请为例(才不是因为没有钱钱呢💴),主办者信息与身份证保持一致。
大部分是一些个人信息,这里就不便截图了,同时辅以身份证+手机人脸核验,等待初审的结果。
九、申请SSL证书
注:SSL证书,需要网站备案完成,域名解析生效后,才可以申请,可优先跳过。
- 【宝塔官网】,注册账号实名
如果你的网站没安装SSL证书,就会出现👇下面这个提示
- 登录宝塔面板,申请SSL证书
通过外网面板地址,登录宝塔面板,依次点击,网站->readcoder.com,找到SSL,选中Let’s Encrypt的顶级域名和次级域名即可。
- 打开强制HTTPS
输入地址即使为不带https,都将自动跳转为https开头的安全网址。Let’s Encrypt每隔三个月自动续签SSL,也可以偶尔登录宝塔面板确认查看。
- WordPress设置修改地址
遇到的BUG(三)
当我兴致冲冲,打开WordPress后台,准备下一步操作的时候,突然博客又无法访问了,域名不能访问之后,就尝试用IP地址访问,依旧无果之后,开始有一点点慌张。
毕竟这是最后几步了,寒假的心血都在里面,但是,我很快就冷静下来,写的bug多了,自然就心中无bug了。注意到一点,之前在SSL证书安装的时候,有提示如下👇一点,正确放行443端口,我马上就懂了。
先是打开阿里云服务器,查看云服务器 ECS 实例对应的安全组,发现433端口,一个半月前我就放行了(老拖延选手了)。
想到宝塔面板也有433端口,查看是否放行,当然看到是放行的,这个图中我是删除后截图的。那就用重置法,我删除面板中的443端口,然后再添加进来。
欧了,bug解决,成功访问(づ ̄3 ̄)づ╭❤~。
继续修改WordPress地址,打开WordPress后台,点击设置,将WordPress地址(URL)和站点地址(URL)修改为域名(网站备份未通过,不要修改)。
将这两个地址改为https开头顶级域名,或者www.二级域名都可以。记得要左下角,保存修改!
- 打开网址测试一下【MyBlog】
输入域名,自动跳转为https~验证成功o( ̄▽ ̄)ブ
十、URL静态化
- 网站伪静态设置
打开宝塔面板,依次点击网站->设置->伪静态->选择WordPress,保存即可。
- URL链接静态化
打开WordPress后台,依次点击,设置->固定链接->将URL链接的格式改为文章名,保存即可。
- 验证链接设置成功
在浏览器打开网址,随便点开一篇文章,网址变成文章名格式,说明URL伪静态已设置成功。
十一、安装主题Theme
主题相当于,一个网站的外观结构和布局,不仅如此,还有模板、模块、页面构建插件等等。
WordPress有两个热门的免费主题Astra和GeneratePress,Astra自带华丽模板,但是加载速度慢,GeneratePress更加简洁,不论安装哪个主题,最后都会用上页面构建插件。 页面构建插件:可自定义外观,主题使用加载速度快的GeneratePress就足够了。
打开WordPress后台,点击外观->安装主题,即可挑选主题。
个人推荐主题
- Textdash
- Cutslice
- Instorm
- Noteblock
- Blogstream
同时可以上【AlxMedia】网站,选择 Live Demo ,即可同时查看主题在 ipad 端,iphone 端的不同界面,便于更好的挑选心仪的主题。
安装完,即可选择启用,预览下在你博客实装的效果,不满意也可点击右下角删除。
小知识:事实上,白色背景配深色文本 比 黑色背景配浅色文本 具有更高的可读性,能减少眼睛疲劳。
本博客选用的是 Blogstream 主题,打开网站看看效果,一开始的界面是极为简洁的,只有一篇Hello World!待安装页面构建插件之后,网站可以优化的更加好看。
十二、安装 WP Githuber MD
习惯使用 Markdown 语法的,可以直接在 WordPress 插件市场搜索并下载 WP Githuber MD 插件,国内的服务器连接速度比较慢,安装并启用插件即可。
在比得汪UP主的安利下,使用了一段时间的 语雀 + Elementor ,发现确实挺好用的,云同步也很合我的心意。但是,在后续的博客文章迁移中,经典编辑器以及 Elementor 网页生成器,都不具备直接复制粘贴图片的功能。
平时写博客,个人一般使用 Typora + PicGo 搭配七牛云图床使用,直接上传图片到图床,外链导入即可。但是,还是在博客文章的迁移中,外链的图片链接,WordPress 无法直接引用,在修改了 functions.php 尝试了各种插件,依旧无果……
enmm……很快的昂,我就屈服了,打开 Typora ,在偏好设置里面,将之前设置的,上传图片至图床,设置为复制图片到 filename.assets 文件夹,复制粘贴,这样子我们就得到了一个专门存放图片的文件夹。
但是,依旧不能直接复制粘贴,因为本地的 url 路径和云服务器媒体库的 url 路径,肯定是不一样的,只能先将整合的图片文件夹,上传到媒体库,再一个个插入到相对应的文章中去,泪目┭┮﹏┭┮
图片多了以后,实在是太乱了,有没有什么办法可以将媒体库的文件进行分类啊?其实这方面的插件还是有的,FileBird – WordPress 媒体库文件夹和文件管理器,FileBird 免费版可以创建10个文件夹,如果你需要创建更多文件夹,可以考虑购买收费版。
按住 Shift 选中首尾,批量选中之后,即可拖动图片到新建的文件夹中,轻松实现媒体库分类存储。
十三、免费制作网站LOGO
- 设计Logo
打开网站【免费一键生成LOGO】,注册账号之后,选择个人品牌,选中Logo,即可开始你的第一个设计作品创作。
- 挑选 Logo 的样式,使用免费的就够了去,使用模板设计更加快捷,也方便修改 Logo 的主色调,设计完毕即可在右上角下载。
jpg是jpeg的简称,是目前网络上最为流行的图片格式呢,jpg格式的图片可以将图像文件压缩到最小格式,png全称为Portable Network Graphics,翻译过来就是便携式网络图形,它是一种无损压缩的图片形格式哦。
- 抠图去背景
打开网站【背景抠图】,上传图片 Upload Image ,如无意外,背景变成透明像素的方格状,Download 下载即可。
- 裁剪空白部分
打开网站【裁剪图片】,点击 Select images 选中之前去除背景的图片,拖动矩阵至想要的大小,点击 Grop IMAGE 裁剪,保存即可。
因为 Logo 图标建议的尺寸为:400120像素,先在右侧px值设置为400120px,再按住Shift键,等比例放大或缩小即可。
接下来是站点图标,裁剪为所需大小即可
在站点身份的设置目录下,可以更换图标,出现推荐大小像素,防止出现货不对板,图标自动偏移的bug
十四、编辑网站Header页眉
- 打开网站,点击👇下方工具栏的自定义
- 点击站点身份,即可添加 Logo 图标(注意:在选择 Logo 图标的时候,是裁剪完的图片,可以跳过裁剪,节约并规范媒体库资源)。
替代文本 alt 的作用:
- 当图片加载不出来,就会显示这些文字。
- 告诉搜索引擎(Google),这张图片的内容,因为搜索引擎只是一个机器,看不懂图片。
站点图标是您会在浏览器标签、收藏夹和WordPress移动应用中看到的图标。在这里上传!站点图标应为方形,且宽高至少512 × 512像素(否则会出现图像扭曲变形bug)。
P.s. : 每次修改,都一定要保存发布!(づ ̄3 ̄)づ╭❤~
十五、网站底部添加备案号
ICP备案通过后,必须在网站主页底部标明备案编号,免费版的 GeneratePress 主题,编辑器不能修改底部的文字,Blogstream 主题则可以直接添加。
- ICP备案通过后,在备案信息页可以找到备案编号
- 依次点击,自定义 -> Theme Options -> Footer 即可编辑网页页脚,修改 Footer Copyright 即可,你的网站域名或简短的标题 & 你的ICP备案号,备案号添加成功~
十六、网站底部排版与侧边栏
- 底部页脚 Footer
进入自定义 -> 小工具 -> 选中 Frontpage Bottom 也就是页脚按钮,默认会生成两个 Header,两个 Footer 工具,点击添加小工具,即可选择系统自带的很多小工具。例如:
- 侧边栏 Sidebar
让网站的排版看起来更加舒服,符合个人审美(因人而异,无需纠结),选择自己喜欢的就好了。还是小工具,选中 Primary ,分别展开每一个小工具,点击删除,即可去掉系统默认侧边栏,系统排版依旧会保留侧边栏位置,这个时候在 Primary 里面添加主题自带的小组件,Alx Tabs 即可(你们也可以尝试更多不同的小工具组合,全凭个人喜好),效果如图所示。
如果没有找到 Alx Tabs 是因为没有打开权限,进入自定义,依次点击 Theme Extentions -> Custom Widgets,Alx Tabs 设置为 On 即可
十七、发布博客文章
- 插件选择
打开 WordPress 后台,在插件栏,选中安装插件,搜索 Yoast SEO ,安装并启用即可,这个插件可以编辑在搜索引擎(baidu)的预览内容,然后,我们再安装一个经典编辑器,因为默认的古腾堡编辑器不能给文章排版,启用即可。
- 创建分类
如果你的文章可以分为不同类别,最好还是创建分类,方便用户查找,分别输入:
- 分类名称
- 分类的网址(一般用英语单词表示)
- 分类的详情描述
URL链接用英文单词比较规范,如果觉得麻烦,也可以用中文拼音,多个拼音或单词之间,用【-】符号连接,例如,readcoder.com/about-me ,现在可以开始创建第一篇文章。
- 杜撰文章
不建议直接在 WordPress 写草稿,可能保存不成功,我一般在 Typora 写草稿,然后再上传到 WordPress 排版,复制粘贴即可,删除图片(图片不能直接复制上传),注意点:
- 把每个段落的标题格式改为二级标题(H2),不要用一级标题(H1),每个界面只能有一个一级标题(大标题)。二级标题的下一个小标题,就是三级标题(H3),按照这个排序应用标题格式。
- 图片:点击添加媒体,插入图片,上传媒体库即可。输入图片的替代文本(alt),让搜索引擎(baidu)知道这张图片的内容。选择合适的图片尺寸,插入至文章即可。
下拉找到 Yoast SEO ,编辑(baidu)搜索结果的简介,勾选这篇博客文章的所属分类,设置封面图,保存并发布即可,记得发布~修改才会生效。
写在结束语:以上就是,个人博客从零开始的搭建了,前前后后大约花了3个月吧,更多是我自己在摸鱼ing,感谢【悠悠寒霜儿】以及UP主【比得汪】的不懈支持与大力相助,接下来会准备各种功能的完善,如有错误,欢迎评论指正或者联系我进行更正。
—— ReadCoder