"Someone should build X for the web" - why not you? All you need is a GitHub account
Published: 2022-05-09 20:05:16

---
title: "Someone should build X for the web" - why not you? All you need is a GitHub account
published: true
description: To build something for the web, all you need is a GitHub account and a browser. Here's how that is done. 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Last week, Šime Vidas complained on Twitter that it is [hard to paste a block of text](https://twitter.com/simevidas/status/1522577869318336513) on a mobile device. I proposed to use pastebin.com but that needs a lot of taps before you paste. Šime then proceeded to joke that we should create pastebinzero.com and all it needs is a full-screen.

```html
<textarea autofocus></textarea>
``` 

So I spent literally a minute to build this. In my browser, with nothing but a GitHub login. From setup, to coding with autocomplete support to hosting. You can see it in all its glory at [https://codepo8.github.io/pastebinzero](https://codepo8.github.io/pastebinzero) and look at the code at [https://github.com/codepo8/pastebinzero](https://github.com/codepo8/pastebinzero).

And you can do that, too. Here is how. 

If you feel like seeing this as a video, check out the following ~2 minutes walkthrough. 

{% youtube rEsYdXB2jLQ %}

Otherwise, here are the steps to start, build and host any HTML/CSS/JavaScript based project on GitHub.

* Go to your GitHub profile, click on `Repositories` and press the "New" button
  ![Animation of creating a new repository in GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrsd1ce9z0djks9edjxl.gif)
* You need to name the repository, as this will later on also be part of the URL. GitHub automatically tells you if the repo name is still available or not. Make sure that your repo is public and hit "Create Repository". If you don't want to show the source code but only have people see the result, you can also keep it private. The generated GitHub pages are always public.
  ![Animation of naming and creating the new repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnw86fnl4ya6o6h03a12.gif)
* This created the repository and you get all kind of information what to do next. For now, click `creating a new file` link.
  ![Animation of creating a new file in a GitHub repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y34ch4r5m3sykufnix7i.gif)
* Name the file `index.html` and enter anything as the content. This isn't important now as this editor here is OK to do some quick fixes, but doesn't cut the mustard. Press the `Commit new file` button and you get a new file. 
  ![Animation of creating an index file in the repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxb1amjm0qwv2q8d8leo.gif)
* Go to the `Settings` tab and select the `Pages` menu item. Make sure to pick the `main` branch from the dropdown menu and hit `save`. This makes what you are working on available as a URL on the web.  
  ![Animation of publishing pages on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4urvvqe0i92nfghdyrik.gif)
* Go back to the `Code` part of the repository and press the `.` button. This loads Visual Studio Code in the browser with this project open. You can now write your project using the full power of VS Code, including autocompletion and IntelliSense. 
  ![Animation of opening VS code in the repository and editing the file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp3wb0yzb3n7njwdzhuc.gif)
* Once you are done, go to the `Source Control` option in VS code, enter a commit message and click the checkmark. This commits the changes to the repository.
  ![Animation of adding a commit message and submitting the file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r827tc7m9n9r2n72waqd.gif)
* You can see when your product is available online on the "Actions" tab of your repository. Check the "Pages build and deployment" workflow. It shows a yellow spinner until the page is ready. When it turns into a green checkmark your page is ready. 
  ![Animation of the build process showing in the Actions tab of GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eijga5jmmw8geuzmlmm.gif)
 

For the video demo, the code is available at [https://github.com/codepo8/greencircle](https://github.com/codepo8/greencircle) and the in-browser version can be seen at [https://codepo8.github.io/greencircle](https://codepo8.github.io/greencircle) where `codepo8` is my GitHub user name and `greencircle` the name of the repository
 
## Why not codepen, jsbin, codesandbox, jsfiddle… ?

There are dozens of places you can host and edit projects online and all of them have their benefits and problems. I really enjoy this way as it gives me the full functionality of Visual Studio Code and my project is in version control. I own all the code and can download it any time I want to. I can also allow other people to fork and change it. 

Many of these features are also available in the other platforms and I really like that you can immediately see the results of your projects as you code them. But this feels like a great end-to-end solution requiring only one login I need for most of my work anyways. Incidently, if you want the immediate display of your project inside VS Code in the browser, you can also install the [Codeswing](https://aka.ms/codeswing) extension.