Thread: Day 20-25: a)Editing Lander Files

**************************************************

ACTION & EXPLANATION


Now that you have a place to host the lander files, next you'll need to set up a method to edit the lander files you upload to Amazon S3. Below is one method.



How to Edit Amazon S3 Files Using CrossFTP and Sublime Text

(The method I'm about to show you, works. But it's probably not be the best or the most efficient. Please feel free to check out some of the other methods in the "Optional Methods" section at the end of this post.)

-Download and install the CrossFTP software (making sure to install the correct version - they have different ones for Windows/Mac/etc.):

http://www.crossftp.com/download.htm


-Download and install the Sublime Text editor (again, choose the appropriate version to install depending on your machine's OS):

https://www.sublimetext.com


-Optional: Find and install a plugin for your internet browser that will allow you to clear browser cache with one click. This will be a massive time saver. If you're using google chrome as your main browser, this is the one I'm using:

https://chrome.google.com/webstore/d...er-info-dialog


-Log into Amazon Cloudfront. On the Cloudfront Distributions page, click on your distribution. Click on the "Behaviors" tab, checkmark the only item in the list, and click "Edit".




-Scroll down to "Cache and origin request settings" and select "Use legacy cache settings".
Go down to "Object Caching" and select on "Customize". You should see "Maximum TTL", "Minimum TTL", and "Default TTL", which are numbers of seconds each object cached by CloudFront must remain in cache. By default Minimum TTL = 0 / Maximum TTL = 31536000 (1 year) / Default TTL = 86400 (1 day).



(While you are fixing up / modifying your landing page in the S3 bucket, you should set "Maximum TTL", "Minimum TTL", and "Default TTL", all to "0". Modify the values and scroll to the bottom and click on "Yes, Edit". This will disable the cache and allow you to see your modifications reflected on the lander immediately when you refresh the lander.

However, when you're ready to to run traffic, you should revert back to the default values. To do this, come back to your CloudFront distribution, select "Behaviors", click on the only line you should have in the list, which says "Default (*)", and click "Edit Behavior". Scroll down to "Object Caching" and put back the default values : Minimum TTL = 0 / Maximum TTL = 31536000 (1 year) / Default TTL = 86400 (1 day). Don't forget to click on "Yes, Edit". This step is super important. Not doing so will decrease the load speed and penalize your campaigns.)

(Mega thanks to @jeremie's correction of this step in this post.)


-Log into your Amazon S3 console. Click on your account name at the top > "My Security Credentials".




-Click "Continue to Security Credentials" if it appears in a popup. (Checkmark "Don't show me this message again" to get rid of it permanently.)




-Click to expand "Access keys (access key ID and secret access key)". Then click on "Create New Access Key". In the new window, click on "Download Key File".




-You should have downloaded a file named rootkey.csv to your computer. Open it to find your access keys, which should look similar to this:

AWSAccessKeyId=ABCDEFGHIJKLMNOP25AA
AWSSecretKey=ABcDefgHIJkmnOpQRsTUv1WXYzABC2c3e4fgh IJkl


-Start the CrossFTP software. Go to File > Connect. Then fill in all the information for your S3 account: For "Protocol" choose "S3"; for "Label" you can put anything you want - "AmazonS3" would do, or even your Amazon account username; copy and paste the "Access Key" and "Secret" access key password from the csv file downloaded before. Leave everything else at default.




-Click "Apply" to save, then click "Connect" to connect to your S3 account.


-On your local computer, set up a folder to put your landers in. For example, I created the folder "Landers" on my desktop. Then, in CrossFTP, in the left side of the window, browse to this folder. Then, on the right side of the window, find your S3 bucket - in my case it's "winbignow.xyz") - right-click on the bucket name and choose "Transfer/Copy". This will copy the contents of your S3 folder to the new folder on your local computer.




-So now, you have a folder on your local computer that has the same files as your Amazon S3 account. Now, let's proceed to edit the lander. I'm assuming we're still working with the sample lander I provided in the previous lesson;

https://www.dropbox.com/s/ej0yvur8zk...urvey1.7z?dl=0

https://www.dropbox.com/s/ifxtknmnll...rvey1.zip?dl=0

In CrossFTP, in both sides of the window, browse to the folder containing the sample lander:




-In the left side of the CrossFTP window, click to select the index.html file, then right-click > "Edit/Open with", and if at this point you see the entry "sublime_text.exe", just click to select that.



If you do NOT see the "sublime_text.exe" entry, here's what you do: From "Edit/Open with" click on "Choose program". In the popup window choose the "..." button after the "Path" field. Browse to the Sublime Text directory on your local computer (on mine it's C:/Program Files/Sublime Text 3) and choose the sublime_text.exe executable, and click "Open", then click "OK" in the "Choose Program: HTML" window. This will associate html files with Sublime Text so that each time you open an html file hereafter, it will automatically use Sublime Text to open the file. You only need to do this once.




-In the left side of the CrossFTP window, double-click on the index.html file to open it in Sublime Text. Now I want you to make a change to the lander text - for example do a search for "We want to thank you", change it to "We would like to thank you" - and save it (File > Save in Sublime Text, or hit "Ctrl+S" if using windows).

Now that you've made a change to the lander file on your local computer, you need to upload it to your S3 account and overwrite the existing file. To do this, go to the left side of the CrossFTP window, right-click on the index.html file and click on "Transfer/Copy" (or hit the F5 shortcut key), and click "overwrite" in the popup.

IMPORTANT: When transferring files from local computer to S3 or vice versa, make sure both sides of the window are set to the same directory - CrossFTP would not know they are mirrors of each other. What you transfer from the left side will be copied to the right side, and what you transfer from the right side will be copied to the left side - whichever directories you set either/both to.

To verify that the change has been implemented, go to your browser, clear your browser cache (this is where having a plugin will save time - you'd just need to click that plugin icon to clear cache; tip: click on that a few times to make sure it registers), and browse to the lander. In my case I browse to http://www.winbignow.xyz/sweeps/ipho...ey1/index.html (both the "www" version and the one without, should work - both will lead to the CDN files, i.e. the "fast-loading" pages).

In my browser, I can see that the change I made has been successfully implemented:



Success!


So, from now on, every time you wish to edit a lander file, just repeat the procedure above. Every new lander you wish to add to S3, just add it to your local computer's folder, then in CrossFTP's left window browse to the lander folder, right-click on it and select "Transfer/Copy" to upload it to your S3 account (again, make sure the right side of the CrossFTP window is set to the correct folder you want the lander to be uploaded to).



**************************************************

Optional Methods/Resources That May Help


1)Member @diplomat has reported that Filezilla Pro can be used to access S3 buckets (it's not free however):

https://stmforum.com/forum/showthrea...l=1#post385796


2)Member @robertson has provided a way to automate this process for Mac OS X + Amazon S3 + Sublime:

https://stmforum.com/forum/showthrea...l=1#post358956


3)Member @0192837465 later came out with an even quicker solution:

https://stmforum.com/forum/showthrea...ime-Text-to-S3


4)Another method: Use Sublime System Build to automatic the file upload process - member @robertson has posted the method here:

https://stmforum.com/forum/showthrea...l=1#post358956

(Disclaimer: I wasn't able to get this to work myself - you may have better luck.)


5)Member @Jafar has written a post on "How To Edit Amazon S3 Files/Folders Using AWS CLI (Command Line Interface)" here:

https://stmforum.com/forum/showthrea...l=1#post377747

Jafar: "I went a different route for uploading edits to Amazon S3. This seemed a lot quicker but does require you know a little about command line commands in terminal."



6)Member @amomaxia has written a post on "Setup version control and continuous deployment for LPs using AWS" here:

https://stmforum.com/forum/showthrea...-LPs-using-AWS

amomaxia: 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.


7)Member @jjlundy has written a post on how to use the 'VSCode' text editor and the 'AWS Toolkit' extension, instead of using CrossFTP:

https://stmforum.com/forum/showthrea...l=1#post435051



**************************************************

Now that we know HOW to edit lander files, the next lesson will go into the nitty-gritty of some of the most common code snippets to look for and fix.




Amy

Want to post a quick update for others going through this guide --

If you're coding yourself, using the 'VSCode' text editor (free) and downloading the 'AWS Toolkit' extension might save you some time instead of taking the CrossFTP route.

As simple as:
1. Download VSCode
2. Download 'AWS Toolkit' Extension
3. Plugin your AWS Access keys into the extension you installed in step 2
4. Once connected, you should see an 'AWS' icon on the left hand side of your editor. Here you can select the service you want to work on (S3) and directly edit/save your static html files, and your changes will be immediately uploaded to AWS where you can then view your changes on your public site

Originally Posted by jjlundy

Want to post a quick update for others going through this guide --

If you're coding yourself, using the 'VSCode' text editor (free) and downloading the 'AWS Toolkit' extension might save you some time instead of taking the CrossFTP route.

As simple as:
1. Download VSCode
2. Download 'AWS Toolkit' Extension
3. Plugin your AWS Access keys into the extension you installed in step 2
4. Once connected, you should see an 'AWS' icon on the left hand side of your editor. Here you can select the service you want to work on (S3) and directly edit/save your static html files, and your changes will be immediately uploaded to AWS where you can then view your changes on your public site

Thanks so much for this! I'll added a blurb and a link to your post, from the lesson above.


Amy