Creating your first site

A simple workflow to create new sites.

Before understanding all the options and capabilities of the tool let’s have a quick look at the workflow involved in creating a new site. Let’s keep using the blog example as the base to construct a new site:

1) Define the page route

Decide what the pages that you want to serve and type the URL directly in the URLPattern field are. You can use any :variables you want here. These variables will be available for the API call

For instance, define the homepage like this:

"URLPattern": "/"

Or the post page like this:

"URLPattern": "/posts/:post"

This will serve URLs like /posts/34 or /posts/my-new-post

2) Write a template

Every page displays the HTML defined in the Template. You can also reuse a Layout so you can write only the changing part. The Layout is where you usually put the header, footer, meta and other content that repeats itself in structure in every page. The Template on the other hand declares what is unique to that page only.

We recommend you using the generator instead of layouts, as the layout is computed in every execution. When you use the generator you can generate the final HTML file before the server is started and no computation will be needed during the serving stage.

Both the Template and the Layout fields in every page are not filenames, but a reference to the templates and layouts declaration in the same configuration file.

For instance:

"pages":[
{
  ...
  "Template": "post",
  "Layout": "main",
},
...
    ],
"templates": { "post":"post.mustache" },
"layouts": { "main":"main_layout.mustache" },

The "Template": "post" references the template file post.mustache.

Now in the template file use {{ Data }} (when API response is an object) or {{ Array }} (when API response is an array) to insert the API data the way you like it more.

More on templates and layouts

3) Define the external API call

Write in the BackendURLPattern the API call you want to make to retrieve the content and insert it in the template. For the posts page example, let’s say our API is:

"BackendURLPattern": "https://jsonplaceholder.typicode.com/posts/:post",

Notice that we are passing the :post variable previously declared in the URLPattern

4) Start the server

Now you can start the server and navigate:

api2html serve -d -c config.json -p 8080

This will start the server in port 8080.

---

Continue to Configuration file →

← Back to Running the server