八步教程 - 从零基础到2小时建立Google PageSpeed Insights100分、安全度A级的博客站点平台

2018-09-02 约 5856 字 预计阅读 12 分钟

11岁半的儿子周五从学校回来,看到他老爸我的这个博客,说“我也想做个blog”,孩子的想法和热情要鼓励,前面写的一段段技术文章,不太系统,不容易让基本零基础的小朋友模仿学习。

前面自己作的过程中没有截图记录,现在要还原操作过程还有点难度。这样的话,决定用一个闲置域名fxdiary.com再走一遍过程,每步记录下来,可供任何零基础的访客依样画葫芦,可以保证在2小时内就搭好一个独立域名独立服务器IP基本功能齐全的博客平台。

本教程共分8个步骤,分步连接如下:

1.购置域名

2.注册主机

3.设置DNS,将域名指向服务器ip

4.远程登陆主机,设立一个非root的超级用户

5.安装配置网站服务器软件Nginx、数据库软件MySQL、PHP

6. 安装LetsEncrypt,打造SSL A级网站

7.安装配置Wordpress

8.修改Nginx配置,增加必要插件使站点在Google PageSpeed Insights上评为优秀

更新


儿子通过这个教程,自己一步步设置一个wordpress网站,发了第一个帖子(右侧截图,网址暂保密)。在他进行过程中,遇到一些小困难,我在本帖也一一修改了。这次更新将代码部分需要大家自己修改的部分都加红了,方便大家按此配置。

 


 

开始前先看一下两个小时工作就能达到的网站成果吧。

网站界面



Google PageSpeed Insights评分100



SSL Lab测试安全性达到A级



好,八步教程开始 :-)

1.购置域名


域名很重要,是相当于互联网上的房产,好记切合网站主题的域名可以带来很大的附加值。通过自己的想法从而规划日后整个网站的主题内容,从而选出一个比较合适的域名,就是进入网站开发的第一步。

域名注册网站有很多,最大的是GoDadday,这个可以进入网站这个圈子后慢慢了解,本教程用我现用的namecheap作例子。

Namecheap连接 进入namecheap后点击左上角的Signup



根据提示一步步注册账号,注册好后Sign in后,点击Domains下拉菜单Domain Search,然后输入想要的域名。 建议:长远发展最好选用.com的域名 如果你想要的域名还存在,恭喜你,可以点进购物车,别急付账,一般namecheap都有折扣券,Google "namecheap coupon"能找到一堆,试验了一个,节省10% 故此注册域名成本:一年10.13美金。

这次作教程没有新注册域名,下面以我以前的一个闲置域名FxDiary.com为例。

2.注册主机


主机服务商也非常多,竞争激烈。这里还是以我目前所用的Vultr为例

Vultr连接 注册account。

登陆进去,点击server-deploy new server

第一步选服务器地址,Vultr在美国、欧洲、澳大利亚、日本和新加坡都有服务器,Jesselau.com选用的是美国的服务器,这次fxdiary.com就选用伦敦的服务器试试看,这个没有太大关系,以后如果想换服务器,基本上可以无缝对换。



第二步选操作系统,大多数是linux系统,也可选windows,价格会贵一些。我个人电脑就用Ubuntu 18.04的桌面版,感觉很好用,所以当然选择Ubuntu 18.4 64位操作系统



第三步选服务器硬件,前几天作jesselau.com博客时还没有3.5美金的选项,今天有了,500G月带宽,500MB内存,就先用这个3.5美金最低配置跑跑看,Vultr跟任何商家一样,交钱升级很方便,无缝对接,降级退钱就麻烦了。2.5美金的选项只支持IPV6.这个不能选,有些用户无法访问,我个人的Google Pixel2手机就不能访问纯IPV6的服务器。



后面几个选项都可以不填,服务器的hostname填一个fxdiary方便记忆,然后点击Deploy Now按钮



等几分钟服务器配置好了,点击fxdiary服务器,Ubuntu系统也安装好了,root用户和口令都已设置妥当。



还需要再花少量银两激活Backups功能,这样Vultr每日固定会备份服务器,这样有啥系统级别的错误也至少能恢复到一天或两天前。这样安心的功能只需要3.5美金的20%=0.70美金一个月



至此,必须花钱的域名和主机已经弄好了,成本域名10.13+主机(3.50+0.70)*12=50.4,共需60.43美金每年。

3.设置DNS,将域名指向服务器ip


重新登陆到namecheap,选中你刚买的域名,点击manage按钮。我这里是以fxdiary.com为例

点击Advanced DNS

点击ADD NEW RECORD,加入两个A record,填上刚才购买的Vultr的服务器ip地址。



namecheap提供免费的转发邮件功能,这样可以将公司名后缀的域名邮件转发到你的个人邮箱,如gmail邮箱,需要点击Mail Setting激活Email Forwarding功能



再从Advanced DNS切换到Domain,增加几个email转发到我的个人邮箱



这样发送邮件到wordpress@fxdiary.com info@fxdiary.com support@fxidary.com都会转发到我的gmail邮箱。

4.远程登陆主机,设立一个非root的超级用户


DNS设好了,可以用安全连接通过个人电脑远程登陆主机,然后开始安装设置软件工作。不过安装软件之前需要设立一个不是root的超级用户,因为如果每次用root登陆,安全性不佳,且随时可能误操作删除或修改了系统文件,因为在主机世界root拥有绝对的权力,想起《寻秦记》里一句话
绝对的权力必然带来绝对的腐败。

偏题了,回到超级用户的设置。

首先ssh登陆主机,mac 和linux系统都很简单,用terminal下运行ssh命令即可。windows据说在win10以上也集成了ssh命令,不然需要下载独立的ssh客户端,命令如下:
ssh root@fxdiary.com

拷贝vultr主机设置的root密码,粘贴在密码处,登陆成功



登陆后增加一个用户jesse,你可以替换成你想用的名字,再运行sudo visudo命令

 
# useradd jesse

# sudo visudo

会打开linux经典的编辑器Nano,找到root那行,加入jesse下面那行,按ctrl x存盘退出,jesse就有了超级用户权限。



运行如下几行,设置jesse的目录、操作权限、口令等。

注意:口令最好设置复杂,因为是超级用户权限
# mkdir /home/jesse

# chown jesse:jesse /home/jesse -R

# sudo passwd jesse

运行
# nano /etc/passwd

在最后一行加入:
jesse:x:1000:1000::/home/jesse:/bin/bash

按Ctrl X,存盘退出。 运行reboot,远端服务器重启,连接中断
# reboot

现在再重新用ssh连接,这次就用jesse登陆了,没有问题了 :-)


5.安装配置网站服务器软件Nginx、数据库软件MySQL、PHP


Nginx是现在更流行的免费网络服务器软件,比老牌的Apache2更稳定灵活更容易配置。故此我的新网站均采用Nginx. 用jesse登陆到fxdiary.com主机后运行安装命令:
sudo apt update

sudo apt install nginx

接下来安装MySQL
sudo apt install mysql-server-5.7

MySQL很简单的安装好了,但还需要配置其安全性,用下面命令
sudo mysql_secure_installation

显出如下界面,回答y



三种密码设置等级,任选一个然后设置root密码,软件会自动对密码强度评分,不满意可以重设。后面几个问题都打y Mysql 5.7以上root缺省不是以密码方式,而是以auth_socket方式,就是我这个jesse用户登陆MySQL根本不需要口令了。这个需要修改,运行命令
sudo mysql

果然直接无密码进入MySQL,再运行命令
SELECT user,authentication_string,plugin,host FROM mysql.user;

root果然是auth_socket



运行下面命令修改成按密码方式
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'; #password 要改成你刚才设的那个强力密码

再运行
FLUSH PRIVILEGES;

exit;

这样再运行mysql就不能轻易进入了。

你可以通过sudo mysql -u root -p然后输入密码进入mysql管理界面

MySQL安装好了,现在需要安装php
sudo apt install php-fpm php-mysql

安装好,要配置nginx文件
 sudo nano /etc/nginx/sites-available/fxdiary.com

打开一个空文件,里面贴上
server

{

listen 80;
listen [::]:80; ## listen for ipv6

root /var/www/html;

index index.php index.html index.htm index.nginx-debian.html;

server_name fxdiary.com www.fxdiary.com;

location /

{

try_files $uri $uri/ =404; }

location ~ .php$

{

include snippets/fastcgi-php.conf;

fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;

}

location ~ /.ht

{

deny all;

}

}

存盘退出 运行
sudo nginx -t

检查配置文件有何错误,没问题运行下列命令
sudo ln -s /etc/nginx/sites-available/fxdiary.com /etc/nginx/sites-enabled/

sudo systemctl reload nginx

给fxdiary.com增加一个文件测试一下,运行
sudo nano /var/www/html/info.php

生成一个info.php文件,内容就下列两行


存盘退出,然后打开浏览器访问fxdiary.com/info.php,只能以文件方式打开。



这个问题google到解决方案,需要更改php的配置,运行下列命令
sudo nano /etc/php/7.2/fpm/php.ini

文件很大,按Ctrl-W可以在Nano里搜索字符串,搜索cgi.fix_pathinfo字样,确保其等于0



Ctrl-X存盘后重新启动php和nginx,如下命令
sudo service php7.2-fpm restart

sudo service nginx restart

再打开浏览器访问fxdiary.com/info.php,没有问题了



可以通过这个界面看一下我们安装的软件版本、模块等等。表示各个软件都运行正常。 不过不要忘记再删除这个文件。运行下列命令
sudo rm -f /var/www/html/info.php

注意:php info文件将服务器的各种信息都显示出来,容易被黑客利用,必须删除

6. 安装LetsEncrypt,打造SSL A级网站


为何要安装SSL呢,因为巨无霸Google在力推https访问,甚至加入到了搜索排名的权重,对于这种能创造标准的公司,只能遵循,还好互联网世界不缺高风亮节者,一路下来,除了域名和服务器主机要钱外,全部免费软件伺候。同样的SSL解决方案也是免费的。

运行下面命令在远程主机安装LetsEncrypt
sudo add-apt-repository ppa:certbot/certbot

sudo apt install python-certbot-nginx

开始安装域名的SSL认证,以下命令
sudo certbot --nginx -d fxdiary.com -d www.fxdiary.com

输入自己的常用email



一路Agree, yes然后到了一个二选一问题,这里我们选1



好立马受到祝贺的画面,然后还需要配置修改nginx,将所有http连接转到https连接
sudo nano /etc/nginx/sites-available/fxdiary.com

将之改为如下内容:
server {
listen 80;
listen [::]:80; ## listen for ipv6

server_name fxdiary.com www.fxdiary.com;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2; # managed by Certbot
server_name fxdiary.com www.fxdiary.com;

root /var/www/html;
index index.php index.html index.htm index.nginx-debian.html;
location = /favicon.ico { log_not_found off; access_log off; }
location = /robots.txt { log_not_found off; access_log off; allow all; }
location ~* \.(css|gif|ico|jpeg|jpg|js|png|woff)$ {
expires max;

log_not_found off;
}
location / {

try_files $uri $uri/ /index.php$is_args$args;
}

location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;

}

location ~ /\.ht {
deny all;
}

ssl_certificate /etc/letsencrypt/live/fxdiary.com/fullchain.pem; # managed $
ssl_certificate_key /etc/letsencrypt/live/fxdiary.com/privkey.pem; # manage$
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot

ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

运行以下命令,检查nginx配置,重启nginx
sudo nginx -t sudo service nginx restart

好了,到ssl lab去检验以下成果,A级妥妥的。

letsencrypt一般90天就得过期,但Ubuntu的主机就是最擅长计划任务,运行
sudo crontab -e

增加一行
18 18 * * 1 certbot renew --post-hook "systemctl reload nginx"

存盘退出。这样在每周一就18点18分就自动运行认证的renew程序,就不会有过期之虞了。

现在将防火墙的规则加一下,加强服务器的安全性,运行下列命令
sudo ufw allow 22

sudo ufw allow http

sudo ufw allow https

sudo ufw enable

遇到问题,回答yes,然后再运行一下:
sudo ufw status

看到下面结果:



这样服务器就只开放了22(ssh)、80(http)、443(https)端口,提高了安全性。

7.安装配置Wordpress


终于从后台软件转到了前台,Wordpress是世界最流行的内容管理系统,拥有无数的模板、插件,真正做到所见即所得,大幅提高写blog的乐趣和生产力。




下面介绍怎么安装配置wordpress

首先得设置mysql数据库 运行如下命令:
mysql -u root -p

进入mysql命令行模式后,增加一个数据库
CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

wordpress数据库建立好,要设置用户名和密码,下面命令,用户名和口令可以参照修改
GRANT ALL ON wordpress.* TO 'yourusername'@'localhost' IDENTIFIED BY 'yourpassword';

没有问题了,再运行下列命令存入mysql并退出mysql界面
FLUSH PRIVILEGES;

EXIT;

第二步要安装一些针对wordpress的php插件,命令如下
sudo apt update

sudo apt install php-curl php-gd php-intl php-mbstring php-soap php-xml php-xmlrpc php-zip

安装好后重启PHP
sudo systemctl restart php7.2-fpm

第三步下载wordpress,如下命令
cd /tmp

curl -LO https://wordpress.org/latest.tar.gz

tar xzvf latest.tar.gz

cp /tmp/wordpress/wp-config-sample.php /tmp/wordpress/wp-config.php

sudo cp -a /tmp/wordpress/. /var/www/html

sudo chown -R www-data:www-data /var/www/html

这几行命令将wordpress最终版下载并解压到fxdiary.com指向的/var/www/html目录 最后一步要设置wordpress 运行下面命令取得wordpress密码
curl -s https://api.wordpress.org/secret-key/1.1/salt/

出来一堆define('AUTH_KEY', ')开始的字符串,可以将其先拷贝到剪贴板或一个空文件里下面要用。 运行下列命令编辑config.php文件
sudo nano /var/www/html/wp-config.php

打开文件后找到define('AUTH_KEY', ')开始的那一堆字符串,将之替换成刚才贴的含有密码key的字符串,然后找到下列几句,将之改为刚才设置mysql的数据库名、用户名和密码
. . .

define('DB_NAME', 'wordpress');

/** MySQL database username */

define('DB_USER', 'yourusername');

/** MySQL database password */

define('DB_PASSWORD', 'yourpassword');

. . .

存盘退出。 现在后台工作基本都完成了,可以访问fxdiary.com一步步安装。 选择好语言后,就到了设置的界面

设好网站的主题,用户名和口令,以及密码,最后一项可以先不让搜索引擎检索,等有了些内容在wordpress里面可以设置,故此我先点上勾。 点击进去后自动选择了wordpress的2017模板,什么也没操作,直接访问fxdiary.com,好了一个站点出炉了。


8.修改Nginx配置,增加必要插件使站点在Google PageSpeed Insights上评为优秀


站点基本配置好了,到Googel pagespeed Insights上看看。分数不佳



根据其整改意见,首先用编辑器打开nginx设置文件
sudo nano /etc/nginx/nginx.conf

找到gzip字样,将几个gzip选项全部打开,如下
gzip on;

gzip_vary on;

gzip_proxied any;

gzip_comp_level 6;

gzip_buffers 16 8k;

gzip_http_version 1.1;

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

存盘,重启nginx
sudo service nginx restart

整改意见有css和javacript需要异步或延后处理的建议,下载两个插件

将两者均下载到本地硬盘,文件都不大。 访问fxdiary.com/wp-admin输入用户名和口令,登陆进wordpress管理平台,点击左侧Plugin-Add New



点击Upload Plugin上传安装两个插件,全部激活。 Speedup css不需要设置,Async Javascript需要设置,在左侧Settings选择Async Javascript.。设置如下



好了。重新去Google评定,好了,现在100分。



当然了,这是因为还没有什么内容在网站中。建议在Chrome或者firefox里安装一个Pagespeed insights的plugin,每新增一个页面就测试一次。保证其是good(80分以上)就可以了,不一定非得追求100分。

以上教程都是今天配置fxdiary.com过程中,分步记录。若按此操作,就可以很轻松设置一个blog站点,从而可以利用强大的wordpress前台。若根据此教程配置了新站点,欢迎到留言区贴上新网站连接

写这个帖子本来估计要4个小时,没想到连安装配置到分步截图、编辑居然写了6、7个小时,中途看朋友圈发现是新西兰的父亲节。

这个帖子的缘起就是因为儿子的一个小愿望,没想到恰好是在新西兰的父亲节,我在编写这个帖子。 这令我想起我10岁半的时候喜欢看武侠小说,自己写过一万字的“武侠”,是父亲又重新抄录了每个字,并保存了30多年。 我想也许等儿子长大了亦为人父后,会记得当年这么一个父亲节吧 :-)

author

本文由Jesse Lau原创

2012年定居新西兰至今,自由职业者,从事网站和程式交易,曾获得Dukascopy外汇程序交易比赛2届月度冠军(id:Tradingwithea).
本文采用知识共享署名 4.0 国际许可协议进行许可。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解