How To Host A Free Website With amock.io
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.
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.
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
with the source code looking like this
“Hosting” the above page on amock is as easy as:
- Login to your account. If you don’t have an account already, create an account (It’s free) and then login.
- Click on the “Create a mock” button.
- In the “
HTTP Method” field, select
- In the “
HTTP Response Code” field, select
- 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.htmlas our endpoint.
- In the
Content-Typefield, 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.
- And then enter the
HTMLcode for your website in the
- Click on the “Create Mock” button to save and create your webpage.
- You’ll see a confirmation message and the generated mock endpoint will be displayed.
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 (
contact.html) on the top of our home page. And currently, clicking any of those links returns and
invalid mock endpoint
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/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
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
And for the contact page
Now we have all three pages mocked.
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.
Taking It A Step Further
<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:
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 :
- HTTP Method :
- HTTP Response Code :
- Endpoint : Choose any endpoint URL you like. (say
- 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.
https://www.amock.io/api/v1/k32y/amock/script.js is the generated mock endpoint for the script.
And that brings us to the end of this demonstration. And for sticking with me to the end, here’s something for you:
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.