Have you ever wondered how all these websites are running on online, or how they work. In this article, we will provide a step by step approach of publishing any website whether it is static or dynamic in the online.
How websites work
In order to understand how websites work you need to first understand about 3 core components.
- Frontend
- Backend
- Database
Frontend
Frontend is the first part you see whenever you visits any website. The structure, the stylings everything you see is frontend code running which in most cases contains HTML, CSS and Javascript. HTML contains paragraphs ,headings, tables , lists etc. CSS is used for styling the websites. Javascript is used for dynamic functionality. HTML,CSS and Javascript combine to form a frontend portion of any website . In recent cases frameworks like react also using extensively because it will give flexibility to combine HTML,CSS and Javascript in one single page . Whenever user interact with website the frontend makes request to backend and then backend process the request and sends appropriate data to the frontend.
Backend
Backend is the core of any website because every processing takes place here like what to do with user data,incrementing count of likes once you click on the button etc. through languages like PHP,Node.js, Java .In short backend is the place where the entire logic of all your website exists. Often times you hear about server, it is nothing but a computer running the backend code
Database
In simple terms database implies storing data of any sort like users info, their posts, their blogs ,everything . Database makes your data permanently accessible to anytime. There are many different types of databases are available for example Realtional Databases(SQL) which stores data in form of rows and columns whereas in the databases like NoSQl Databases(MongoDB) the data is stored in the form of document which contains json data . Through backend we interact with databases and then we store or fetch results.
//MongoDB stores data in the below format which is json data
{
"username":"john",
"email":"john1712@gmailcom"
}How website runs ?
Whenever you visits any website what the browser actually does is converting that domain like (https://thyideas.in) to IP address by using DNS records. DNS records contains mapping of websites to their IP addresses. This IP address is where your backend server is running. Intially , frontend makes request to backend and then backend based on the data to fetch/retrieve it will communicate through database and then send this response to frontend . This is how any website in the internet runs.
How to publish your website?
If your website is static means web pages are delivered to user exactly as stored on the server or dynamic in which different users get different web pages based on interaction the process is straight forward
1. Buy a Domain Name
A domain is the unique name or address used to identify a website on the internet. It’s what users type into their browser's address bar to visit a specific website, such as google.com or thyideas.in . Some hosting providers will give free subdomain name .You can buy domain name through Godaddy,Wordpress, Hostinger etc..
2. Buy a Hosting Provider
Hosting provider makes your website accessible on the internet. They store your website’s files, data, and content on their servers and ensure that it is available to users 24/7. Hosting providers like Render, Netlify , Railway provide free trial with limited amount of resources. They will also give their custom subdomain to your websites. Some of the best hosting providers are Hostinger, GoDaddy, Vercel etc. Upgrade to premium host plans based on your website growth and traffic.
3. Github
If you are a web developer or planning to publish your own code and make it to a website. You can use of github. If you don't you can go to websites like wordpress.com and add templates to your website. Wordpress can easily create and manage your website through dashboard. You don't need to write any single line of code in Wordpress whereas Github is primarily used to store your projects in the cloud and also in collaboration in software development projects
//Steps to push your project into github
1. Create a free account in github.com
2. Create new repository and give a unique name , you can choose public or private based on your requirements
and then choose create repository
3. Now your repository is created . You need to push your code to github
4. if you are using VisualStudioCode, go to root directory of your web project open new terminal and type following
commands
i. git init
ii. git add .
iii. git commit -m "your commit name"
iv. git remote add origin "your-origin.git" (which is found once you create new repository)
v. git push -u origin main
It will push the the code to the github remote repository
5. If you are doing changes in code and want to make push again you can use following commands
i. git add .
ii. git commit -m "your-updated-commit-name"
iii. git push -u origin main
It will update the changes and with those changes a new commit will be created.4. Connect Hosting Provider to Github
After successfully pushed your project to github ,you can make this project to add in hosting providers. For that signin with required hosting providers . Go to add project and signin with your github account most of the hosting providers use github for their account login. Once you sign in it will ask option for choose specific repository and press enter. And fill the required info like project-name, location etc. And after that enter deploy . Different hosting providers has different setup options after choosing required project. Enter the required details and enter publish/deploy
That's it. Now users in internet can access your website. ⚡