隨着你公司網站的內容不斷地增加，網站不斷地更新，你有沒有發現查找你想要的內容越來越難了。一方面是內容是新的內容不斷增加，另外一方面你之前保存的鏈接也由於網站的更新而不能使用了。你有沒有想到想到爲自己的網站添加一個搜索框，從而更加方便我們或者我們的客戶來對我們的網站進行搜索。如果你這麼想，那麼Elastic Site Search將是你的答案。你無需做很多的工作，你只需要簡單的配置就可以完成。剩下的工作就交給Elastic來完成。運用Elastic Site Search，你所需要的就是提供一個你的網站的url，Elastic Site Search對你的網站進行爬蟲，並生產可以進行搜索的數據。

Elastic Site Search（以前稱爲Swiftype站點搜索）提供了構建強大的網站搜索所需的工具-無需學習。免維護的搜尋器使內容保持最新，而直觀的自定義功能和強大的分析功能可完全控制搜索的相關性。所有這些都得到Elasticsearch的大規模支持。

您需要功能強大的搜索後端+設計良好的UI。根據您網站的目的和規模，搜索可能是一項至關重要的功能，可使您的用戶快速找到所需的信息。 Elasticsearch使構建提供相關結果的搜索引擎變得更加容易，但是構建搜索後端只是實現搜索體驗的工作的一部分。沒有直觀的搜索界面，您的用戶可能無法獲得搜索引擎的全部價值。

Elastic Site Search（以前稱爲Swiftype Site Search）將搜索作爲一項服務來完全處理您的搜索引擎的後端，並且我們還幫助您構建設計良好的搜索UI。網站搜索基於Elastic Stack構建，這使我們能夠支持10,000多個生產搜索引擎，每月服務超過50億個查詢。可以肯定地說，由於我們已經幫助Lyft，AT＆T，Twilio，Asana和Samsung等大小公司提供一流的搜索體驗，因此多年來我們已經在搜索方面學到了一兩件事。如果您想進一步瞭解Swiftype的架構和彈性堆棧的使用，請查看這個“Swiftype's Technical Journey with Elasticsearch”。

Elastic Site Search使用三個簡單的步驟來進行搜索搜索。Elastic Site Search使強大的搜索變得簡單。不是“對高級開發人員來說簡單”簡單，而是“對任何人來說簡單”簡單。單擊以進行爬網，拖放以進行調整。看到？簡單。


輸入您的網站地址，然後讓功能強大的“Site Search”搜尋器處理其餘的內容。	在您的站點上執行幾行代碼，以添加一個由Elasticsearch驅動的搜索框。	通過增強，權重和同義詞來微調用戶的搜索體驗。

在接下來的教程中，我們將詳細介紹如何來創建一個我們的Site Search。

創建一個自己的網站

爲了方面我們的展示，我創建一個我自己的網站。你可以按照如下的方法來下載網站的代碼：

git clone https://github.com/liu-xiao-guo/the-example-app.nodejs

等我們下載完這個應用後，我們可以使用如下的命令來進行安裝：

npm install

等安裝好後，我們可以使用如下的命令來進行運行我們的服務器：

npm run start:dev

上面顯示我們的服務器運行於localhost的3000端口上。我們在瀏覽器中輸入localhost:3000:

從上面我們可以看出來，我們已經成功地把服務器運行起來了。

這是一個基於nodejs的express框架的網站。爲了能夠使得我們的網站能夠被Site Search的網站訪問，我們可以把它置於一個公開的網上，並賦予一個可以訪問的域名。針對我的情況，我使用natapp.cn。選擇一個自己喜歡的域名。我們可以把這個nodejs的應用置於自己的電腦上運行。對於一些開發者喜歡花生殼的，也可以參閱網站https://www.oray.com/來做這個。

我運行起我的natapp應用：

在上面，我們可以看到我們的natapp應用已經成功地把我們的127.0.0:3000映射到http://liuxg.natapp1.cc上了。我們在瀏覽器中輸入你自己的url:

在上面我們可以看出來我們的url已經成功地起作用了。

創建一個Elastic Site Search帳戶並將您的數據編入Swiftype

您可以通過開始免費的14天試用期進行註冊。在設置過程中，“Site Search”將要求您輸入您的Web網址。您的域將被爬網，並且您的文檔將被索引。

一旦我們成功地註冊完，我們可以在地址https://app.swiftype.com/login進行登錄：

等我登錄過後，我們可以看到如下的畫面：

我們選擇“Site Search”:

我們點擊“CREATE A NEW ENGINE”按鈕:

在上面填入我們的網站的url。然後，我們點擊 “VERIFY URL”:

我們輸入想要的Engine Name，並點擊 “CREATE ENGINE”按鈕：

上面顯示我們的Engine已經被成功地創建。我們可以點擊 “Install Search”菜單：

從上面的圖中，我們可以看出來，我們的網站正被Site Search爬，正在建立索引。等我們的網頁被爬完後，我們可以看到如下的畫面：

這個時候，我們點擊 “Content” 菜單，我們可以看到：

從上面我們可以看出來我們的網站的內容已經被成功地爬完了，並已經建立了自己的索引。我們可以在上面的Filter pages的搜索框中來搜索我們想要的關鍵詞，比如Hello:

我們可以看到很多的鏈接都被羅列出來了。我們可以點擊上面的INSPECT按鈕：

我們可以點擊上面的VIEW DETAILS按鈕查看這個鏈接的詳細信息。

在這裏的其它的內容就留給大家自己來開發了。

爲Web應用加上搜索框

到目前爲止，我們所有的工作都在swiftype.com網站上完成，但是在大多數的情況下，我們其實更想把我們的搜索體驗運用到我們的實際的Web應用中。我們想爲我們的應用添加上一個搜索框。爲此，我們按照教程“jQuery Plugin Guide”來做我們的練習。我們將實現一個最簡單的搜索框來展示。我們打開我們的nodejs應用的文件layout.pug。它位於：

$ ls views/layout.pug 
views/layout.pug

我們首先去掉下面被註釋的3條語句：

上面的三天語句將爲我們的每個頁面創建一個搜索的輸入框。同時爲了能夠使得我們的搜索框能夠正確運行，我們必須首先在app.swiftype.com網站得到我們的Engine Key:

我們把這個Engine Key填入到lib目錄下的site_search.js中：

$ ls lib/site_search.js 
lib/site_search.js

填入後的site_search.js是這樣的：

$(function() {
  $('#st-search-input').swiftypeSearch({
    resultContainingElement: '#st-results-container',
    engineKey: 'YourEngineKey'
  });
});

我們重新運行我們的應用：