Automating Website Development with AWS Project
16 Sept 2017
So basically, I spent several days trying to figure out why my website would only show the front page – none of the links worked. It turned out that I had connected CloudFront to the s3 bucket link and not the s3 ‘website’ link. See the picture below. You will need to make sure you use this link:
17 Sept 2017
Well I finally finished getting my jekyll site converted to my content. I ran into several issues which took some time to figure out.
Issue Number 1
When I promoted the files to my s3 bucket – some of the links from the front page would not work (again!). To figure out the problem, I simply right clicked on the links and selected the ‘inspect element’ in chrome and found the link had the ‘localhost:4000’ embedded in the links from when I would run the jekyll serve command to view my website locally. The solution was to set the url paramater in the config.yml file to my site url - confessionsofadatascientist.com
Issue Number 2
The pictures for my categories section would not work. In fact, the whole section seemed to be jacked up. I figured out basically that there were three things I had to address each time I wanted a new category – 1) add a folder with the category name desired, 2) an index page in the folder that was templated out for a category page, and 3) identification of the category in the yml frontmatter of each blog. The picture issue was a simple url pathway issue.
Issue Number 3
So at this point I was feeling pretty good. The pages were there. They looked good, and everything worked as it should – except the links to the blogs themselves. A big problem for a blog website. So I went back to my nifty inspect element trick but the url looked good. Then I realized it was a pretty links issue. In jekyll, most web developers like to use the pretty url which means it won’t show the .html at the end of the link. I had two options to solve this – 1) I could establish another folder and index page as before. If you have an index page in a folder and map to the folder, the computer will automatically look for the index.html page and display it; or, 2) I could simply hard code the url to include the .html part of the url. I went with the latter so I could get on with the other parts of the project. I believe in iteration and I’ll come back to that in time. For now, I can live with the .html.
18 Sept 2017
The basis of the automation steps came from two main sources: 1) a course from acloud.guru titled serverless portfolio with react, and 2) this great blog by Alex Bilbie. Following the blog closely, I was able to accomplish the connection of CodeBuild to Github very easily. The one question I had that I had to figure out on my own was – where exactly do I put that buildspec.yml file? I ended up putting it in the root folder of the theme-files section of my website. This folder gets copied as is into the _site folder.
20 Sept 2017
I followed Alex Bilbie’s blog and was able to connect CodePipeline to CodeBuild without any real problems. Imagine that! The one thing I noticed is that when I made changes to my code – pushed it to github – the website did not change as I expected it to after CodePipeline recognized the change and kicked off the CodeBuild. Why? It comes back to that pesky ttl (‘time to live’) setting in CloudFront. I went back and changed it from 1 day (86,400 secs) to 60 seconds. That way, when I pushed a change, I would see it a minute after the CodeBuild completed. Eventually, I put the setting back to 86,400 seconds – so I can see changes once a day and get the best performance for my site (due to the caching of the sight by CloudFront).
21 Sept 2017
I’ve been testing my website all day, and I have noticed some photos load much slower on mobile than my laptop and slow overall no matter what device I use. So, I will need to think about a image minimizer/compression method to allow the photos to stay sharp but load much faster.
22 Sept 2017
Wow. I found this great analyzer of page speeds (google, of course!). It also gives you an opportunity to download optimized products – which in my case included 3 images and a js file. I went ahead and replaced my current files with the new optimized version. If this causes a problem – then I’ll roll back the changes by using my previous git versions.
24 Sept 2017
The changes seem to be working well. The performance is better for the desktop version of the website, but the mobile version still needs work. I will also need to work on some of the other items – including increasing the ttl to provide caching capability for the site.
25 Sept 2017
The optimization package for images that google provided – worked for two of them but for one of them it didn’t. I’m going to need to create a thumbnail version of the image and a feature version of the image using photoshop or some other program to get an optimized, yet sharp image.
27 Sept 2017
This optimization stuff is driving me batty! I actually wiped my website out completely using the invalidations feature in CloudFront. You have to delete all your files from your s3 bucket first and then run the invalidation.
I simply typed a ‘*’ in the box and it invalidated the whole site – which means it completely wiped it clean. Then, I deleted my js folder from my site – and let CodePipeline and CodeBuild do the rest. CodePipeline kicked in and rebuilt my site without the js. I then went over to the page speed analyzer and reran and my results improved by 1 point for both mobile and desktop.
Pathetic.
I will probably add javascript back and then work on the images, and codeblock CSS stuff. I really didn’t want to learn any of that but I’ll tinker around and see what I can get working.
29 Sept 2017
I have been experimenting with a way to do slides in a more rapid way, but one that is very professional looking. I like slides.com which uses reactive.js coding to create rather impressive html slides. I am working to export them and add them to my site but I need to figure out how to link them using the yml approach. The export is a fully rendered html file so I will not have a markdown document to add. I think there might be a way to link to the html file in show mode from slides.com. This is going to take some time to figure out.
30 Sept 2017
This project will be an ongoing tweakfest. I could almost split it between what I learn about Jekyll and what I learn about AWS – but I’ll keep them intertwined for now. I bought two Jekyll courses on udemy.com. The one I got something out of – and that I think worth recommending – would be the one taught by Jana Bergant [Jekyll: make fast, secure static sites and blogs with Jekyll]. She did a good job with it. She covered topics that I haven’t seen alot such as how to add comments using disqus, how to create a contact form that works, and how to set up json data files that can be used in a page. Very cool stuff and very practical. I plan to use the latter to set up my slides page. I was able to get the slides page working using a markdown document that has a title and link – but I want to make it sing so I have some more work to do. I also put together a todo list for me to knock out over time – and I’ll document it here as well.
Create comments capability
Create a default entry in config file
Refine projects page
Add social icons
Optimize site
I gotta admit – that although this has been a pain at times – I have really enjoyed myself now that I have things figured out a bit. There is a learning curve, but the ability to maintain and even create your own website is worth the effort.
3 Oct 2017
I was able to add another section which I called projects. I did this by utilizing a _data folder and then using the variables in the data folder as the input for the projects section. I am going to keep this log open but I pretty much have my website close to completion.
7 Oct 2017
What a pain in the butt this optimization piece is becoming. I sound some good sites that go through something called ‘gulp’ which is an add-on of node.js. A lot of people use it compress css, images, and javascript. I leaned today that before you start downloading the gulp extensions – you need to config a package.json file with basic information about your website and the dependencies you will have on gulp. Don’t worry about the numbers – just put “latest” and when you download the gulp extensions – it will update the json file with the version numbers. Here is what my package.json file looks like:
I then followed the steps from this blog. I did have to change the paths to match my website structure. Wire up the images to your image folder, and the js to your js folder, etc.
Another pretty good blog – but one that tells you to do a few different things is here. I will let you know how this turns out when I figure it out myself. I’m guessing it will be hybrid of the two. In the end, I’m going to need to do a blog on the optimization process so I don’t ever have to relearn this again.
