How to build a dynamic restaurant website for FREE from HTML templates in 2021

9 min readNov 7, 2020

Having a website for your restaurant for anyone who wants to establish their own brand, is an undisputed requirement in 2021. But building a website and maintaining it is a huge challenge for many non-coders (myself included). Here, I’ll discuss how you can build the website for the lowest possible cost as possible, and keep the website dynamic and relevant even after months or years. You may need a day’s worth of efforts from a developer friend who can help you in hosting your website.

The philosophy behind the dynamic design

The main reason I see restaurant owners hesitate in making a website is ensuring it is updated with the current pictures of the restaurant. Since they don’t have a coding background, they find it challenging in updating the website, also very basic things such as new images, new dishes, new videos, etc. The core theme of the restaurant always remains the same, but the events don’t get updated as soon as they want it to be. The solution is to separate static content from the dynamic one.

Static Content

The static content means the text, image, or video content which will stay the same throughout the lifecycle of the restaurant. This can be some philosophy about the restaurant’s inception, the theme, the core team behind it, contact details, some images, and videos, etc.

Dynamic Content

This is the content that you can keep on changing based upon the daily activities going on in the restaurant. Folks who manage the social media account of the restaurants will know the importance of keeping the content fresh on their profiles. You want to show your place is dynamic and happening, or you as a chef are creative and passionate about the food you are cooking. So keeping the content updated on the website is a great way to emphasize that.

You can use tools to embed your social media pages on your website. So, when you want to change the way your website looks, you can change the social media pages, and the changes will be directly visible on your website. Here are some use cases for that:

If you want to showcase the images in a gallery format, use your restaurant’s Facebook page’s album to do that.
If you want a slideshow of images, you can embed a folder on Google Drive and make a slide show of that. This can be a simple banner type ad for showcasing promotional content as well.
You can mention your Instagram profile on the ‘About Us’ page to emphasize the dynamic nature of your restaurant.
If you have a cooking video on YouTube, you can embed that as well.
If you are a writer, you can embed your Medium blog or free WordPress blog directly on your website.

All these integrations help you to keep your website updated and dynamic to ensure your customers can engage with your brand effectively via the platform of their choice. In a way, this will help people from social media channels to come to your website, and from your website they can get connected to any other social media channels, promoting your website as a stopgap solution to accurate information about your brand.

So, let’s see how we can set up our website for almost ZERO cost, and set up these integrations from social networking platforms.

Using free HTML templates

First, I’ll explain the method of creating a website by using a free HTML template. I personally preferred this method because it is very transparent, not much coding is required, it gives enough flexibility to modify website layout the way I wanted it to, and it has a faster learning curve than wordpress.org. If you find WordPress software (not wordpress.com) convenient to use, go ahead and use that. The objective is to get over this learning phase as soon as possible.

Download a free theme of your choice

There are thousands of free HTML templates available online. Before selecting, make sure to read the license terms and use them if they are free for use and modification by anyone for commercial purposes. You can download these from the following websites:

Select Hosting Provider

It does start with hosting. It basically means you need a place to store your website content and keep that computer on always. Your home computer is not suitable for running for years together and handling thousands of requests to see your website when you become popular. So we would need a place where we can host the website.

The 2 most popular places for hosting your website would be Google cloud, and AWS (Amazon Web Services). Both of these provide very powerful machines (which are ideally not required for hosting a simple landing page) and that too at free $1000 credits for the first 2 years. I have chosen AWS, but you can choose any one of these. Make sure after creating your account, apply for getting the credits. Google the exact method of applying for that.

In the beginning, since the traffic to your website will be less, you will not need any additional expenses. After 2 years also, if the traffic is not very high, the expense will be very less. In case you end up exhausting the initial credits before 2 years, congratulations! Your business is doing really well!

Editing Website

I’ve figured the best tool for editing websites is VS Code (Visual studio code). You can download it for free from their official website here. You can use any other code editor, even a notepad. But only after using an IDE, you will soon realize the advantage of IDE like VS Code or PyCharm over the simple notepad.

Parts of a restaurant website

There are some general expectations that a customer has while looking at a restaurant’s website. Try and stick to the standard template of the restaurant websites, because if you keep a very fancy custom-designed website, people usually get confused about the layout, and just leave the website immediately.

Your website should have:

Title (name of the restaurant)
About Section: A brief introduction or pitch about the theme of the restaurant.
Services: The types of services you provide to your customers (outdoor catering, events, meal boxes, classes, cafe or dine-in, etc).
Menu Highlights: Some exclusive menu items that look awesome and are your specialty.
Your Story behind the restaurant: Here’s the way to build personal connections with your customers and involve them emotionally with your success.
About the founders: Mention your motivations and journey (or struggles).
Your team (optional): Great chefs and folks behind the scene. make sure to write about people only if they have some great achievements or credibility associated with and are permanent members (at board or management level).
Gallery (Dynamic content such as images, blogs, videos, etc.)
Order Now
Contact us form

Remember, your job as a designer of the website is to stay as invisible as possible so that it is obvious and very smooth for people to place orders online. The least amount of hurdles is the best way! There are very very few exceptions. If your restaurant itself is very heavily custom-designed, say a pirate theme, where even the layout and menu structure is also not a standard one, and the identity of the restaurant is known for this specific weirdness in menu or layout (in a good way), then you should go for a custom design. However, I would still recommend, to see the best possible outcome from your website, choose a simple elegant design that matches your theme.

Integration tools

Here are some of the embedding tools.

Google Form for Contact us: Use Formfacade. It’s an add-on that you can install in your google drive and get an embedding option in your google form. The advantage is that it uses your website’s CSS and blends in very well with your website. 1 form per account is free for now.
Blogging via Medium.com: You can use the widget mentioned here. This is the cleanest blog integration tool.
Blog via WordPress: Here are 2 ways of doing that. Click here and here to know both.
Facebook album: You can go through the instructions here. You may need to create an account on the website ‘embedsocial’ for this (roughly 10 Facebook / Instagram widgets are free). Facebook improved some security settings, because of which signing in and linking your Facebook account here has become a mandatory requirement to generate the album link.
Google Photos Album Image Slider: You can follow the steps here.

You can integrate other social media platforms as well, such as Pinterest, Twitter, etc. However, you should be really clear about what messages you can send using these platforms. I’m writing this blog on 6th Nov 2020. A lot may have changed by the time you are reading this. I’ll try and keep on updating the links mentioned here.

Developer Tasks

Once you have edited the sections of your webpage and added these embed codes, your developer friend needs to host this webpage on the free* hosting provider mentioned above. Congratulations! Your Website is dynamically connected to all social networks. Any changes you make to those albums can get displayed there in a matter of minutes.

You can ask for some additional settings at your end.

GitLab setup: You can create a free account on GitLab and setup git on your computer. You can ask your friend to make you the maintainer of the website code repository. Next, your friend can set up CI/CD, and give you access to ‘push’ changes in the code. These may sound gibberish to non-coders like me at first glance. But it is very similar to the Google Drive interface where ‘your friend’ would ‘put the website files’ on the cloud and he/she will set up a system in which you can make changes directly on your website. All these changes can be easily done by VS Code.
Any time you find any of these free widgets are not working well, go ahead and search for any other free widget, or message me. I’ll try my best to find a free or inexpensive alternate for these. Replace the entire code with a new one, and push the changes at your end. If you have access to get those changes live, the entire activity should take you no more than 2 minutes.

Ordering & Delivery Facility

You may still not have the ordering facility on your website. And building as well as maintaining this is a pretty challenging task for any non-coder. This is where we, as Rockstar Chef, come in. We can help you provide an order management system and delivery system, to help you manage online deliveries from your own website. The easiest way is that we will add “ORDER NOW” buttons at various places on your website, and redirect customers to the ordering page. You, as a restaurant manager, will have an admin panel to keep track of orders received and fulfilled. We will integrate the order management system with the delivery partner of your choice, or can suggest our verified delivery providers in your city. To know more, visit our website here or contact us here.

Conclusions

There are hundreds of sources for building a website. There are so many websites are offering landing page designs that the task itself becomes confusing. Every website has its own theme and learning curve involved. Many of the basic necessary features are either unavailable or are paid ones.

I figured that if I have to learn something, why not start from the basics? There are thousands of free HTML themes available online. Using them with basic HTML knowledge is sufficient in altering the design to suit your needs for your restaurant. One time effort of making the static page, and adding dynamic content sections to it is the easiest way to keep the website dynamic for years to come.

I hope you find this useful. I will explain all the steps in this in detail in my later blog posts. I wish you all the best for your journey ahead!

Rockstar Chef helps food entrepreneurs build e-commerce websites and apps, and provides the entire operating system to entrepreneurs to succeed. To know more about us, please visit our website: www.rockstarchef.in. My name is Shreyash, I’m the co-founder of Rockstar Chef. I’ve personally built a profitable food business in the past, so I know a thing or two about operating a restaurant and building a website for a restaurant.