Search The Hostwinds Guides Knowledge Base

Set Up a Local Development Environment

Share This Article

Many website developers begin to learn how to create websites with coding tutorials from sites like freeCodeCamp or Codecademy which offer a built in environment for you to learn website development skills. There are also sites like Codepen and CodeSandbox which are useful for someone who is just learning to put together a website, but has never set up a local development environment before. If you would like to deploy a website to your Hostwinds web hosting service, you can create your own local development environment and then to upload your work from there to your web hosting account with Hostwinds.

There are a few necessary items that you will want to have to be able to create your website on your local computer. This guide will list a generic set of tools for this purpose, and will help you to get you set up with an outline to build your site in. Keep in mind that there are numerous alternatives and additions which can be made to the list here and the choice to build your site on your computer is entirely up to you.

 

The Tools You Will Need

The first tool that you will want to have is a text editor such as Notepad++ or Atom, which is often more feature packed than a standard text editor and is then called an IDE (Integrated Development Environment). You will want to have an FTP program such as Mozilla’s FileZilla Client for transferring your files to where they will be hosted. Finally, you will want to have a web hosting account with Hostwinds so that you can deploy your site once it is finished.

 

The Basic File Structure

To create a website you will need a basic development environment that has three files and three folders. The main folder will be the folder that contains your entire project and will also contain your index.html file and two other folders. The two folders inside the main project folder will hold your cascading style sheet file and your JavaScript file. This system allows you to link the files together through references in your code and to keep the files separated so that you can keep the technologies separated or split your JavaScript into separate files to keep the site manageable. Each type of file goes into the folder for it’s specific technology.

 

website directory structure

 

There are three main files in a basic website. The first is the HTML file which is for creating the markup which represents the main content of your site. The next is the Cascading style sheet file (main.css in this guide) for styling the markup on your webpage. The final file is the JavaScript file (main.js in this guide) for creating action on your page. To connect these three files the HTML file will have links in it which will connect the other two files to it.

 

The link to your main.css file will be in the HTML link tag in the head of your HTML file:


 

The link to the JavaScript file will be in the HTML script tag at the end of the body of your HTML file:

 

Starter HTML Skeleton

Shown below is a starter template for an HTML file listed below. It has all of the necessary basic information already added to get you started. You will add your website content in between the body tags to create your website.

The index.html Page

Once you have created this file, you will want to save it as index.html so that this serves as your homepage.

Now you are ready to create your site or to paste in the work that you have created on an external coding site. Your website’s code will be inserted between the first body tag and the script tag. You will enter your CSS code in the main.css file and you will enter you JavaScript in the main.js file.

 

Deploying Your Site

Once you have finished creating and saving these three files, then you will be able to upload the files to your website’s document root using an FTP client such as FileZilla or using File Manager in cPanel. For Hostwinds Shared Hosting, Business Hosting and cPanel accounts, this will be public_html folder to have your site come to life for you.

 

Summary

It is very easy to create your own custom website at Hostwinds by using HTML, CSS, and JavaScript and to have your site show up on the internet. Once you have set up the files and folders in this guide you can customize your site with your own look and feel to make it your own.

 

Related Articles

 

Related Resources