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

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

Static Content

Dynamic Content

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

Download a free theme of your choice

  1. https://html5up.net/
  2. https://templated.co/
  3. https://www.zerotheme.com/
  4. https://www.styleshout.com/free-templates/
  5. https://www.html5xcss3.com/

Select Hosting Provider

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

Parts of a restaurant website

Your website should have:

  1. Title (name of the restaurant)
  2. About Section: A brief introduction or pitch about the theme of the restaurant.
  3. Services: The types of services you provide to your customers (outdoor catering, events, meal boxes, classes, cafe or dine-in, etc).
  4. Menu Highlights: Some exclusive menu items that look awesome and are your specialty.
  5. Your Story behind the restaurant: Here’s the way to build personal connections with your customers and involve them emotionally with your success.
  6. About the founders: Mention your motivations and journey (or struggles).
  7. 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).
  8. Gallery (Dynamic content such as images, blogs, videos, etc.)
  9. Order Now
  10. 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

  1. 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.
  2. Blogging via Medium.com: You can use the widget mentioned here. This is the cleanest blog integration tool.
  3. Blog via WordPress: Here are 2 ways of doing that. Click here and here to know both.
  4. 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.
  5. 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

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

Conclusions

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.

We create e-commerce websites and apps for restaurants, and help them create strong and independent online brands.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store