04 - How Do You Publish Your Website Online?

Welcome to the fourth part of 14 Steps To A Career-Boosting Portfolio Interactive Course - we're now well under way to have great portfolios!

If you missed it, read the announcement here!

---

Table of Contents

1. Introduction - Why Should You Have A Portfolio?
2. Start Your Portfolio Faster With Hugo
3. How To Present Yourself In A Portfolio?
4. How Do You Publish Your Site Online?
5. Yes, It's Time To Write Your First Blog Post
6. How To Polish And Publish Your Blog Post
7. Guide To Spreading Your Online Presence
8. An Introduction To Building Your First (Tiny) App
9. Ideate And Choose A Stack For Your App
10. How Do You Analyize And Plan An Application?
11. A Guide To Project Setup Using Web Technologies
12. Getting Your Little App From Idea To Realization
13. Show Your App To The World By Deploying It
14. A Few Words About Maintenance And A Goodbye

---

Lesson 4 - How Do You Publish Your Website Online?

We've come to the point where we publish your website for the whole world to see. Yayy! 🎉 🎉 🎉

I know, I know, it's not quite finished yet, and there's not enough content so everything looks a bit empty. No worries. You'll fill it up over time. The most important thing is to get everything to the Internet so people can start finding you! Having any portfolio beats not having a portfolio by a long shot. (Okay, maybe not this one) 😂

What do you need to publish a website to the Internet?

If you're familiar with how the Internet works, you know that there are web servers and then there are web clients. Servers are specialized computers that run the software responsible for serving websites to users. Users can open the websites in their browsers, which are clients.

So, what you need is a server that will host your website. There are many options here, but most choices fall into one of 3 categories:

• Shared hosting
• Dedicated
• VPS
• ??? - Magic bullet 🌟

We'll cover these so you get an idea of what it takes to use this technology, and then an the end we'll see a magic bullet that will allow us to host our website with one click!

Hosting

Shared Hosting

Shared hosting is the cheapest, but also the least desirable one. Your website is crammed on a computer with thousands of other websites, which tends to slow things down if you get higher traffic to your website. Shared hosting also gives you minimal configuration power. So if you have a website that has been developed in latest PHP, it probably won't work on a shared hosting, as they don't have the most recent software installed, and you can't do anything about it. Also, forget about Node JS or some other "exotic" technologies. It's pretty good for hosting simple blogs, but not much else. Of a flip side, it's easy to set up.

Shared hosting

• Price: $ ($3 - $10/month)
• Ease of setup: High
• Configurability: Low
• Performance: Low

Dedicated Servers

This option is very pricey and usually used by professionals that need high performance servers and know what they're doing. They aren't for you and your blog. Unless you've got millions of visitors per day? No? I didn't think so. With this kind of hosting, you get the whole machine, which usually has nice specs, and it is completely dedicated to serving you and your websites.

Dedicated hosting

• Price: $$$ ($60-$100/month)
• Ease of setup: Low
• Configurability: High
• Performance: High

Virtual Private Server

VPS is somewhere in between the previous two, in every sense. You get a virtual machine, that shares hardware resources with other VPSs, but you have your own boxed operating system where you can do anything you want. It's much less expensive than dedicated hosting, but lets you have the same configurability. It is a lot harder to setup compared to shared hosting (the same as dedicated servers). You need to install all the software (web sever, database and PHP/Node) and to connect it all, meanwhile ensuring that the security is tight. There are a lot of great tutorials on how to do these things. The VPS performance can be really good, and you can always scale up if you need.

• Price: $$ ($5-$20/month)
• Ease of setup: Low
• Configurability: High
• Performance: Medium

Looking complicated?

If you've never had experience with Linux machines, you'll want to start with a shared hosting plan. The only one I used in the past is Bluehost, but there are others that are just as good. Now, you may like to tinker with Linux machines, in which case VPS plan is made for you. The most popular VPS company seems to be Digital Ocean, but I'm running on Linode currently and it works great.

None of these sound great!

Yes, indeed. You need to host a simple static HTML website, that will not get too much traffic. Why would you need to spend hours a dozen bucks to get it?! I mean, it's 2017. - we're practically living in the future. There's AI everywhere, there's blockchain technology on every corner, but it's still quite complex to setup a simple website!

There's a better way

In the last few years there has been a revolution in this space. Several companies are offering to host your static websites for free, AND it's incredibly easy to set up. That's the future I'm talking about!

I'll talk about Surge, but some other cool ones are Now and BitBaloon - BitBaloon even has a drag and drop!

But Surge is so awesome because it gives you the possibility to add your own domain for free! Others usually allow you to host your site for free, and give a subdomain address (like yourname.bitbaloon.com). If you want to have your own domain (which I think is critical when you want to brand yourself on the Internet), you have to pay for it. With Surge it comes free.

So, how to get started with Surge? Open your terminal and run this command to install Surge cli:

$ npm install -g surge

• You need to have Node and NPM installed on your machine before running this command
• When ran, it will install the Surge cli package as a global dependency, so you will be able to start it from any folder by running $ surge
• Depending on your setup, npm install command might require sudo privileges.

Now, cd into the directory where you created your Hugo website, and build it by running:

$ hugo

This command will compile your website into static HTML pages, which you'll find in the public directory. cd into it, and run:

$ surge

Now Surge will ask you a few things like your email and password in order to create an account for you, and it will deploy the HTML files to the Internet. You will get an address which looks like http://lovely-force.surge.sh/ and voila! You're on the Internet.

Setting a custom domain with Surge

Now, you'll want to have your own personal domain. Read the next few chapters and get the domain. Then you can follow the easy tutorial on Surge's website to get you hooked up with custom domain for your Surge website!

https://surge.sh/help/adding-a-custom-domain

Domain

Next, you'll need a domain name. I like the namesurname.com format, but lately prefer the name.io or name.xyz or similar. However, most first name domains are taken. Some other alternatives I see people use are combining the first letter of your name (or surname) with your surname (or name) - e.g. petars.co for me. Check out DomainsBot for domain name suggestions and availability. It also shows you the prices from different companies side by side, so you can usually get a .com domain for about $1. Domain register companies are always running promotions, so you are likely to catch one.

After you purchase a domain, you'll need to set it's nameservers to nameservers of your hosting company. For example, for Linode, I put ns1.linode.com as the nameserver in dashboard of the website where I purchased a domain. For Surge, follow the link from the previous chapter.

Email

Now that you have your custom domain, you can set email accounts for it. Shared hosting providers usually offer this service included in the package, whereas on a VPS you can either setup a mail server by yourself, or use zoho.com which offers free custom domain emails.

Tasks

There is only one task for today, but it's big. Put your website online! 💪

• You'll need to buy and setup a domain.
• Then deploy it on Surge.
• Lastly, follow the Surge's tutorial to connect your custom domain with your website.

Send me a URL where I can see your website online!

Take care and stay Open Source!

---

What's up next?

Next we talk about publishing first blog post! It's nothing scary, you'll see.

The next lesson is scheduled for Monday, September the 25. 2017.

---

Thanks!

Drop an upvote if you liked the article, share if you believe it will be of help to someone. Feel free to ask any questions you have in the comments below.