Upgrade to Pro — share decks privately, control downloads, hide ads and more …

E4E Automating Your Site's Front-end Performance

Kitt Hodsden
September 18, 2015

E4E Automating Your Site's Front-end Performance

Presentation at Engineers 4 Engineers on automating front-end performance.

Kitt Hodsden

September 18, 2015
Tweet

More Decks by Kitt Hodsden

Other Decks in Technology

Transcript

  1. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 1 Automate Your Site's

    Front-End Performance Kitt Hodsden / @kitt slides here
  2. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 10 Determine key metrics

    Establish a baseline Make a change Measure effects
  3. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 11 Determine key metrics

    Establish a baseline Make a change Measure effects
  4. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 13 40% will abandon

    a website that takes more than 3 seconds to load.
  5. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 51 $ npm init

    This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (dev) performance version: (1.0.0) description: Automating front-end performance metrics and improvements entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to .../e4e/dev/package.json: ...
  6. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 52 $ npm init

    This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (dev) performance version: (1.0.0) description: Automating front-end performance metrics and improvements entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to .../e4e/dev/package.json: ...
  7. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 53 { "name": "performance",

    "version": "1.0.0", "description": "Automating front-end performance”, "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } This is what a package.json file looks like
  8. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 55 { "engines": {

    "node": ">= 4.1.0" }, "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.11.3", "grunt-contrib-watch": "~0.6.1", } } This is what a package.json file looks like
  9. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 56 { "engines": {

    "node": ">= 4.1.0" }, "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.11.3", "grunt-contrib-watch": "~0.6.1", } } This is what a package.json file looks like
  10. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 57 $ npm install

    With a package.json file, you can install the needed packages easily.
  11. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 58 $ npm install

    No -g here! With a package.json file, you can install the needed packages easily.
  12. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 59 $ ls Gemfile

    README.txt fonts node_modules tpl Gemfile.lock config.rb img package.json widgets Gruntfile.js css js scss
  13. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Check dependencies into the

    repo? http://addyosmani.com/blog/checking-in-front-end-dependencies/ http://redotheweb.com/2013/09/12/should-you-commit-dependencies.html 60 Total sidebar on checking dependencies into the repo or not
  14. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 61 module.exports = function(grunt)

    { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); };
  15. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 62 module.exports = function(grunt)

    { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); }; A basic Gruntfile.js file
  16. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 63 module.exports = function(grunt)

    { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); }; A basic Gruntfile.js file
  17. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 64 module.exports = function(grunt)

    { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); }; A basic Gruntfile.js file
  18. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 65 grunt.loadNpmTasks('grunt-aws-s3'); grunt.loadNpmTasks('grunt-cafe-mocha'); grunt.loadNpmTasks('grunt-contrib-clean');

    grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-csslint'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jade'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-env'); grunt.loadNpmTasks('grunt-favicons'); grunt.loadNpmTasks('grunt-html-validation'); grunt.loadNpmTasks('grunt-mkdir');
  19. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 68 ... // load

    all the grunt modules instead of one each line require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); grunt.registerTask('checkjs', ['jshint']); grunt.registerTask('watchjs', ['jshint', 'watch']); grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);
  20. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 72 devperf: { options:

    { urls: [ 'http://localhost:8000' ] } } … grunt.registerTask('pe', ['devperf']);
  21. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 74 … devperf: {

    options: { urls: [ 'http://fromthemiddle.io/' ], numberOfRuns: 5, openResults: true, resultsFolder: './devperf', phantomasOptions: { 'film-strip': true } } } … grunt.registerTask('pe', ['devperf']);
  22. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Remove HTML Comments 84

    https://github.com/gruntjs/grunt-contrib-htmlmin
  23. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 86 … htmlmin: {

    dist: { options: { removeComments: true, collapseWhitespace: true }, files: { 'dist/index.html': 'src/index.html', 'dist/contact.html': 'src/contact.html' } }, dev: { files: { 'dist/index.html': 'src/index.html', 'dist/contact.html': 'src/contact.html' } } } … grunt.registerTask(‘comments-be-gone‘, ['htmlmin']);
  24. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 87 Determine key metrics

    Establish a baseline Make a change Measure effects
  25. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 88 Determine key metrics

    Establish a baseline Make a change Measure effects
  26. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-phantomcss —save-dev

    https://github.com/chrisgladd/grunt-phantomcss https://github.com/Huddle/PhantomCSS 95 Make sure you haven’t removed things you need
  27. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 97 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats

    phantomcss: { desktop: { options: { screenshots: 'test/visual/desktop/', results: 'results/visual/desktop', viewportSize: [1024, 768] }, src: [ 'test/visual/**.js' ] }, mobile: { options: { screenshots: 'test/visual/mobile/', results: 'results/visual/mobile', viewportSize: [320, 480] }, src: [ 'test/visual/**.js' ] } }
  28. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 98 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats

    phantomcss: { desktop: { options: { screenshots: 'test/visual/desktop/', results: 'results/visual/desktop', viewportSize: [1024, 768] }, src: [ 'test/visual/**.js' ] }, mobile: { options: { screenshots: 'test/visual/mobile/', results: 'results/visual/mobile', viewportSize: [320, 480] }, src: [ 'test/visual/**.js' ] } }
  29. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 99 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats

    casper.start(‘https://kitt.hodsden.org/') .then(function() { phantomcss.screenshot('#region-branding', 'region-branding'); }) .then(function now_check_the_screenshots() { phantomCSS.compareAll(); });
  30. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-cssstats --save-dev

    100 https://github.com/cssstats/grunt-cssstats Look at the site’s CSS statistics
  31. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 107 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats

    cssstats: { dev: { options: {}, files: { 'stats/css-stats.json': ['css/example.css'] }, } } … grunt.registerTask('stats', ['cssstats']);
  32. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 108 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats

    cssstats: { dev: { options: { safe: false }, // Barf on invalid CSS files: { 'stats/cssstats-dev.json': ['app/styles/main.css'] } }, prod: { files: { 'stats/cssstats.json': ['dist/styles.css'] } } }
  33. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 109 grunt-cssstats configuration https://github.com/cssstats/grunt-cssstats

    cssstats: { dev: { options: { safe: false }, // Barf on invalid CSS files: { 'stats/cssstats-dev.json': ['app/styles/main.css'] } }, prod: { files: { 'stats/cssstats.json': ['dist/styles.css'] } } }
  34. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 113 Determine key metrics

    Establish a baseline Make a change Measure effects
  35. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 114 Determine key metrics

    Establish a baseline Make a change Measure effects
  36. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 117 grunt.initConfig({ montage: {

    iconaroo: { files: { "images/sprites": [ "images/icons/*.png" ] }, options: { size: 32, outputImage: "sprite-icons.png", outputStylesheet: "sprite-icons.css" } } } }); Sample grunt-montage configuration
  37. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 119 imagemin: { prod:

    { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] } }
  38. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 121 grunt.initConfig({ svgmin: {

    // Task options: { // Configuration that will be passed directly to SVGO plugins: [ { removeViewBox: false }, { removeUselessStrokeAndFill: false } ] }, dist: { // Target files: [{ // Dictionary of files expand: true, // Enable dynamic expansion. cwd: 'img/src', // Src matches are relative to this path. src: ['**/*.svg'], // Actual pattern(s) to match. dest: 'img/', // Destination path prefix. ext: '.min.svg' // Dest filepaths will have this extension. // ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg }] } }); grunt.loadNpmTasks('grunt-svgmin'); grunt.registerTask('default', ['svgmin']); Sample grunt-svgmin configuration
  39. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-responsive-images --save-dev

    123 Responsive images by resizing https://github.com/andismith/grunt-responsive-images
  40. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 124 grunt.initConfig({ responsive_images: {

    myTask: { options: { sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 60 }] }, files: [{ expand: true, src: ['assets/**.{jpg,gif,png}'], cwd: 'test/', dest: 'resize/{%= width %}/' }] } }, }); Sample grunt-responsive-images configuration
  41. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-grunticon --save-dev

    125 SVG with PNG fallbacks https://github.com/filamentgroup/grunticon
  42. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Him: “Hey, I have

    two megs of webfonts…” Me: “…” Him: “Is this okay?” 128
  43. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-ziti —save-dev

    https://github.com/caiguanhao/grunt-ziti 130 Reduce font file sizes
  44. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 131 grunt.initConfig({ ziti: {

    subset_only: { options: { font: { chars: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', }, convert: false }, files: { ‘assets/fonts/my.ttf': [ ‘src/fonts/original.ttf' ] } } } }); grunt.loadNpmTasks('grunt-ziti'); grunt.registerTask('fontsubset', ['ziti']); Sample grunt-ziti configuration
  45. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 140 http://www.webpagetest.org/getkey.php Limits of

    public use The API key is provisioned for up to 200 page loads per day … sufficient for most low-volume use cases and for building a proof-of- concept for larger testing
  46. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 144 perfbudget: { default:

    { options: { url: ‘http://example.io/', key: 'PUT_YOUR_API_KEY_HERE' } } } … grunt.registerTask('budg', ['perfbudget']);
  47. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 145 perfbudget: { default:

    { options: { url: 'http://fromthemiddle.io/', key: 'thisismykey', wptInstance: 'ec2.us-west-2.amazonaws.com', location: 'us-west-2_wptdriver', pollResults: 10, connectivity: '3G', runs: 1, timeout: 240 } } }
  48. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 146 perfbudget: { default:

    { options: { url: 'http://fromthemiddle.io/', key: 'thisismykey', wptInstance: 'ec2.us-west-2.amazonaws.com', location: 'us-west-2_wptdriver', pollResults: 10, connectivity: '3G', runs: 1, timeout: 240 } } }
  49. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 147 perfbudget: { default:

    { options: { url: 'http://fromthemiddle.io/', key: 'thisismykey', wptInstance: 'ec2.us-west-2.amazonaws.com', location: 'us-west-2_wptdriver', pollResults: 10, connectivity: '3G', runs: 1, timeout: 240 } } }
  50. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 149 perfbudget: { default:

    { options: { url: 'http://fromthemiddle.io/', … connectivity: '3G', timeout: 240, budget: { render: '3000', SpeedIndex: '7500', visualComplete: '6000' } } } }
  51. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-wpt --save-dev

    157 https://github.com/sideroad/grunt-wpt https://github.com/sideroad/grunt-wpt-page
  52. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 158 wpt: { options:

    { url: 'http://fromthemiddle.io/', server: 'ec2.us-west-2.amazonaws.com', dest: 'wpt/' }, ftm: { options: { server: 'http://ec2.us-west-2.amazonaws.com', url: ['http://fromthemiddle.io/'] }, dest: 'wpt/', } } … grunt.registerTask('wptrun', ['wpt']);
  53. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 npm install grunt-shell --save-dev

    161 Installing the grunt shell package to get to everything else
  54. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 162 function log(err, stdout,

    stderr, cb) { console.log(stdout); cb(); } grunt.initConfig({ shell: { dirListing: { command: 'ls', options: { callback: log } } } });
  55. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 167 $ cat tests.json

    [ { "name": "From the Middle", "url": "http://fromthemiddle.io/", "type": "home" }, { "name": "Kitt Hodsden", "url": "https://kitt.hodsden.org/", "type": "away" } ]
  56. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 171 Determine key metrics

    Establish a baseline Make a change Measure effects
  57. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 172 Determine key metrics

    Establish a baseline Make a change Measure effects
  58. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 173 Determine key metrics

    Establish a baseline Make a change Measure effects Announce effects
  59. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 188 https://www.sitespeed.io/documentation/performance-dashboard/ docker pull

    sitespeedio/graphite docker pull grafana/grafana docker pull sitespeedio/sitespeed.io
  60. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 190 https://www.sitespeed.io/documentation/performance-dashboard/ $ sudo

    mkdir -p /data/graphite/storage/whisper $ sudo htpasswd -c /path/to/.htpasswd YOUR_USERNAME $ sudo docker run -d \ --name graphite \ -p 8080:80 \ -p 2003:2003 \ --restart="always" \ -v /data/graphite/storage/whisper:/opt/graphite/storage/whisper \ -v /path/to/.htpasswd:/etc/nginx/.htpasswd \ sitespeedio/graphite
  61. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 192 $ sudo mkdir

    -p /data/grafana $ sudo docker run -d -p 3000:3000 \ -v /data/grafana:/var/lib/grafana \ -e "GF_SECURITY_ADMIN_USER=myuser" \ -e "GF_SECURITY_ADMIN_PASSWORD=MY_SUPER_STRONG_PASSWORD" \ --name grafana \ --restart="always" \ grafana/grafana
  62. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 194 $ sudo mkdir

    -p /data/grafana $ sudo docker run -d -p 3000:3000 \ -v /data/grafana:/var/lib/grafana \ -e "GF_SECURITY_ADMIN_USER=myuser" \ -e "GF_SECURITY_ADMIN_PASSWORD=MY_SUPER_STRONG_PASSWORD" \ --name grafana \ --restart="always" \ grafana/grafana
  63. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 196 # ifconfig docker0

    Link encap:Ethernet HWaddr 02:42:62:d5:83:18 inet addr:172.17.42.1 Bcast:0.0.0.0 Mask:255.255.0.0 inet6 addr: fe80::42:62ff:fed5:8318/64 Scope:Link UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 RX packets:419578 errors:0 dropped:0 overruns:0 frame:0 TX packets:399294 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 txqueuelen:0 RX bytes:66734551 (66.7 MB) TX bytes:834474594 (834.4 MB)
  64. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 197 $ docker run

    --privileged --rm -v /sitespeed.io:/sitespeed.io sitespeedio/sitespeed.io sitespeed.io -u http://fromthemiddle.io -b firefox -n 1 --graphiteHost 172.17.42.1 --graphiteNamespace sitespeed.io
  65. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 198 $ docker run

    --privileged --rm -v /sitespeed.io:/sitespeed.io sitespeedio/sitespeed.io sitespeed.io -u http://fromthemiddle.io -b firefox -n 1 --graphiteHost 172.17.42.1 --graphiteNamespace sitespeed.io
  66. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 199 $ docker run

    --privileged --rm -v /sitespeed.io:/sitespeed.io sitespeedio/sitespeed.io sitespeed.io -u http://fromthemiddle.io -b firefox -n 1 --graphiteHost 172.17.42.1 --graphiteNamespace sitespeed.io
  67. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 213 SHELL=/bin/bash PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin 0,15,30,45

    * * * * docker run --privileged --rm -v /sitespeed.io:/ sitespeed.io sitespeedio/sitespeed.io sitespeed.io -f urls.txt -b firefox -n 11 --connection cable -r /tmp/ --graphiteHost YOUR_GRAPHITE_HOST --seleniumServer http://127.0.0.1:4444/wd/hub >> /tmp/sitespeed-run.txt 2>&1 # YOUR_GRAPHITE_HOST = likely your IP address if you docker’d # -f urls.txt = list of URLs to analyze # -n 11 = depth to go, use -n for single page
  68. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 Worth looking at: https://github.com/andyshora/grunt-yslow

    https://github.com/jrcryer/grunt-pagespeed https://github.com/addyosmani/psi/ http://perf-tooling.today/tools 216
  69. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 251 $ vi ~/.ssh/authorized_keys

    dd # delete the first line [esc] # trigger the vi command sequence :wq # save the file and quit
  70. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 252 sudo vi /var/www/webpagetest/www/settings/settings.ini

    # update publishTo with ec2 hostname # update ec2 = 0 # update ec2_locations = 0 # add EC2.us-west-2.securityGroup line from sample # add EC2.us-west-2.subnetId line from sample #
  71. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 253 sudo vi /var/www/webpage/test/www/settings/keys.ini

    [server] secret=addarandomstringhere key=addakeyhere [addakeyhere] description=Web UI ;[email protected] limit=0 [thisisyourapikey] description=API Key ;[email protected] limit=0
  72. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 254 $ cd /var/www/webpage/test/www/settings/

    $ sudo cp locations.ini.EC2-sample locations.ini # delete extra locations # update key values to your thisisyourkey value
  73. Kitt Hodsden • @kitt • http://ki.tt/e4e2015 257 EC2 server key

    in settings.ini (more complicated to set up, better automation management)