Skip to main content

Hosting portfolio site on GitHub Pages.


    Most software developers have a portfolio site where they can show off their projects, knowledge, code, and experiences. It's great to have when searching for a job because it's a chance to woo potential employers with your technical abilities. And it's a great little project that you can always update and experiment with. When I first created my portfolio site, I hosted it on AWS (Amazon Web Services) Elastic Beanstalk. Obviously, Elastic Beanstalk is overkill for a portfolio site since you shouldn't expect that much traffic where you would need a Load Balancer, but I chose to use it for the following reasons:

  • To become more familiar with Elastic Beanstalk (At the time I was preparing to launch an application to Elastic Beanstalk and this was a great starting point).

  • They offered a free tier for a year (Nowadays there is no need to pay for having a blog and I believe the same should be true for a portfolio site).

  • I had a contact form which was sent to the server where I used the Apache Commons Email API to send me an Email with the form information.

     Well, my free tier is up and I made the decision to migrate my website to a free host. The website is mostly static pages except for the contact form server side code. You would be surprised how hard it is to find a free host that allows custom domains and has some sort of transactional Email API. So, I finally decided on GitHub because they allow you to host a user website for free (they call them GitHub Pages) and you can even attach a custom domain. Since the code is just static pages (CSS, JS, HTML, and files) and there is no security issues (any website viewed can be deobfuscated if needed, so, hosting a website on a public repository is no different), this is a perfect service. To solve my Email problem I went with FormSpree. They provide a simple POST URL that you can submit your forms to and they will forward you the provided information to your email. You can even send it via JavaScript through an AJAX request (using JQuery):


    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;
    var obj = {"name": name, "_replyto": email, "message": message};
    $.ajax({
        url: "//formspree.io/youremail@email.com",
        type: "POST",
        data: obj,
        dataType: "json",
        success: function(){
            console.log("sent email");
            notify("Email", "Successfully Sent Message");
            clearForm();
        },
        error: function(jqXHR, textStatus, errorThrown){
            console.error("Error sending email: " + textStatus + " " + errorThrown);
            notify("Email", "Error Send Message");
            clearForm();
        }
    });

    To setup your website on GitHub, follow their simple tutorial. Just note that changes you make aren't instantly reflected and may take up to 30 minutes. And this is a good tutorial on how to get your domain name to link to your GitHub Pages website using the GoDaddy service. Just note that you will need to create an A record for both the IP's 192.30.252.153 and 192.30.252.154.

    Finally, I created a custom 404 page for my portfolio site that matched my site's theme and wasn't a generic one provided by GitHub. The code is pretty straightforward and can be found here. Here's what the page looks like:


It's meant to mimic an error dialog that you might see on a computer. Now my portfolio site is freely hosted by GitHub and I can make changes simply by making commits to my repository.

Comments

Popular posts from this blog

Face detection and live filters

Live video filters are becoming a popular trend fueled by Facebook (through their purchase of Msqrd) and Snapchat incorporating the features into their apps. These filters apply images or animations to your face using face tracking software. This technology has been around for awhile but is becoming increasingly more common due to the powerful CPU's that our mobile phones now have. Google provides an API that provides face tracking abilities through the Google Play Services library called Mobile Vision. I'm going to use their API to build a basic live filter app. The end result will look something like this:


    The bounding box wraps around the detected face and the sunglasses are the filter I chose (which is just a PNG image) which are drawn over the eyes. You could use any PNG image (with alpha for the background) you want, you will just have to adjust the layout according to where the image should be displayed. As you move your head, the box and sunglasses are redrawn…

Setting Up Connection Pooling With Elastic Beanstalk

Amazon's Elastic Beanstalk is a service which automatically scales your application when needed. It uses Amazon's Elastic Compute Cloud (EC2) instances as deployable containers which when your app requires more resources more containers will be deployed. This removes the need to manually configure your EC2 instance whenever you need more connections or resources and attempts to add simplicity to the maintenance aspect of your application. So, when you get more users of your app, your app will scale accordingly.

    Unfortunately, along with the ability to scale automatically, comes less control and configuration. Things you would normally have the ability to configure to your liking, such as your server, you no longer can. Amazon attempts to address this issue with configuration files. You can provide configuration files which can set up your server. These files are either written in JSON or the horrible format YAML. Though these files provide some level of control, you ca…

Android Guitar Tuner

Recently I created a guitar tuner application for Android that is written with pure Java (no C++ or NDK usage). The design was inspired by the Google Chrome team's guitar tuner web app using the WebAudio API. I wanted to code a version written natively for Android that didn't have to rely on a WebView, the WebAudio APIs, or server-side logic. Also, I wanted this application to be available to as many versions of Android as possible (whereas the WebAudio API may only be supported in more recent versions of WebView available only on newer flavors of Android). So, I coded it from scratch. I used a portion of the open source TarsosDSP project (their YIN algorithm) to help with the pitch detection.

    The application is available in the Google Play Store for Android: https://play.google.com/store/apps/details?id=com.chrynan.guitartuner. The project is completely open source and the code can be found on the GitHub repository: https://github.com/chRyNaN/Android-Guitar-Tuner. Fi…