Proverbial Blisters – Getting your code on the web

Proverbial Blisters

When I learned to code even the tiniest bit of html I felt awesome.  Coding is like magic to me.  I type in what I want and it makes it happen.  I love it.

As I got better, however, I noticed that I was getting very good at one part of building websites but still knew next to nothing about another, very important part.  And that was the actual deployment of the website.  I didn’t know how to get my code out into the actual world wide web outside of my corporate environment, where I hit shift+u and dreamweaver made it happen.

I am, frankly, still kind of embarrassed by this.  I’m not sure but I think it’s probably a fairly normal thing for programmers to not necessarily be familiar with the web hosting side of things.  Not knowing how to do this felt as bad as the blisters that I got from running in the outfit shown in the picture above.

So, I’m going to talk about three ways to throw your code up on the internet so everyone can appreciate your coding ninja skills.  Here they are:

CPanel File Manager (easiest)

Things needed: Webhost (godaddy, namecheap, bluehost, me)

The host I work with (namecheapand a lot of other hosts provide a control panel aptly named…cpanel.  Whether it’s cpanel or something else, all the normal ones will provide some way to access your files.  This makes it immensely easy to throw your code up there.

You just click File Manager as shown in the picture here and it will take you to your files.  Below I talk more about where to put your code but it’s set up pretty simply and you just upload your code and then see it live!  This method makes it a little slower than the FTP method below because you can’t really mass upload/download.

Cpanel

Basic FTP (easy)

Things needed: Webhost (godaddy, namecheap, bluehost, me), FTP software

Any web host will provide you with some sort of ftp credentials.  With these credentials you can access your code using some sort of (free) software.  I use FileZilla (I’d use the additional download options to avoid bloatware).  The credentials will generally include a domain name, username, and password.  I’ve included a picture of what filezilla looks like.  On your left you have your local code and on your right you have your server code.

FileZilla

Where to put your code

This applies to any method for most webservers.  Most php servers will generally have a public_html or something like that where your front side code will reside.  If you want to test to make sure it works (and why wouldn’t you??) just make a simple index.html and put it in the public_html directory.  The web server will by default open index.html at your home level (aarmora.com will show /public_html/index.html unless we tell it otherwise).  It also responds to standard file structure.  /public_html/pizzaMcFace/ilovepizza.html can be seen by navigating to aarmora.com/pizzaMcFace/ilovepizza.html.  And I do love pizza.

Firebase (harder, more fun, free!)

Things needed: Nodejs, firebase account, fingers (or anything with which you can type)

I love this because you can put your code out there for anyone to see without owning a domain or paying for a webhost.  Before I had a stable webhost, I would often use this to show clients previews of work I was doing because it was just so fast and easy.

Seriously don’t be intimidated by node and firebase for this method.  We are just using the node package manager and just the hosting of firebase.

So, first, download nodejs for your appropriate OS and install it.  It is very straight forward.  A few accepts and nexts and you’re done.  This will install a command prompt that is set up for using nodejs.

Now let’s make a Firebase account.  Once you have it open you can create a new app from your dashboard.  The app url you choose here will give you your Firebase hosting url.

Firebase dashboard

 

With that account and app created, we find the nodejs command prompt that Node installs for us and download the Firebase deploy software (firebase’s guide can be found here) by just typing npm install -g firebase -tools at the command prompt.  After this, you’ll want to change the directory to where you code lives.  As seen in the picture below, mine is at c:/sites/tester, where I have an index.html file.

From there, I start the Firebase magic and simplicity.  We just type in firebase init and it’ll probably have you sign in and then confirm which app you want to use (just type in the app’s name).  It’ll ask you what the public directory should be and you should just hit enter to confirm that you want to use the current directory.  It’ll set you up and then it’s just firebase deploy and you will be live!  My index.html file had some pretty complex code, or “hey dudes”, as you can see on my live app!

Firebase from console

 

So, there are three simple ways to get your code on the internet so you can show you spouse, best friends, and mom.  You have now contributed to part of the world wide web!

Want more great information?  Subscribe below!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.