Monday, September 16, 2013

Static site

Making your own Static Website

Under construction

Intro

You can make a website for free. Want to start a forum, make a website for your startup, showcase your latest creations and get buyers, make a website for your church with a forum.  I'm going to outline my findings for 100% free options for creating your own website.

If all you want is a walkthrough of how to make your own website click here for a tutorial

Free Website options

First check out these polished website making sites. They have easy theming, customer support, active forums, and often allow embedding of HTML widgets for further tweaking.

Blogger

While you may think "I don't want to make a blog" the concept of having  pages, and posts are often enough heirarchtical nesting to suit your needs.  Blogger can give you direct access to the underlying HTML
free sub-domain at  XXXXXX.blogspot.com


Wix

Beautiful and very polished website creator. Drag 'n drop feel with an HTML widget box option.
free sub-domain at XXXX.wix.com, or pricing option to migrate your domain over to them.
  They already have a google calendar integration app and "call me" app, both free.
  Hit up the app store when editing your website and browse their rather rich set of apps available. The dropbox/GDrive app for direct access to a cloud folder was intriguing.


Tumblr

I havent had much experience here.  I expect a fair amount of customization here.


Google Sites

Google has done a great job pulling it all together. You tell it the name of your company, address... and they send your business a postcard to verify it's you. You then get a polished website with full traffic metrics, Google+ integration, bla bla bla.


AppEngine

Sometimes you just need some server side computation either triggered time-wise, or by it getting an HTTP request (website hits a URL). AppEngine takes in your PHP/Python/Go code, which takes in HTTP requests and returns whatever, including HTML. The free account has daily request limits, application emailing limits, and file access is limited to interaction with google datastores (no free MySQL access).  Google's data storage is fast, indexed, and easy to use.  They also handle spinning up multiple instances world wide for low latency.

Wordpress

While you can pay Wordpress.com to host your wordpress pages, you too can host them.  See this post for instructions on going this route.  Sometimes wordpress plugins require you to go this route.

Hosting

Dropbox (Pancake.io)

Pancake.io is needed to make your files directly accessable from the web w/o needing to click on a "Download" button for your .html file.
Files in your pancake.io folder (subfolder in your dropbox) are available online including css, js, html... files.  I recently ran into a problem with very large files, but pancake/dropbox is probably paying per megabyte downloaded.
2 GB is free, and is probably sufficent, with easy free actions to get more storage if you like backup.
While pancake.io has an online text editor, editing code isn't that nice.


GDrive

Where this really shines is apps that allow you to edit your online files.  Sharing a folder publicly is easy, but getting a direct line, w/o some hoop jumping isn't quite there.

Non-profit

If you're making a website for a non-profit organization check out dreamhost. They offer free hosting

Shortened URL: Bitly

bit.ly/polishedWebsite
If you're serving your flat website from some obscure base URL this provides an easy way to get a simple looking URL.  Bitly lets you pick the part that comes after bit.ly/XXXXXX if it isn't already taken. The url redirects to your long website URL.
You can change the redirect URL at a later point if your files are getting served from elsewhere.
bit.ly offers you nice traffic metrics to visitors, which can be duplicated with widgets.


Free domain: NoIp

Sometimes you want a domain for free. noip.com lets you sign up for a sub-domain common.no-ip.org for example, which will point to an IP address.  You can even host your files from your phone and install the no-ip app which can automatically update the IP address whenever the app notices your phone changes IP addresses.  Every month you need to click on a "I'm still alive" email link, but is free.
Note: If your server (either on your computer or phone) doens't have permission to make a customer server on port 80 you'll need to configure no-ip to redirect traffic to a different port. The user's URL in their browser does change to your IP:port which makes bookmarking less than nice.

Widgets

Forum

Nabble gives you an embedable forum with full admin features.  If all you want is a forum nabble provides a domain for your forum for free.  Registered users (registration is free) can post HTML content. You, as the admin, can edit each page and override each type of page's functionality for a highly customized forum.  You can also change the format to model a blog, Gallery, News feed... because they're all based on the same concept.  A forum is just one way of creating a tree.


Comments

Most blogging sites come preinstalled with comments, and may or may not allow you to disable the requirement that commenters be registered somehow (AIM, google, yahoo...). Allowing anonymous comments may be your way of having a low entrance bar. This widget also allows you to either require or not require some form of registration. If you're just doing some low level HTML junk and want a comment section this is easy to set up. There's the variable hbc_user.PAGE that you can set for each page of seperate comment threads

Call Me

With Google voice you can add a widget to allow viewers to call you.  Don't worry about having your phone number plastered all over the web.  The widget has the viewer enter in his/her phone number and google calls both of you in one call.


Chat area

     Here's a flash based chat window http://xat.com/web_gear/chat.php
     I like to disables the smileys (We're in the 21st century) and have a transparent background.
     Here's a javascript chat window http://embedded-chat.com
     You can either have the window come out of a tab on the side of the page, or be in a div somewhere


Polls

  1. Google Docs allow you to make a form and get access to the results in a spreadsheet.  You can view the form and extract the textboxes with their IDs and rearrange them as you see fit.  See the chart option below for more fun.
  2. Nabble forum's allow you to post a new thread with a poll.


Charts

    Google spreadsheets allow you to pull data from an imported file, a table in a web page, CSV file, or text field using some XML class path in a web page.  You can then assemble the results and make a chart from them.  Click on the arrow and "Publish Chart" then embed this in your web page. 


Flixn

Use your webcam to talk with people face to face.


Ebay

With this tool you can show an up-to-date listing of your recent ebay items you're selling


Maps

You can show a map to your store, favorite spot to hike, or the area you grandfather lived. For the adventurous you can call on Google's Maps javascript APIs to do some really fancy things.


Social Network windows / Like buttons

Facebook

Do you have something you'd like people to like?


Google+

My personal favorite.  I may be biased though


Linkedin

Embed your profile right on your site.  No more needing to update your skills in multiple places


RSS feeds

Do you have some RSS feeds that you'd like summarized on your page?


Music

I can't really recommend one, I haven't used one. Providing a link to the mp3 file you saved and made public in a cloud drive is an option, however may be illegal depending on what the mp3 is of.


Tag Cloud

Do you like the jumble of words that give a birds eye view of what a page or blog is about.  Point this tag cloud at your site and get an embed code to slap into your page


YouTube

Embed videos right into your site. Teach lessons with videos. Alternatively you can link to a playlist you created.


Twitter

Do you want your tweets to appear right on your webpage?  I don't have a twitter account so I don't know if their widgets require a server backend.


Flickr

Javascript Toolboxes

CKEditor

HTML wysiwyg editor.  In a nutshell it wraps itself around whatever div/textbox you point it at and it lets you change the contents with html elements.  While it assumes saving by calling some PHP, the full version (also free) has a "Source" button which you can copy and paste out.
Embed this into your page so you can edit the whole page in a textbox online.
You can link directly to their nightly javascript build so you don't have to copy their folder to your public cloud folder

jQuery UI

I haven't had to use these features, but, oh boy, do they look slick.
W/o a php running backend, the user won't be able to save their work, but you may find creative uses of rendering whatever data you have

CSS

css files are used to play with the formatting of your webpage.  With them you can change the font size of all section headers, or make them all centered. This is only skimming the surface of what is possible.  For the newbie it's probably easiest to simply swap out one css file for another till you find one that looks good for your content.  If it's almost right I encourage you to get a basic understanding of how css files work so you can find the section that's tweaking the aspect that's not quite right.

Bootstrap

Here be some beautiful css files.

1 comment:

  1. I can offer you free sentence structure and grammar editing as well as help you communicate your points in a well organized and coherent way that even less technically skilled people can understand. I admire your smarty pants computer skills very much. I am your mother and I love you.

    ReplyDelete