Setup version control and continuous deployment for LPs using AWS (12)
Setup version control and continuous deployment for LPs using AWS
Decided to post this on request from @micoangelo
Hey guys so we've been following along Vortex's 40 day tutorial and as developers we wanted to use AWS S3 to host our LPs.
We also wanted to be able to edit our LPs at the same time, push up code via terminal, use version control w/ git etc.
The benefits of using Version Control are massive (lets you maintain versioning of your landing pages, multiple ppl can work on LPs at the same time, can revert back and keep track of changes, quick and easy deployments to S3).
This might be a little overkill for most people but if you have a development background or just want to learn how to do some basic version control this is really dope.
- It's pretty simple to set it up also but you need to make sure you have a decent understanding of
- git (https://guides.github.com/activities/hello-world/)
- terminal/unix (http://www.livefirelabs.com/unix_com...-beginners.htm)
- have a terminal/unix shell on your computer (automatically on macs/linux, some configuration needed on windows (https://www.thewindowsclub.com/insta...-on-windows-10)
- i don't like the default shell so i'd suggest to use iTerm(https://www.iterm2.com/) or Hyper (https://hyper.is/)
- ohmyzsh (https://github.com/robbyrussell/oh-my-zsh) is also an amazing library to install has great modification to terminal and amazing plugins (ie launching and playing songs from spotify on terminal all the way to opening current dir in visual studio or sublime to compilers)
- Quick instructions:
- Get an S3 bucket setup for your landing pages (Follow along on Vortex' tutorial for that, pretty straightforward)
- Go over to github.com
- Create an account if you don't have one
- Create a new repository (private should be free)
- Name it whatever you want and check "private"
- Check "Initialize this repository with a README"
- Should look like this:
- Hit "Create repository"
- Copy the clone link (under "Clone or download")
- Hop over to your desktop and startup your terminal
- cd into a directory you want to have your LPs in
- clone your github repo "git clone PASTE_CLONE_LINK_HERE"
- cd into that repository now locally
- test to see if you can push changes (following tutorial above for git should explain)
- Go back to AWS and open up CodePipeline in the same region as your S3 bucket
- Hit "Create Pipeline"
- Name the pipeline whatever you want (something related to the S3 bucket)
- Check "New service role"
- Name it whatever you want
- Check "Default location"
- Hit next
- For source provider select "GitHub"
- Hit "Connect to Github"
- Select your repository
- Pick "master" as the branch
- Keep GitHub webhooks selected
Hit next- Skip build stage
- Under deploy select S3
- Choose your region, your bucket
- Select the S3 bucket that has your website that you are using for your LPs
- Check "Extract file before deploy"
- Specify a Deployment path if you want
- Hit next and hit "Create Pipeline"
- Boom your pipeline is now created
- Go back to terminal and create a new folder inside your repository called "test" (mkdir test)
- cd into that folder (cd test)
- lets create an index.html file
- you can either open this up in your favorite code editor (I use vscode) or just use vim/emacs
- However you want to create an index.html file in this folder you are in with the contents "HELLO WORLD"
- back on terminal lets push up your changes
- Type "git add ."
- "git commit -m "Test commit""
- "git push -u origin master"
- Finally lets go back to CodePipeline on AWS
- On CodePipeline it should show you that something was just deployed w/ your commit message to S3
- In your browser navigate to your website (your s3 bucket probably) so that the url looks like mytestwebsite.com/test/index.html
- You should see the "HELLO WORLD" message
- Now anytime you want to make updates to your website/LPs you can just use a text editor, push up some code and see it deployed (CloudFront does cache on a 24 hr basis however so you might need to clear your CloudFront cache if you are using it as a CDN (https://aws.amazon.com/premiumsuppor...ed-content-s3/)
- Just learn some more about git, terminal, unix, aws and you should find plenty of ways to optimize all of this for your own use cases
Another note:
We keep two repos. One that we hold all of our LPs on (basically the templates). One that we have linked up to S3 like above.
This lets us edit LPs, toss cleaned up versions w/converting scripts into our LP repo. Then just edit them per offer/campaign and toss them into the S3 repo.
Kinda just our own strategy but up to you guys how you want to set yours up.
This is huge guys! Thank you!
Non-developers may not understand why go through the hassle...
But there's a reason the software industry does this as industry standard practice! (https://www.atlassian.com/git/tutori...ersion-control)
If you make constant split tests and tweaks to your LP's (which you should be doing) this will make it all a lot easier to keep track of.
Wow - this IS huge! Thanks a ton @amomaxia for taking the time to type out all the steps, and thanks to @micoangelo for asking for details in the first place!
Will link to this from the tutorial.
Amy
This is awesome. I hope to be at this stage someday 
For now, edit in Sublime. Save. Drag and drop into s3 bucket in browser (TTL set to 0).
Iterations just get a new folder + new lander in tracker.
I know. I'm lazy. Git is better. Especially when doing huge A/B testing.
I'd argue that my way is still better than CVS/SVN tho :P
Great post!
For those of you scared off by messing with the terminal, there’s a git GUI. Although I recommend learning the command line too.
https://desktop.github.com/
Option two would be to use vscode which also has git integrated.
https://code.visualstudio.com/
We use deploybot.com, intergrates with pretty much everything (even
There is a little bit of a learning curve with github, but it’s super worth it
Sent from my iPhone using STM Forums mobile app
Smart moves. I got frustrated by the slow process of launching campaigns as a solo affiliate so nowadays I use:
Netlify + Hugo framework + vscode and love it. To make an edit or new LP, it's just two git commands to push it to live within vscode. Still use a terminal to preview pages locally with Hugo.
This is just so awesome.
Literally manage to have higher quality, higher reliability AND save time.
Truly the trifecta.
Anyone found a way to automatically invalidate the CloudFront distribution for the modified files?
I am thinking to code a lambda function, but if there is a better / easier way, I will be glad to know before spending several hours to create this.
Originally Posted by jeremie
Originally Posted by platinum
So far the closest solution I found is this, ie binding a lambda to a S3 event notification:
https://kupczynski.info/2019/01/09/i...lambda-s3.html
I will probably build something on top of that.
Originally Posted by jeremie
It took me way too long and I don't recommend bothering with that, unless you want to learn AWS queues :-)
Home > > Newbie Follow-Alongs