Static site generation

(W/ Frozen-Flask and AWS S3)

Alex Niderberg | @AlexNiderbergTechnical Product Owner / Master Software Engineer @ Capital One Labs

Overview

Word together through modifying and deploying a frozen-flask example
Learn a bit about Amazon Web Services (AWS) in the process

Capital One

Capital One Labs

Frozen Flask

Official Site
Tutorial I followed
- **I need to submit a PR with a few fixes

How I got started

mkdir sample_project && cd $_
virtualenv venv
source venv/bin/activate
pip install Flask Frozen-Flask Flask-FlatPages
touch sitebuilder.py
# add content
python sitebuilder.py
# visit localhost:8000
mkdir pages
touch pages/hello-world.md
# add page content
mkdir templates
touch templates/base.html
# add content
touch templates/page.html
# add content
touch templates/index.html
# add content

Additional Details
- **I need to submit a PR with a few fixes

This feels a little overwhelming

Hands-on

*These steps will prepare you for the AWS S3 deployment steps in the upcoming sections.
- Follow along: http://aln787.github.io/staticSites/#/1/5

git clone https://github.com/aln787/frozenFlask.git
cd frozenFlask
virtualenv venv 
source venv/bin/activate
pip install -r requirements.txt
subl .

Let's take a quick look at whole the project.

The brains of this operation

subl sitebuilder.py
#or more sitebuilder.py

import sys

from flask import Flask, render_template
from flask_flatpages import FlatPages
from flask_frozen import Freezer

DEBUG = True
FLATPAGES_AUTO_RELOAD = DEBUG
FLATPAGES_EXTENSION = '.md'

app = Flask(__name__)
app.config.from_object(__name__)
pages = FlatPages(app)
freezer = Freezer(app)

@app.route("/")
def index():
    return render_template('index.html', pages=pages)

@app.route('/<path:path>/')
def page(path):
    page = pages.get_or_404(path)
    return render_template('page.html', page=page)

if __name__ == "__main__":
    if len(sys.argv) > 1 and sys.argv[1] == "build":
        freezer.freeze()
    else:
        app.run(port=8002)

View the basic starter versions of the site:

Dynamic

python sitebuilder.py
#(todo) determine why this is not locating flask on the plane
# visit http://127.0.0.1:8002/

Static

open build/index.html
#if you have http-server installed
cd build && http-server -p 8083 && cd ..
# visit http://0.0.0.0:8083

Simple changes to personalize the site base page

vi templates/base.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title><!-- **Add your html site title here --></title>
</head>
<body>
    <h1><a href="{{ url_for("index") }}"><!-- **Add your html site title here --></a></h1>
{% block content %}
    <p>Default content to be displayed</p>
{% endblock content %}
</body>
</html>

Also view review the other templates

View the post

subl pages/frozen-flask.md
subl pages/hello-world.md

title: Frozen Flask
date: 2016-01-27
tags: [programming, static-sites]

# Experimentation Using Frozen Flask
Site creation following the [this blog post](https://nicolas.perriault.net/code/2012/dead-easy-yet-powerful-static-website-generator-with-flask/).

Update a post

subl pages/frozen-flask.md

title: Frozen Flask
date: 2016-01-27
tags: [programming, static-sites]

# <replace with your content>
- <and your content details>

View the updates version of the site:

Dynamic

python sitebuilder.py
#(todo) determine why this is not locating flask on the plane
# visit localhost:8002

Static

python sitebuilder.py build
open build/index.html
#if you have http-server installed
cd build && http-server -p 8083 && cd ..

Let's get out of here!!

- Time time to put your static site up on S3.

Why AWS / Register

Suprising how far ahead Amazon is!

Gartner's Magic Quadrant - IaaS Providers

Time to get on board!

AWS S3 Deploy using the AWS console

AWS Console - S3

Create folders and add files

Files and Folders to add to S3

pwd
# <your path>/frozenFlask
cd build/
ls -lah
#drwxr-xr-x   3 <user>  <group>   102B Jan 27 01:23 frozen-flask
#drwxr-xr-x   3 <user>  <group>   102B Jan 27 01:23 hello-world
#-rw-r--r--   1 <user>  <group>   428B Jan 27 01:23 index.html

Enable Static Hosting

Not 403!!! Help!

Update permissions with a bucket policy

Bucket policy to add

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::frozen-flask-bucket2/*"
        }
    ]
}

View Site

This process feels like you are fighting Amazon

ASW CLI S3 Deploy

There has to be a faster way!!

AWS CLI Install

python --version
#Looking for above 2.6.5+ or 3.3+
curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip"
unzip awscli-bundle.zip
./awscli-bundle/install -b ~/bin/aws
echo $PATH | grep ~/bin #See if $PATH contains ~/bin (output will be empty if it doesn't)
export PATH=~/bin:$PATH #Add ~/bin to $PATH if necessary
#Confirm the install worked correctly
aws help

Additional details / official AWS CLI install instructions

Configure IAM and Access key / secret

Create a new user

Attach the S3 policy to that user

S3 Policy Details

More of that awesome AWS JSON config meta data

Kinda makes you want to try to fly away

Create Access Key and Secret

Configure the AWS CLI

aws configure
#AWS Access Key ID [None]: <Your Key>
#AWS Secret Access Key [None]: <Your Secret>
#Default region name [None]: us-east-1
#Default output format [None]: json

S3 bucket creation, content sync and configuration

#aws s3 rb s3://frozen-flask-cli --force  #Remove existing folder with this name
aws s3 mb s3://frozen-flask-cli
pwd
#<your path>/frozenFlask
aws s3 sync build/ s3://frozen-flask-cli --exclude '.DS_Store'
aws s3api put-bucket-policy --bucket frozen-flask-cli --policy file://bucketPolicy.json
aws s3api put-bucket-website --bucket frozen-flask-cli --website-configuration file://enableWebHosting.json
#aws s3api put-bucket-website help

View uploaded site: http://frozen-flask-cli.s3-website-us-east-1.amazonaws.com/
*Notes:
- S3 bucket names have to be globally unique.
- The AWS API requests for "put-bucket-website" fails with an unclear error messages, if your bucket name contains any capital letters.

Now we are getting some love! Much better!!

Additional Information

Alternative tools

Explored
- Pelican, Jekyll
Still to Explore
- Hugo, Lektor (Could also be a future talk if folks are interested), Hexo, Hyde, Brunch, Middleman, Harp, Expose, ...

AWS Automation

W/ Python Boto3

Future talk if folks are interested

Thank you!!!

Static site generation (W/ Frozen-Flask and AWS S3) Alex Niderberg | @AlexNiderberg Technical Product Owner / Master Software Engineer @ Capital One Labs

staticSites

aln787

staticSites

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

staticSites

Static site generation

(W/ Frozen-Flask and AWS S3)

Overview

Frozen Flask

How I got started

This feels a little overwhelming

Hands-on

The brains of this operation

View the basic starter versions of the site:

Dynamic

Static

Simple changes to personalize the site base page

View the post

Update a post

View the updates version of the site:

Dynamic

Static

Let's get out of here!!

Why AWS / Register

Suprising how far ahead Amazon is!

Gartner's Magic Quadrant - IaaS Providers

Time to get on board!

AWS S3 Deploy using the AWS console

AWS Console - S3

Create folders and add files

Files and Folders to add to S3

Enable Static Hosting

Not 403!!! Help!

Update permissions with a bucket policy

Bucket policy to add

View Site

This process feels like you are fighting Amazon

ASW CLI S3 Deploy

There has to be a faster way!!

AWS CLI Install

Configure IAM and Access key / secret

Create a new user

Attach the S3 policy to that user

S3 Policy Details

More of that awesome AWS JSON config meta data

Create Access Key and Secret

Configure the AWS CLI

S3 bucket creation, content sync and configuration

Now we are getting some love! Much better!!

Additional Information

Alternative tools

Links

AWS Automation

W/ Python Boto3

Future talk if folks are interested

Thank you!!!

0 0