Speed is Everything !

Among the reasons few of the them to develop website is probably performance. Also you might be not a frontend developer but as per need or interest you want to develop a website (my be for side incomes as well) you need a platform which serve you better to get design ideas, development phase become more fast and easy, deploy changes automatically and manage your sites on few clicks and in single platform.

If above is the case then you are on right blog post, here I will show you my website and experience about how I develop my first static website within a hours.

#hashnode announce Build a Better Web and Win Big with the Netlify x Hashnode Hackathon last month. I thought this is good time to implement my thoughts which was in my mind since long.

Why it since long?

I am backend developer and very less hands-on for frontend technologies so I always have concern about spend time to know that how I can manage hosting of my site. so indirect thought here is I just want to focus on coding and not much on CICD part and obviously this is for learning so I need a learning platform which should be free.

Solution is Netlify !

Netlify is an all-in-one platform (PaaS service) for automating modern web projects. Replace your hosting infrastructure, continuous integration, and deployment pipeline with a single workflow. so this is one platform where you manage almost everything which you need in just few clicks.

Continues Integration

As a backend developer I am familiar with this terminology and good news is for website design also this concept we can use with GitHub and Netlify. Just need very small efforts to do this. so CI pipeline (which is managed by Netlify, you need not to worry if you are not familiar with DevOps) trigger automatically and deploy your changes within a minutes.

About my website ! (Design)

Learning is the objective for me to participate this hackathon so I make a plan for how I can spent my time apart from my work and day to day activity. so I decide to donate my book reading and coffee time to build a website so this thought is become my idea of website. And my website is "Book with Coffee".

Book With Coffee (Develop)

This is static website which help to book readers with

• details about books, there reviews and offers books to customer with great deals.
• Customer can be get details about available books in store
• Customer can contact with store from given contact details,
• Customer can book appointment to visit store to have free coffee with book purchase
• Customer will get more insights about books, authors, read blog post about different reviews about famous books.

Website developed with JavaScript (reactjs), html, CSS.

Home Page

Home page will give you overview about features of website and what we can offer here. Also it will redirect you to specific tab/section where you will get more insights.

Books

This page will inspire you to read the books from different topics (choice is yours) and from here you can take a decision to order book from our book store in one call.

Here all book details mentioned in details with description, prices, no. of pages, offers etc.

Authors

When king is live then kingmaker should be there, good books comes from authors mind so we always interested for get to know about authors. This page will help you about get details about famous authors shortly.

Blogs

To know about readers thoughts, my own opinion this page is dedicated for blogs about book reviews and customer feedback about books. This is static website so customer can not directly submit feedback (as of now admin panel not there) but they can mail us there thought so we can add it on page.

Contacts

Contact details, about us, feedback form managed in this page.

CI Pipelines and configurations (Deployment)

1. Sign up your free Netlify account

1. Sync your GitHub account to fetch code from there and setup CI pipeline Just follow below 3 steps

1. Configure automatic field parameters (I prefer to keep default values as it is)

1. Replace auto generated domain to custom domain (I am using free domain for now)

1. Deployment settings and options

Some thoughts if you are beginner like me

I am not front end developer so very hard to start building from scratch so here again Netlify helped me with templates which I use for kick start.

You can also make a choice from below Netlify Templates.

Also feel free to use my code from my public GitHub repository

Visit our "Book with Coffee" website

You can check my website and suggest your thought in comment box !

What is improvement part in website

• Feedback form is not working at the movement so in future if I decide to use this website for my personal interest or business I will configure my email address and I will develop feature to understand customer feedback also upload there book reviews automatically to Blog tab.
• This is static website so Admin pannel is not there so we need to make changes in .md file for add more data and its need re-deployment.
• Data on website is demo pupose so not so much information added but I will do when time permits.

My next blog will be : What Netlify offers you, in details