Build and Deploy Website very very Simple With Glitch.com
Tags: Tools, CSS, Glitch, HTML, Developer

Imagine, you are learning to do the web. You have just built a small website using HTML / CSS (or the original website with NodeJS) and want to show to friends and others for suggestions and instructions.

Glitch.com helps you to build a web right away by coding from a browser, no need to install any IDE

This seems easy but not simple:

You have to find a VPS or free host, then search for a domain name and connect the domain name to VPS

If your web needs some features like a microphone, webcam, you must install HTTPS , it’s not easy

you must install , it’s not easy Or you can build a web server or run the app locally, then use ngrok, portmap.io or pagekite to open the tunnel, allowing others to access your website.

These methods are quite time-consuming and not easy. Not to mention, viewers cannot see the code, help you fix the code, etc.

So today I introduce Glitch.com, a very cool website that helps you to code to have the web right away, with domain and HTTPS, no need to install IDE or Git. Let’s see what’s so damn cool that there are so many users!

Introducing Glitch.com

Glitch.com is a website founded by Fog Creek Software, the team that built Trello and the godly Stack Overflow of the developer community.

Glitch is a place where our developers can go up and code a whole project: from a static web with only HTML / CSS, or a front-end project with Angular / React, or a full-stack web with NodeJS.

Glitch’s goal is to create a community where developers and designers can go up to code together, learn each other’s code. Seeing any interesting project, you can also click Remix to fix it into your project too.

For example, when I code a page ABC, I can share the Glitch project at glitch.com/~ABC.

You can go to test run, view the code, remix to edit it into your project, too convenient, right?

Is that all, is there anything else interesting?

In addition to its community, Glitch has quite a few cool things:

Support team codes:

You can invite your friends to “Hey code with me this web, check my errors with me”, no need to install IDE to install many complicated things. Two people coding and viewing the product they create is a very interesting experience

2. Version control available, don’t worry about losing code

If you don’t know how to use Git, every time you fix broken code, you will… give up without knowing how to fix the code to run again. Glitch already has this feature, if you made something wrong, you can fix it right away.

3. Having a web while coding, no need to worry about hosting or domain:

When creating a project on Glitch, you already have a sub-domain, just focus on writing code. After writing, you just need to copy the URL of the website to show off your relatives already.

If you need help, can you copy the URL of the whole project so that your friends can visit, help you fix the bug right away and always, convenient?

Realtime collaboration and free hosting

4. There are many templates available to use: Setting up a project is sometimes a bit cumbersome, complicated, and time-consuming.

Glitch has a lot of templates available from React / Angular to Slack App … You just need to click Remix and start editing the code to start coding right away, no need to setup much.

5. Code to play, run for real if needed: In addition, if the code plays play on Glitch but you find your idea is too good, many users, you can leave the source code to private, add custom domain to ask Glitch … temporarily host my projects!

By default, your app will be 512MB RAM, 200MB hard drive, Glitch will shut down your web if no one accesses after 5 minutes.

If there is a need, you can pay $ 8/month to keep the web alive, increasing the RAM capacity to 2GB. Personally, I think using free is enough.

Tutorial (Very simple)

Glitch’s interface is extremely easy to use, so I don’t need much guidance.

Sign up: From the Glitch.com homepage, you click Sign-up to sign up, you can use Facebook, Google or Github.

Sign up page

2. Create a project: After logging in, you can click New Project, choose a pure HTML / CSS project or have a NodeJS back-end.

Create new project

If you want to code Angular / React, go to https://glitch.com/create and find the template for those projects.

3. Writing code: That’s all, you just need to code and enjoy the results. You can click Show and choose to see the site in another tab, or on the same tab too.

If the code is back-end, you can click Tools -> Logs to view the log and then debug the code for convenience.

Photo by Joshua Reddekopp on Unsplash

Well, after this article, I introduced you to Glitch.com — A super cool, convenient tool that helps you quickly code a website, have something to share with your friends without much setup. .

If you have used Glitch and there is any project that you find interesting and like, remember to share in the comments for everyone to see.