How to set up a new noob website-and avoid the landmines I stepped on and caused my forehead to hit the table
I’m a big fan of getting AMPED up to do things.
This past week, I was quite amped… and also headbangingly frustrated.
Accurate depiction of me when I code. Although he swears less than me.
I work at Alpha Vantage, and we have an awesome financial data API. However, it can be a little tough to tell people about it — so I went about making some test websites to show the basics of it.
I’ve taken some web dev classes in high school/college, but forgot a lot of it, and the landscape has changed, as well as my area of expertise has shifted to python. I thought “How hard could it be right?”
haha
So hopefully you can not run into the same issues I ran into. There are a few fun little steps that I think are a little more overcomplicated than they need to be… Maybe for some smart startup to jump in.
This is assuming you’ve coded SOMETHING before, and are at least mildly familiar with the concept of HTML/CSS/javascript (They are markup languages and javascript is a scripting language… Ok it’s Multi-paradigm but whatever not important). This is for a STATIC website, meaning we are not doing any backend work.
1. Write your HTML/CSS/Javascript
But don’t write it from scratch.
Unless you’re not a noob and you 100% know what you’re doing.
Grab a template offline, there are TONS of free resources, and you can use this as a starting point. Here’s one such example that I’ve used.
Now this is great, but you still have to edit things around to make it “look nice” and the way you want it. So here is what you need to know to move things around without the page flying off the handle:
- The basics of HTML/CSS
- How to get bootstrap
- How the Bootstrap grid system works
Honestly, at this point, you don’t even need to worry about javascript
So that’s pretty much it, and you can fiddle around with your HTML/CSS and just google stuff that pops up that you want to do and don’t know how to do. Stackoverflow is probably the go-to location for most developers to figure out how to “do” stuff.
At this point, you have a page that looks pretty, hooray! Let’s get it on the web.
2. Get your domain
Here is where I had a lot of fun messing up.
This is getting the www.yourwebsitehere.com name so you can put your code onto that web site. This is known as domain hosting.
You can go to any of the million sites and pay like $40/year to get a domain. I used Squarespace, but I should I just used google domains, and you’ll see why in a second. It leads into the next step
3. Get your web hosting platform, and upload your code
What is a web hosting platform?
This is where all that “cloud” stuff starts coming up. Now you need to stick your code somewhere on a machine that is always on so people can always get to your website. Some common ones are google cloud, AWS, and Heroku.
This is where a lot of my frustration began.
AWS is massive. You get onto it and there are like 50 buttons to press and you’re all kinds of like “wtf”. I ended up going with Google cloud, but I still ended up turned around half the time. This document will help you a lot, and you should reference it in tandem with this. Just go to the “console” -> “storage” -> “browser” and then you have to “create a bucket”.
Why is it called a bucket, and why is it in this weird spot in storage, and what is all this other crap, were the questions that floated around my head, but I carried on.
When you created your bucket, name it www.yourdomainyougotfromthelaststep
Whatever domain you got, make SURE that it’s www.thatdomain
Is that clear? Great, moving on.
It will ask you to chose a home page — which you should do “generally index.html”. ALSO I found out you can upload a file without the “.html” extension and just hit the three dots by the file name -> edit metadata -> text/HTML so that you don’t have to call it by “example.com.html”
Anyways.
4. Make your code public
This will be different web hoster to web hoster, but generally something along the lines of “select files -> make public”
Watch this guy at 2x the speed for reference.
5. Connect your web hosting site to your domain hosting site
This is the fun part — and if your domain hosting service and web hosting service are the same platform “like google, and not Squarespace and google” this will be way easier :)
So your domain hoster will have advanced settings for DNS. In there you will have to add a CNAME record. That page will look something like this:
For google cloud, you’ll want to add something EXACTLY like this.
This says “hey, get the stuff from google cloud that has “www.yourexample.com and put it on the web under www.yourexample.com”
Then you’ll have to get verified. Which is often a similar process as above, just another record in the DNS advanced settings.
6. Wait
Yup.
Then you wait… And hope and pray your stuff worked.
It may take a while for anything to actually happen. Mine took maybe around a few hours — luckily, it only took me an hour to find out it would not be instant.
And if it doesn’t work, find out where you went wrong, yay!
7. Bonus: SSL
You know that little lock at the top left of your URL in your browser?
That’s from an SSL certificate, it means your site is safer. How do you get one of those? You go to someplace like namecheap.com and buy it.
There are some verification things, and then you have to set it up correctly… This is the part I’m currently working on… And I hope it’s not a huge pain for it to verify, but I’m currently waiting again… So we will see.
Know any easier ways? Should I have done something else? Was this helpful? Useless? Let me know in the comments!
