I’ll show you how you can create a custom search-engine in 15 minutes and deploy it all for free!

We’ll use ElasticSearch in the backend and a nice frontend built with AngularJs!

The Backend

First you’ll need a hosted ElasticSearch server:
Please sign up here:

https://bonsai.io/

It’s free up to 1GB memory and 1GB disk space.
Which can only serve for demo-purposes, but better than nothing!

You’ll have to create a cluster.
Then you need to copy your servive URL for later.

Then you have to create an index (using command-line or the webinterface for testing).

POST /media

Now we can add some data.
Whatever data you have needs to be transformed into JSON.
Then you can create bulk-files.
Create a file called bulk.json

They look like this:

{ "index" : { "_index" : "media", "_type" : "book", "_id" : "1" } }
{ "title" : "Great Expectations", "author" : "Charles Dickens", "imageUrl" : "" }
{ "index" : { "_index" : "media", "_type" : "book", "_id" : "2" } }
{ "title" : "Pride and Prejudice", "author" : "Jane Austen", "imageUrl" : "" }
...

curl -s -XPOST {cluster-url}/_bulk --data-binary @bulk.json

Was the data indexed?

GET /_search?q=*

Yes, great!

The Frontend

You’ll have to use some free webspace, where you can upload static files.

It’s possible to use Google Drive.

http://thenextweb.com/google/2013/02/05/google-drive-now-lets-developers-share-hosted-websites-by-storing-html-javascript-and-css-files/
https://support.google.com/drive/answer/2881970?hl=de#

So, just create a new folder in your google-drive.
Go to settings, extended settings and change the visibility to “Public”.

Then download this nice Angular JS frontend template from Github:

https://github.com/romansanchez/Calaca

You can download the zip:

https://github.com/romansanchez/Calaca/archive/master.zip

Unpack it please.

We’ll edit some of those files, but to start please upload the file:
index.html

After that you’ll have to enter this URL

https://www.googledrive.com/host/{id}

You’ll find the id inside the regular share link:

https://drive.google.com/folderview?id={0B5DM…}&usp=sharing

Now put those parts together and you’ll be able to see the webpage. With rotten design.

So now we’ll have to upload all the remaining files and folders.

Setup

Connecting to your ES-server

You need to edit some files:

js/config.js

var host = "{Your Bonsai host}"; //Ex: http://ec2-123-aws.com

You can remove the variables port and protocol.

Set index- and type name accordingly.

var indexName = "media"; //Ex: twitter
var docType = "book"; //Ex: tweet

js/services.js

Remove port and protocol and change host to esHost:

//Set defaults if host and port aren't configured
var esHost = (host.length > 0 ) ? host : $location.host();
var client = elasticsearch({ host: esHost });

index.html

Just change the property-names of the results and that’s it!

<article class='result' ng-repeat='result in results track by $id(result)'>
<h2>{{result.title}}</h2>
<p>{{result.author}}</p>
</article>

And then revisit your website and type in something.

Wow!

We just built a search-engine and it’s already usable and online.

Since this is a media-search engine, we want images!
So you need to get bootstrap.css

http://getbootstrap.com/getting-started#download

Upload css/bootstrap.css and css/bootstrap.css.map into your own css folder.

Then add this line to index.html:

And then simply wrap your result-properties inside article in here…

<div class="media">
<div class="media-left">
<img style="width: 100px;" src="result.imageUrl" alt="" />
</div>
<div class="media-body">
<h2>{{result.title}}</h2>
<p>{{result.author}}</p>
</div>
</div>

Of course you should NEVER do this with sensible data, as the security settings are more than bad.

Have fun!