Hosting Simple Websites on GitHub and Azure for free

Central California .NET User Group

05/21/2015

Csaba Toth, Csaba Technology Services LLC

Agenda

1. Warmup with free static HTML5 hosting using GitHub or BitBucket

2. Free static website (ASP.NET, PHP, Java) hosting with Azure

3. Free ASP.NET website hosting with Azure with DB backend

1. Hosting static site for free on GitHub

• NOT for ASP.NET (or other server side eco-systems), it’s for client-side HTML5/CSS/JS

• Perfect for static Twitter Bootstrap sketches• Example: http://dealoround.com• GitHub’s convention: gh-pages branch. Source

https://github.com/MrCsabaToth/DealORoundWebsite/tree/gh-pages-> Site: https://mrcsabatoth.github.io/DealORoundWebsite

1. Hosting static site for free on GitHub

• NOT for ASP.NET (or other server side eco-systems), it’s for client-side HTML5/CSS/JS

• Perfect for static Twitter Bootstrap sketches• Example: http://dealoround.com• GitHub’s convention: gh-pages branch. Source:

https://github.com/MrCsabaToth/DealORoundWebsite/tree/gh-pages-> Site: https://mrcsabatoth.github.io/DealORoundWebsite

1. Hosting static site for free on GitHub

• NOT for ASP.NET (or other server side eco-systems), it’s for client-side HTML5/CSS/JS

• Perfect for static Twitter Bootstrap sketches• Example: http://dealoround.com• GitHub’s convention: gh-pages branch. Source:

https://github.com/whateverify/Awesomeness/tree/gh-pages

-> Site: https://WhatEverify.github.io/Awesomeness

Detailed steps for GitHub

• http://blog.teamtreehouse.com/using-github-pages-to-host-your-website

1. Create new repo

2. Add gh-pages branch

3. Pick Bootstrap template and customize or use Jekyll to generate site

4. Commit the site to the gh-pages branch

1. Hosting static site for free on GitHub

• Demo

1. One page

2. Bootstrap template

3. Quick design (colors from http://paintstrap.com/)

1. Hosting static site from Git repo• Similar steps for BitBucket (+ can have 5 private

repos for free!) http://www.techrepublic.com/article/host-static-websites-for-free-with-bitbuckets-git-feature/

• Any source commit means immediate effective deployment too

• Simple and easy to use• You have automatic source tracking

1. Hosting static site from Git repo

• Leverage features of Git repo sites (issue tracking, etc)

• You can register a custom domain name and set the CNAME for the DNS record

• Favicon

• There’s NO database backend and NO application server (PHP, Java, ASP.NET)!

• You can also leverage Google Drive, but you will only have limited change tracking

2. Free static hosting with Azure!• Extremely simple Click-Next-Next• Website can be auto deployed from Github or

BitBucket repository (advantages!)• Besides ASP.NET you can also host (see gallery):

– DNN, PHP, Java, Drupal, Django, MediaWiki, Joomla, nopCommerce and e-commerce frameworks, CMSs, Wordpress,…

• Auto-deploy form source control:– GitHub, BitBucket, Visual Studio online, CodePlex.

2. Free static hosting with Azure!• Demo1. Hosting HTML5 website on Azure2. Hosting static ASP.NET (MVC) website

1. Generating ASP.NET MVC project2. Hosting the source on GitHub3. Deploying it to Azure

• http://www.dotnetcurry.com/showarticle.aspx?ID=881

3. Hosting ASP.NET site with a DB?

• Options:

– 20MB SQL Azure for free

• Persistent

• But what if more needed? – most expensive solution

– Store data in noSQL/document based Azure stores

• Persistent

• Not free, although cheaper than SQL Azure

3. Hosting ASP.NET site with a DB!

• Options:

– SQL Server Compact Edition

• Basically a simple SQL server in a dll (kind of like SQLite)

• Works, because VM doesn’t need to have SQL Server installed

3. Hosting ASP.NET site with a DB!• SQL Server Compact Edition

– Free (space limit within the space limit of the VM, and limitation of SQL Server CE)

– Not as tiered and robust as a separate DB backend• A deploy can override it!• VM migration can cause data loss?

– Certain parts are not 100% supported at this moment (details later)

– Can be very handy for a prototype/demonstration for sure

Azure with SQL CE DB

• http://www.dotnetcurry.com/showarticle.aspx?ID=883

– Not as easy now since VS 2013 doesn’t support SQL CE out of the box!

– Version numbers are different: EF 6.1.1, SQL CE 4.5

– Needed tools: SQL CE, NuGet packages and VS 2013 extension

Azure with SQL CE DB• Install SQL Server CE latest (4.0 SP1) if needed• Install ErikEJ’s SQL Server Compact & SQLite

Toolbox (https://visualstudiogallery.msdn.microsoft.com/0e313dfd-be80-4afb-b5e9-6e74d369f7a1)– this will add capabilities VS 2012 had– http://dotnet.dzone.com/articles/entity-framework-6-

sql-server-2

Azure with SQL CE DB

• Generate ASP.NET MVC project

• Install Microsoft.SqlServer.Compact or SqlServerCompact NuGet package (this will provide System.Data.SqlServerCe assembly, follow DotNetCurry article)

• Install EntityFramework.SqlServerCompactNuGet package (don’t specify specific version)

Azure with SQL CE DB

• Install ErikEJ.SqlCeMembership NuGetpackage

• Design your model

• After starting the app the ssdf file will be generated

• Commit source and watch auto deploy

4. Extras

• Why MVC scaffold creates separate Views for CRUD in the age of AJAX?

• Scaffolding with jQGrid

• http://blog.stevensanderson.com/2011/04/08/mvcscaffolding-scaffolding-custom-collections-of-files/– Good for starting

Scaffolding with JqGrid

• I know DataTables is more recent, but jQGridstill provides less plumbing code for CRUD

• Install a jQGrid NuGet package

– Will pull in jQuery UI package too

– Not Bootstrap style by default

Scaffolding with JqGrid

• Styling for Bootstrap?– Use bootstrap styled jQueryUI (which affects jQGrid

too) if you’d like• https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap

• https://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/extra.html#jqgrid

– Use bootstrap styled jQGrid• https://github.com/Soliman/jqGrid.bootstrap

Thank you!

• Questions?