八步教程 - 從零基礎到2小時建立Google PageSpeed Insights100分、安全度A級的博客站點平台

2018-09-02 约 5893 字 预计阅读 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轉發到我的個人郵箱



這樣發送郵件到[email protected] [email protected] [email protected]都會轉發到我的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❌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年定居新西蘭至今,自由職業者。
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之,可隨意轉發轉載,轉載請注明出處。


留点评论吧: