So it has been a long time coming, but I have finally built myself a website. So please wander around, give feedback, and enjoy. I will note that it is still a work in progress, so any problems you find and point out will help me progress faster :).

Making a personal website is something that I have been wanting to do for a very long time, but I have never had the time. Well, this summer I am working for Eli Lilly, a company that values work life balance, so I have the time. A long time ago, I had started working on a site that was going to be ASP.net MVC based. The idea was to build my own CMS that would do exactly what I wanted. Of course, I never could get anywhere with that, it was just far to audacious. When I started back working on the site a couple of weekends ago, I decided that I should just make a static website. This was something that I had considered originally, when I went the ASP.net route, but I had thought it would be more trouble than it was worth.

When I finally decided on doing a static site I felt that making my own generator would be best (I figured I would write it in Python), but I decided to look for some tools first. I found Jekyll and gave it a try. Initially, I expected that I would end up learning some things from Jekyll, get frustrated, and transfer some of what I had learned into my own static site generator. In the end, I found a number of things in Jekyll to be pretty nice and as I have gotten more comfortable with the plugin system I have been able to expand the capabilities of Jekyll to suit my needs.

How I Use Jekyll

For those who are interested here is how I have my site setup. For those really interested, check out my GitHub and you can see it.

GIT

The first thing to cover is how I use GIT and GitHub. The site is hosted on GitHub pages, which are pretty quick and FREE. However, I use some custom plugins, so I cannot use the GitHub pages builder to build my site. I therefore build my site locally and push it up to GitHub. To do this, I have two branches, a working and master branch. The master branch is required by pages to hold the hosted site, and the working branch is where I do my work. In order to publish, I run a little PowerShell script I wrote.

Function publishmichaelsobrepera{
    cd /;
    cd C:\;
    cd C:\GIT\mjsStaticSite;
    git checkout master;
    git reset --hard working;
    jekyll build;
    Get-ChildItem C:\GIT\mjsStaticSite -Exclude _site -Recurse | Where {$_ -notlike 'C:\GIT\mjsStaticSite\_site\*'} | select -ExpandProperty FullName | sort Length -Descending | Remove-Item -force;
    xcopy C:\GIT\mjsStaticSite\_site C:\GIT\mjsStaticSite /v /s /e ;
    Get-ChildItem C:\GIT\mjsStaticSite\_site -Recurse | select -ExpandProperty FullName | sort Length -Descending | Remove-Item -Force;
    Remove-Item C:\GIT\mjsStaticSite\_site -Force;
    git add *;
    git commit -a -m 'automated commit to publish';
    git push gitHub master --force;
    git checkout working;
}

This allows me to just commit my work on the working branch, publish, and keep on going. Note, I do always push up my working branch just incase something goes wrong.

Editor

At first I was using sublime text, which has been my go to editor for a good three years. However, just today, I switched over to Atom. So far, it seems pretty slick. It has a nice built in markdown renderer that works well, lots of packages, really nice git support, and works with my touchscreen and touchpad (something which sublime did not do well). There are some things that need to be done to make Atom work well though.

  • The first thing is to change the Syntax Theme. The default is awful, I switched to monokai, which is way nicer.
  • Change some editor settings. Show the indent guide, show invisibles, use soft wrap, add a soft wrap hanging indent (I like 3), increase the tab length (I went to 4)
  • I added in the jekyll package. You could probably do without this, and I don’t like to use the built in server (preffering to just jekyll serve)
  • In the Packages list, go down to the Tabs package (which is built in), and check Use Preview Tabs. If you don’t do this you will quickly have way too many tabs open That’s about it, I am sure I will tweak and configure it over time, but those things have me going.

As a side note for Atom, you can make it the default editor for GIT using this:git config --global core.editor "atom --wait"

Folder Structure

So I don’t just want this site to be a blog. It has to also be a place for me to show off papers and projects which I have worked on. I also wanted somewhere I can post some guides that I have made, if for no reason than to have access anywhere I am. In order to accomplish this, I needed a way to sort my stuff. So I made a folder under _posts for: blog, guides, papers, and projects. I also have a different category for each. I also created unique layouts for guides and papers. I then put folders for images and other files under my root directory. One of my goals was to automate as much as I can, so if a post defines an imageDir in its YAML front matter, then any images which are in that imageDir inside of the images folder will be automatically displayed at the bottom of the post. This is done by one of the plugins I made. Similarly, all papers define a PDF which is automatically displayed. Finally, I put a primaryPages folder under the root to hold the html landing pages that show up as / only page (ex. michaelsobrepera.com/about). To make this landing pages work, you just need to specify what the permalink should be.

Videos and PowerPoints

There are a few places where I have wanted a video or a PowerPoint. This is not possible using GitHub pages, as GitHub limits you to 100mb. So the solution is to put all of your videos on YouTube and all of your PowerPoints on OneDrive. Both services allow you to embed files from their services right in your html.

Hosting and DNS

I used CNAME redirects to get from my URL to gitHub, this loads pretty well. I profiled the site and found that the only slowdown in loading was that I did not have a favicon. So I added that. I will note that there are some guides for setting up with NameCheap (my registrar) which show you needing to use Apex records. I could not figure out why I wouldn’t just use CNAMEs and found the CNAMEs load way faster. But who knows, maybe I am breaking something.

Styling

Yeah, I am not good at CSS and SASS, and really they just don’t interest me very much. So for now my site is just using the stock styling. It seems ok, relatively mobile friendly. One day maybe I will make something unique.

Comments

I wanted to make sure from the start to have comments wherever appropriate. I looked at a lot of different systems, tried a few out and I narrowed it down to two, livefyre and disqus. They both are pretty mature, remotely hosted (I did not want to have to build my own server), allow guest posting, and are easy to use. I ended up going with livefyre (as you can see below). The reason is that it seems to offer much tighter social media integration. It also seems to be a tad quicker to load. The only complaint I could find anywhere about livefyre was that it does not allow guest posts, but that feature has now been added, so it is no longer a factor. I really think both systems would work well, but it seemed like livefyre was just a little better.

Thanks

Hopefully I will be posting more, and I hope you enjoy some of what you find. This will be an ongoing effort, so check back.

Thanks for reading.

-Michael