static sites - bringing web 1.0 back
TRANSCRIPT
STATIC SITESBRINGING WEB 1.0 BACK!
WHO AM I?Raymond CamdenDeveloper Advocate for IBMMobileFirst, Bluemix,Cordova/PhoneGap, Web StandardsBlogging at raymondcamden.com@raymondcamden
ASSETShttps://github.com/cfjedimaster/Static-Sites
GENERAL GAME PLANWhyHowBringing Dynamic Back
Not as good as bringing sexy backHosting Options
WHY?
ColdFusion, PHP, Node, Groovy, SQL Server, MySQL, Oracle(shudder), all kind of other super-fancy dynamic crap!
WHY?
REASON ONE:CRAP BREAKS
REASON TWO:YOU NEED LESS
REASON THREE:MOBILE PHONES + APPS
REASON FOUR:WEB BROWSERS DON'T SUCK!
As much...
MODERN WEB DEVELOPMENTMultiple web serversMultiple application serversMultiple db serversMultiple caching serversMultiple servers
OR
FILES
NO SERIOUSLY - FILES
HOW?
STATIC SITE OPTIONSDesktop ProgramsGenerators
Typically they...
GENERATORS
They give you a template languageThey give you a data languageThey give you a way to previewThey give you a way to generate files
OPTIONShttps://staticsitegenerators.nethttps://www.staticgen.com
FOR TODAYHarp
HARP
DETAILSharpjs.comworks everywheretemplates: EJS, Jade, Markdownpreprocessers: LESS, Sass, Stylus, CoffeeScript
INSTALLATIONsudo npm install -g harp
CLIinit - new projectserver - developcompile - generate
DEMOS (INITIAL)
ORGANIZATIONHarp lets you create hidden assets, files, etcAnything with an _ in front is hiddenYou can use a "public" folder for your site
DEMOS
DATAGlobal dataMetadata
GLOBAL DATAharp.json in Public Mode_harp.json in "Root Style" Mode
EXAMPLE{ "globals":{ "sitename":"Ray's World", "email":"[email protected]" }}
DEMOS (DATA 1)
METADATA_data.json in a folderAssociated with current folderIf you use an object w/ keys that match file names,something special happens
DEMOS (DATA 2)
MORE STUFFProd/Dev code (via environment)"Current" scope (for nav)Directory contents404 support (?)
MORE MORE STUFFMultihost modeNon-HTML files (ie, rss.xml.ejs)Run within NodeBasic Authentication
PRODUCTION SITEScoldfusioncookbook.comwhatthethundersaid.org
SUMMARYLearn more at harpjs.comCheck out the recipes at http://harpjs.com/recipes/
BRINGING DYAMICBACK
DYNAMIC STUFFFormsCommentsSearchCalendars"Data"
FORMSWuFoo ($)Google DocFormKeepmailto
DEMORay, since I know you'll forget, use the form on JSCB.
COMMENTSDisqusLivefye
DEMORay, since I know you'll forget this too, use
coldfusioncookbook.
SEARCHGoogle Custom Search Engine
DEMORay, since I know you'll forget this too, use
coldfusioncookbook.
CALENDARSGoogle CalendarFullCalendarEventBrite
DEMOcal.html
"DATA"ParseFirebaseAnd more I don't know about
DEPLOYING
OPTIONSTraditional Web ServerAmazon S3 Web Hosting (coldfusioncookbook.com,louisianawatercolors.com, whatthethundersaid.org,cajunipsum.com, static.raymondcamden.com)
Google Cloud Storage(http://githubhealth.raymondcamden.com/)
Link (General)Link (Specific)
Link
ANOTHER OPTION
Surge
WRAP UP
COOL LINKS
My Sites:https://github.com/remotesynth/Static-Site-Samples
http://static.raymondcamden.com/cfuitherightway/http://www.cajunipsum.comhttp://www.coldfusioncookbook.comhttp://www.louisianawatercolors.comhttp://www.whatthethundersaid.orghttp://githubhealth.raymondcamden.com