Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article lays out how to get your simple sample code online with little effort.
What are the options?
Publishing a website isn't a simple topic, mainly because there are so many different ways to do it. In this article we don't aim to document all possible methods. Rather, we'll discuss the pros and cons of three broad strategies from a beginner's point of view, and then walk you through one method that will work for now.
Getting hosting and a domain name
If you want total control over your published website, then you'll probably need to spend money to buy:
- Hosting — rented file space on a hosting company's web server. You put your website files on this space, and the web server serves the content to web users who request it.
- A domain name — the unique address where people can find your website, like
http://www.bbc.co.uk. You can rent your domain name for as many years as you want (minimum being 1 year) from a domain registrar.
Many professional websites go online this way.
In addition, you will need a File Transfer Protocol (FTP) program (see How much does it cost: software for more details) to actually transfer the website files over to the server. FTP programs vary widely, but generally, you have to log on to your web server using details provided by your hosting company (e.g. username, password, hostname). Then the program shows you your local files and the web server's files in two windows, so you can transfer them back and forth:
Tips for finding hosting and domains
- We don't promote specific commercial hosting companies or domain name registrars here. To find hosting companies and registrars, just search for "web hosting" and "domain names". All registrars will have a feature to allow you to check if the domain name you want is available, or if someone else has already registered it.
- Your home or office internet service provider may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments — contact them and ask!
- There are a few free services available like Neocities, Blogger, and WordPress. Again, you get what you pay for, but they are ideal for your initial experiments. Free services mostly don't require FTP software for uploads either — you can just drag and drop right inside their web interface.
- Sometimes companies provide both hosting and domains in one package.
Using an online tool like GitHub or Google App Engine
Some tools let you publish your website online:
- GitHub is a "social coding" site. It allows you to upload code repositories for storage in the Git version control system. You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called GitHub Pages, which allows you to expose website code live on the web.
- Google App Engine is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See How do you host your website on Google App Engine? for more information.
Unlike most hosting, such tools are usually free to use, but you only get a limited feature-set.
Using a web-based IDE such as CodePen
Try playing with some of these examples, and see which one you like the best:
Publishing via GitHub
Now let's take you through how to easily publish your site via GitHub Pages.
- First of all, sign up for GitHub and verify your email address.
- Next, you need to create a repository for your files to go in.
- On this page, in the Repository name box, enter username.github.io, where username is your username. So for example, our friend bob smith would enter bobsmith.github.io.
Also, check the "Initialize this repository with a README" box and then click Create repository.
- After that, drag and drop the content of your website folder into your repository and then click Commit changes.
Note: Make sure your folder has an
Now navigate your browser to username.github.io to see your website online. For example, for the username chrisdavidmills, go to chrisdavidmills.github.io.
Note: It may take a few minutes for your website to go live. If it doesn't work immediately, you may have to wait a few minutes and then try again.
To learn more, see GitHub Pages Help.
- What is a web server
- Understanding domain names
- How much does it cost to do something on the web?
- Deploy a Website: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.
- Cheap or Free Static Website Hosting by Scott Murray has some useful ideas on available services.