How To Host A Free Website With amock.io

Intro

Amock.io is a free web-based API mocking service. It enables people working with external web services outside their control to easily create free mocks of their web-services and APIs for use during development and testing.

Over time, amock.io has progressed from a simple REST/SOAP API mocking web service to include the ability to mock a very wide range of media content-types, including text/html. This means that one can actually create a mock that returns HTML content via HTTP GET, or in simpler terms, a website. In this article, I’m going to show you exactly how to do that.

Caveat

Before we begin, please note:

amock.io is not a web hosting platform and should not be used as one. Though it might be quite easy to serve multi-paged websites from amock.io, this feature obviously is not intended for actual hosting of large scale, live websites, but it can come in quite handy for hosting website mocks for demonstration purposes.

Assumptions

For the rest of this demonstration, we will be working with the following assumptions:

• You have an understanding of HTML, CSS and basic web design principles.
• You are going to use this knowledge for good. Remember, with great power, comes great responsibility.

Now that we’ve got all that out of the way, let’s dive into hosting our website on amock.io.

The Home Page

So let’s say we have the following web page

See the amock hosted version on https://www.amock.io/api/v1/k32y/amock/index.html

with the source code looking like this

Notice there are no references to local JS, CSS or IMG

“Hosting” the above page on amock is as easy as:

1. Visit https://www.amock.io.
2. Login to your account. If you don’t have an account already, create an account (It’s free) and then login.
3. Click on the “Create a mock” button.
4. In the “HTTP Method” field, select GET.
5. In the “HTTP Response Code” field, select 200 Ok.
6. In the “Request Endpoint” field enter any value you choose. This will make up the URL you can use to access your website in the form of https://www.amock.io/api/v1/<your_username/<your_chosen_endpoint>. For this case we’ll use amock/index.html as our endpoint.
7. In the Content-Type field, select “text/html”. This step is very important because it’s what tells amock.io to return your mock as a webpage whenever it’s requested.
8. And then enter the HTML code for your website in the response body textbox.
9. Click on the “Create Mock” button to save and create your webpage.
10. You’ll see a confirmation message and the generated mock endpoint will be displayed.

Mock created successfully

Our mock is now created. To see it in action, we copy the generated mock endpoint into a browser address bar then hit enter. And voila!

The Other Pages

Now you might have noticed that we have links to other pages (about.html and contact.html) on the top of our home page. And currently, clicking any of those links returns and invalid mock endpoint XML error.

To make those links work and take us to the right pages, we need to first create those pages. We repeat the steps we followed while creating the index page mock to create mocks for ‘about’ and ‘contact’. For this demonstration we will use amock/about.html and amock/contact.html as our mock endpoints because we used amock/index.html in our index page, and the hyperlinks in all the pages are pointing to index.html, about.html and contact.html respectively.

Note that we can also use absolute URLs for our hyperlinks as opposed to the relative URLs we used above.

The source code for the about page

amock/about.html

And for the contact page

amock/contact.html

Now we have all three pages mocked.

Look for your mocks in your amock.io dashboard

We can now visit any of the mock URLs in a browser and navigate to any of the other pages by clicking the hyperlinks at the top of the page.

index.html

about.html

contact.html

Taking It A Step Further

Most times, our websites have external resources like CSS and JavaScript in external files which we include in our pages with <style /> and <script /> tags respectively. In such cases, irrespective of if the webpage itself is hosted on amock.io or not, we can create mocks for such resources and simply reference them in our webpage.

For instance, we have the following CSS in our website above:

<style> .nav-right { width:auto !important; } </style>

If we moved the above CSS from our html page into a CSS file, say style.css, we will replace the style tag with a link tag like so:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Now going a step further, we can create a mock on amock.io with the following settings:

• Content-Type : text/css
• HTTP Method : GET
• HTTP Response Code : 200 Ok
• Endpoint : Choose any endpoint URL you like. (say amock/style.css)
• Response Body : The CSS code, without the <style/> tag of course.

and update the href property of the link tag with the generated mock endpoint:

<link rel=”stylesheet” type=”text/css” href=”https://www.amock.io/api/v1/k32y/amock/style.css” />

And just like that, our CSS in now served from amock.io.

We can do exactly the same for JavaScript as well. The only difference will be that our Content-Type for JavaScript will be application/javascript instead of text/css. And we will include the JavaScript in our page with the code:

<script type=”application/javascript” src=”https://www.amock.io/api/v1/k32y/amock/script.js"></script>

Where https://www.amock.io/api/v1/k32y/amock/script.js is the generated mock endpoint for the script.

Finally

And that brings us to the end of this demonstration. And for sticking with me to the end, here’s something for you:

You deserve this. Print it, frame it, hang it on your wall.

Congratulations! Now go ye forth to amock.io and unleash your websites mocking abilities.

You can fork or clone the complete website used in this demo here https://github.com/k32yr04n/amockwebsite on Github.