我的網站首頁搭建記錄

簡單記錄下網站首頁的搭建過程。

背景

自從網站域名備案成功下來，一直以來都沒想好首頁應該怎麼寫。其實不是沒想好，而是沒有準備好首頁的多張大背景圖片應該存放在那，畢竟是最廉價的雲服務器，應該本着勤儉持家的理念，能省就省嘛。不過還好，bing中文搜索官網的背景圖片天天都會更新，因而萌生出了用nodejs爬別人圖片的方法~

環境準備

首先，須要給服務器安裝nodejs,centOS下經過yum install nodejs方式安裝的nodejs是0.10版本的，根本沒法寫es6代碼。沒辦法，只能經過源碼安裝了

wget http://nodejs.org/dist/v4.5.0/node-v4.5.0.tar.gz
tar -zxvf node-v4.5.0.tar.gz
cd node-v4.5.0
./configure
make
make install

ps：過程當中若是報找不到g++編譯器，則請先安裝g++yum install gcc-c++
輸入node -v檢驗是否安裝成功
這裏再順便提一下安裝npm的方法吧：
curl https://npmjs.com/install.sh | sudo sh
輸入npm -v檢驗是否安裝成功

爬圖片

咳咳，接下來講到重點了，準備爬cn.bing.com網站的背景圖片。

第一步

進入bing中文網址，cmd+alt+i打開開發者工具選項，Network選項,cmd+r刷新網頁，找到網站的背景圖片Ajax選項，這就是咱們要找的Ajax請求url

返回的結果以下所示

第二步

github上有不少開源的nodeje抓包庫，如superagent
而此次我所使用的是nodejs原生api
http.get(url, (res)=>{}): get請求
https.get(url, (res)=>{}): https方式
ps: 其實上面兩種都是http(s).request(options, (res)=>{})的GET方式簡化版，只是由於當前大部分網站都是GET請求方式。
經過上面的圖片，咱們此處使用http.get():

const http = require('http');
const ajaxUrl = 'http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1';
http.get(ajaxUrl, (res) => {
    res.on('data', (d) => {
        console.log(d)
    })
})

此處終端的打印出來的是buffer對象，因此咱們須要將其轉爲字符串，而後轉爲json對象取到須要的圖片url,代碼以下：

const json = JSON.parse(d.toString());
const src = json.images[0].url;

上面中的src就是咱們須要的圖片url地址。

第三步

經過以上方式，雖然咱們獲取到了目標圖片的url，但如何把它應用到首頁仍是個問題。
本人採起的方法是經過nodejs啓動一個服務，返回目標字符串background-image：url(' + src + ')，首頁經過ajax請求以後添加到body的style對象上。
查看效果：https://qingguoing.com:3000
等等，有個坑，首頁是經過nginx跑在80端口，而nodejs服務是跑在3000端口，因而就涉及到ajax跨域的問題。解決方法也很簡單，nodejs設置返回頭Access-Control-Allow-Origin: *。因此nodejs最終代碼以下所示：

const https = require('https');
const http = require('http');
const fs = require('fs');
const options = {
        key: fs.readFileSync('./ssl/privkey1.pem'),
        cert: fs.readFileSync('./ssl/fullchain1.pem')
};

const ajaxUrl = 'http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1';

https.createServer(options, function(request, response) {
        response.writeHead(200, {
                'Content-Type': 'text/html',
                'Access-Control-Allow-Origin': 'https://qingguoing.com'
        });
        http.get(ajaxUrl, (res) => {
                res.on('data', (d) => {
                        const json = JSON.parse(d.toString());
                        const url = json.images[0].url;
                        response.write('background-image:url('+ url +')');
                        response.end();
                })
        })
}).listen(3000);
console.log('server is listening on the port 3000');

ps1: 我的網站採用的是https連接，ssl證書是經過letsencrypt免費生成。
ps2: ajax跨域頭只設置了我的網站的首頁，因此你們若是想按我這種窮屌絲方式爬去圖片，仍是去爬微軟大廠的吧。既然都看到這了，相信對您來講，這些都是小菜一碟

最後

最後固然就是運行node程序了。不過若是你像我同樣，經過終端命令遠程鏈接到服務器端，那麼你應該按照以下方式執行node命令：
node app.js& 此時開啓的服務是後臺跑起的，直接退出並不會終止已跑起的node程序