How to Build a Website Using Devhub -

Creating websites in the past had always been a job left to the professionals, requiring expertise in HTML, CSS and JavaScript to make decent webpages. DevHub attempts to simplify this process to a simple drag and drop interface, letting you create a fully functional website in a matter of minutes. Follow these steps to setup your own personal blog or business website.

Edit Steps

Getting Started

Visit devhub's website. Click on Get Started to start building your website.

The website's homepage.

Select the type of website you want. Devhub allows you to create various types of site, such as a website for your small business or one for a personal blog. It even allows you to import your pre-existing blog to devhub from popular services like Blogger, Tumblr or WordPress among others. This tutorial assumes that you have picked "Small Business site", for the sake of instructing you what to do next.

Filling in the Basics

Fill in the information about your website. What you fill here determines what initially shows up on your website. Don't worry if you make a mistake. You can always change it later.

Sample info. filled.

Choose a Domain name. Perhaps the most important part of a website is its domain name. Pick an easy-to-remember domain name which is related to your website. Devhub allows you to register a new domain for a small monthly fee or you can use a domain name you had registered earlier with another provider. The last option allows you to register a free sub-domain, which means instead of having xyz.com as you domain name you will have xyz.devhub.com as your domain name.

Your Domain name is your Identity on the web.
- Although a sub-domain is not a good choice for a business website, it is a quick and free way to get up and running and test devhub's service.

Fill out personal details. In this step devhub asks you to fill up your personal information along with a CAPTCHA(the password field). This ensures that you are a human and not a spam bot. You are also asked to read the terms of service. Read it and check the box if you agree.

Make sure you enter the captcha correctly

Building the Website

Start building your website. You will be presented with an editable version of your website. As you can see, it has an easy to use drag-and-drop interface. Re-arrange the basic information if you deem it necessary.

Change the number of columns and their width. Below the header you will see a small slider which allows you to adjust the width of the columns. To the left, a dropdown allows you to change the number of columns your website has.

Use the slider to adjust width.

This Handy tool will allow you to add new features.

Try out the Editor's Tray. The editor's tray allows you to add a number of features to the website, like adding blog posts or revenue generating services.

Try adding a blog post. No company website is complete without a blog. Add a blog post from the Editor's Tray. Type in the title, body and don't forget to put it into a category!

Add header images. Header images contain your company's logo and a general picture which describes your company's purpose. For example, a construction company will benefit from adding a picture showing workers at work.

Upload images and logos.

Edit your logo. Near the header images you will see an edit button on the top right. Click on it to choose how to display your logo.

Optimize SEO settings for your website. SEO(Search Engine Optimization) are optimizations made to a website to facilitate quick indexing by search engines. These optimizations allows faster categorization and quickly assign relevant search keywords.

SEO is very important for search engine rankings.
- Click on Optimize Page(SEO) in the Editor's Tray.
- Fill out all the information.
  - Page Name: Describes the current page, which is your homepage.
  - Title Tag: The title tag of your website. The Company's name along with it's tagline should suffice.
  - Meta Description: Describe you company in a few words.
  - Meta keywords:These keywords help search engines categorize the pages they find. Use keywords which are related to your company and potential customers will search for.
- Click the 'i' next to each field for more information.

Edit site settings, Color Schemes and Pages.

Edit site settings, Color Schemes and Pages. On the top right of your screen you will see options which will allow you to change the color scheme of your website, add additional pages and change the site settings.

Change the look and feel. The Themes and Colors option allows you to change the theme and the color scheme of your website. At the top of the popup you can change the theme, which changes the overall look and feel of your site while the lower part allows you to change the background color and the overall color scheme of your website.

This simple box allows you to customize the look of your website.

Edit your site settings. Here you can change the title, description, contact email and other settings of the site. You can choose from advertising options to generate revenue and also modify domain name settings (like buying a top level domain). You can also change the blog settings.

Edit the title, keyword, decription for your page.

Edit the advanced settings. The advanced settings tab in the site settings allows you to obtain the sitemap for your website, which you may need to submit to some search engines or directories. Some search engines may require you to put special codes in your header and footer, which you can accomplish here.
- Make sure that you add the company's name address, zip code, and its basic purpose in the footer. It really helps in improving search engine rankings.

Connecting to Social Media and Publishing Your Website

Connect your Twitter or Facebook account. You can have a live stream of your company's tweets and status updates by connecting these accounts. Click on Social Features in the Editor's Tray.

Preview your website.

Preview your website. Preview how your website will look using the View Preview Site near the top left corner of you page. This allows you to see the website without the clutter generated by editing tools.

Save and Publish

Publish. When you are happy with what you have done, click the Save and Publish Button on the top center of your page.
- The editor requires you to complete all the jobs in the to-do list (bottom left of the page) before you can submit. You can choose to ignore some of these tasks but the list offers a great reminder on things you may have left out.

Edit Video

Edit Tips

Avoid free domains like .tk or .co.cc, it will lower the professionalism of your website. Your best bet is with a .com domain.

Don't try JavaScript or flash gimmicks, they may look flashy and pretty to you but users prefer clean and elegant pages over pages riddled with animations.

Constantly improve your site by adding more content and features––users prefer dynamic, content-rich websites.

You can also register your domain name with other registrars, which may have cheaper offers.

A website which has easily readable address, zip code and other information is usually perceived as professional. Don't hide your contact details; instead, try to place them on the homepage if possible.

A website can generate money, sometimes large enough to cover its maintenance costs. Don't forget to add relevant revenue generating features to your website.

Edit Warnings

A top level domain costs a monthly fee.

Do not choose themes or color patterns which make the website unreadable. There should be good contrast between the text and background, whose colors do not produce a jarring effect on the eyes.