Every year, I make the habit of going back to my personal portfolio and updating the theme and content. Last year, I’ve made a static site with Bootstrap and hosted it on Amazon Web Service over an S3 bucket with CloudFlare as a CDN. I thought serving my static HTML on AWS with S3 bucket at above $1 a month was a pretty decent setup. I realized I didn’t go and update it as often as I wish. Occasionally, I still put stuff on Medium and/or some WordPress site.
This year, I decided to aggregate all my content to Jekyll. Jekyll is Ruby’s answer to a CMS, akin to WordPress or Medium. It is a static site generator and framework. Because I am always working in the command line and push my code on Github, Jekyll is a great solution. With tools such as Node to manage package, Ruby Gems to install plugins (such as photogallery, rss feed aggregator, or xml site mapper), Grunt taskrunner to compile assets, and AWS CloudFormation to automate continuous integration from Github commits to live server at my S3 bucket, I can focus my energy on creating content, not manually updating content to servers.
The Process
The first step is to outline my goals for this project.
Goals :
- I want a platform to allow me to update my content more frequently.
- I want to take minimal steps from writing posts --> presenting it on a live server. Ideally, I just want to write the post, update it on github, and with the right configuration, task managers and continous integration scripts will automate the content --> server process.
- I want to learn something new, besides using WordPress or Medium.
- I want more customization, down to the scripting level.
- I realllllly don't want to code in PHP.
- I want a visual identity to look unique and not cookie-cutter like a million of Bootstrap-generated sites out there. I want it to be clean and content-focused.
- I want my css file to be less than 12K if possible, and frameworks like Bootstrap really is just bloat. Let's think about it this way: I do not need a size 6 dress for a size 2 dress problem.
- I want the process to be organic. This is true as I continue working on this project. My feature list just keep getting longer and longer :).
Background Research:
I was still skeptical until I started to look at example sites that are built with Jekyll. Helen Tran’s portfolio](http://helentran.com/) and Liu’s minimalist site convinced me to start hacking away with Jekyll.
Creating a new site is also creating a new identity. I want the look and feel of my new site to be sparse, minimal, white lots of white space, so the reader can focus more on the content.
Tasks
4/19
- My Moodboard
- host on aws with cdn cloudflare with helloanh.io address
-
- Import all medium and WordPress blog posts~~
- preserve old site
- more content: add april poems for #30dayspoetrychallenge
- update projects
Features
- aframe vr page for 360 videos and images
- photogallery for photography projects
- search bar to search categories and tags
- optimize assets top increase google page speed
- automate image pixel sizes with grunt
- set up disqus comment
- use chart.js library to to display my skills breakdown as a radar graph
- enable disqus comments on selected pages
- google page speed optimization
Resources I Used
- Jekyll Offical Doc
- Ben Balter’s Wordpress to Jekyll Exporter
- James Hamann’s guide to exporting Medium posts to Jekyll
- Liu’s minimalism Jekyll framework
- https://mademistakes.com/articles/using-jekyll-2016/
- http://benwilhelm.com/the-website/nerd-stuff/2014/12/21/building-an-image-heavy-jekyll-site/