Skip to content

Commit

Permalink
final clean up before blog post goes out
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikeRogers0
MikeRogers0 committed Jan 9, 2015
1 parent 242092a commit b6e0c70
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 82 deletions.
23 changes: 0 additions & 23 deletions Gemfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,12 @@ GEM
colored (1.2)
configure-s3-website (1.6.0)
deep_merge (= 1.0.0)
css_press (0.3.2)
csspool-st (= 3.1.2)
json
csspool-st (3.1.2)
deep_merge (1.0.0)
dotenv (1.0.2)
execjs (2.2.2)
fast-stemmer (1.0.2)
ffi (1.9.6)
hitimes (1.2.2)
html_press (0.8.2)
htmlentities
multi_css (>= 0.1.0)
multi_js (>= 0.1.0)
htmlentities (4.3.3)
jekyll (2.5.3)
classifier-reborn (~> 2.0)
colorator (~> 0.1)
Expand All @@ -50,11 +41,6 @@ GEM
coffee-script (~> 2.2)
jekyll-gist (1.1.0)
jekyll-paginate (1.1.0)
jekyll-press (0.2.1)
html_press (>= 0.8.2)
jekyll
multi_css (>= 0.1.0)
multi_js (>= 0.1.0)
jekyll-sass (1.2.2)
colorator (~> 0.1)
jekyll (>= 0.10.0)
Expand All @@ -63,18 +49,13 @@ GEM
sass (~> 3.2)
jekyll-watch (1.2.0)
listen (~> 2.7)
json (1.8.1)
kramdown (1.5.0)
liquid (2.6.1)
listen (2.8.5)
celluloid (>= 0.15.2)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
mercenary (0.3.5)
multi_css (0.1.0)
css_press
multi_js (0.1.0)
uglifier (~> 2)
octopress-autoprefixer (1.0.0)
autoprefixer-rails (~> 2.2)
jekyll (~> 2.0)
Expand Down Expand Up @@ -108,17 +89,13 @@ GEM
hitimes
toml (0.1.2)
parslet (~> 1.5.0)
uglifier (2.6.1)
execjs (>= 0.3.0)
json (>= 1.8.0)
yajl-ruby (1.1.0)

PLATFORMS
ruby

DEPENDENCIES
jekyll
jekyll-press
jekyll-sass
octopress-autoprefixer
rack-jekyll
Expand Down
36 changes: 23 additions & 13 deletions _posts/Drafts/2015-01-08-my-site-looked-shitty-so-i-rebuilt-it.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,52 @@ meta:
index: false
---

I built the old design of my site with two goals in mind "Make it load fast" and "Make it 100% your work". I ended up nailing both goals by making a fairly plain and simple website, as a result it was dull as a white wall.
I built the old design of my site with two goals in mind, "Make it load fast" and "Make it 100% your work". I ended up nailing both goals by making a fairly plain and simple website, as a result it was dull as a white wall.

It started to look super naff recently, so while fueled by Wisky and Kanye West, I chucked out most of the old build and started again.
It has started to look super naff recently, so while fueled by Whisky and Kanye West, I chucked out most of the old build and started again.

## Finding inspiration

I had a few websites I really liked the look of that I used for inspiration, here they are with my notes:

* [Clara Labs](https://claralabs.com) - I really like the inital "Hi there! I'm Clara" then the fading in of the rest of the homepage copy.
* [No Divide](http://nodivide.us/) - If there is someone who knows how to design a site, it's Dan Edwards. I really like simple and clear the site is to use.
* [Edward Poole](http://edpoole.me/articles/pubhack2/) The way Ed has layed out his blog post is super content focused with little to distract the user.
* [Clara Labs](https://claralabs.com) - I really like the initial "Hi there! I'm Clara" then the fading in of the rest of the homepage copy.
* [No Divide](http://nodivide.us/) - If there is someone who knows how to design a site, it's Dan Edwards. I really like how simple and clear the site is to use.
* [Ed Poole](http://edpoole.me/articles/pubhack2/) - The way Ed has layed out his blog post is super content focused with little to distract the user, it works really well.
* [Tom Kentell](http://tomkentell.me/) - I love the overall homepage layout & Toms use of responsive is awesome.
* [X | The Theme (themeforest)](http://themeforest.net/item/x-the-theme/full_screen_preview/5871901) - I like the way they've layed out the classic portfollio.
* [Meeet](http://meeet.co/) - Really lovely clean design that looks has little clutter to distract the user.
* [Meeet](http://meeet.co/) - A lovely clean design that looks good and has little clutter that'll distract the user.
* [Jonathan Atkinson](http://themeforest.net/user/jonathan01/portfolio) - I always like Jonathan's work.
* [Plasso](https://plasso.co/) - Similar to meeet.co in terms of a super clear layout.

## The rebuild

I started doing inital sketches of what I had in mind for a layout and started coding. Here are some of the key changes
I started doing initial sketches of what I had in mind for a layout and started coding. Here are some of the key changes:

### A colour palette

I've found from experience having a set of colours that were documented in the project, helped keep me from building massively inconsistent webpages. With this in mind, I jumped over to [Material Palette](http://www.materialpalette.com/) to get a set of colours that should work nicely together.

Material palette was super handy and even generated a nice [Sass file](https://github.com/MikeRogers0/MikeRogersIO/blob/2015-epic/css/layout/_palette.scss) with the colours defined. I think it's helped keep the sites overall design not to messy.

### Stacked SVGs
### Inline SVGs

I wanted to show off the tools and frameworks I'm fimilar with on the homepage, but I didn't want to dick around with making CSS sprites. Instead I converted the logos on the homepage into vectors then stacked them into a single SVG file. The result is 12 logos being servered in a single http request without to much loss in quality.
I wanted to show off the tools and frameworks I'm familiar with on the homepage, but I didn't want to dick around with making CSS sprites. Instead I converted the logos on the homepage into vectors then stacked them into a single SVG file. The result was 12 logos being served in a single http request without to much loss in quality.

This worked great until I opened the site in Safari and noticed it looked a bit off, so I opted just to put the SVG inline into the HTML instead.

### Bower, Bootstrap and other things I decided against

I really wanted to mess around with a few of the new tools and frameworks that are out there to make front end a bit easier, during this rebuild.

First off I tried [bower](http://bower.io/), a fontend package manager tool. It seemed pretty nice, though I ended up feeling it was more faff then it was worth considering my site only uses a little JS on the homepage.

I also considered a CSS framework such as Bootstrap or Foundation to help get the layout kick started, but then I read [A Complete Guide to Flexbox](http://css-tricks.com/snippets/css/a-guide-to-flexbox/) and decided I'd be better off just using flex where I needed it instead of bogging myself down with CSS I'll never use.

## Hosting

My old server was costing me about €18 a month, which for a site that only gets around ~2k hits a month it was overkill. Instead I moved everything over to S3
My old server was costing me about €18 a month, which for a site that only gets around ~2k hits a month it was overkill. Instead I moved everything over to S3 & CloudFront.

It was a bit of a pain to get SSL setup for cloudfront but I followed [this guide](https://bryce.fisher-fleig.org/blog/setting-up-ssl-on-aws-cloudfront-and-s3/) to find my feet. One of the main "Oh FFS" moments was when I had to setup CloudFront to only access S3 over port 80, instead of both port 80 and 443, otherwise it would error out.

## Deploying

https://github.com/laurilehmijoki/s3_website - I use this gem to deploy the site.
https://bryce.fisher-fleig.org/blog/setting-up-ssl-on-aws-cloudfront-and-s3/ - I used this also
I used to use Git to deploy my site, which was annoying to get the hooks setup on new machines. Instead I opted to use [s3_website](https://github.com/laurilehmijoki/s3_website), a gem that pushes your _site folder to S3. It seems pretty solid.
45 changes: 20 additions & 25 deletions posts.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,29 @@
{% include partials/page_title.html %}

<div class="container">
<div class="calander">
{% for post in site.categories['blog'] %}
{% if post.next %}
{% capture month %}{{ post.date | date: '%B%Y' }}{% endcapture %}
{% capture nmonth %}{{ post.next.date | date: '%B%Y' }}{% endcapture %}
{% endif %}
{% for post in site.categories['blog'] %}
{% capture year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% capture nyear %}{{ post.previous.date | date: "%Y" }}{% endcapture %}

{% if forloop.first %}
<div>
<h2>{{ post.date | date: "%B %Y" }}</h2>
<ul class="post-list">
{% endif %}
{% if month != nmonth %}
{% if forloop.first %}
<h2>{{ post.date | date: "%Y" }}</h2>
<ul class="post-list">
{% endif %}

<li>
<a href="{{ post.url }}">{{ post.title }}</a>
<div class="meta">{{ post.date | date_to_string }}, {{ post | readtime | pluralize: "minute" }} read</div>
</li>

{% if forloop.last %}
</ul>
{% else %}
{% if year != nyear %}
</ul>
</div>

<div>
<h2>{{ post.date | date: "%B %Y" }}</h2>
<h2>{{ nyear }}</h2>
<ul class="post-list">
{% endif %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
<div class="meta">{{ post.date | date_to_string }}, {{ post | readtime | pluralize: "minute" }} read</div>
</li>
{% if forloop.last %}
</ul>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
9 changes: 5 additions & 4 deletions s3_website.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,18 @@ cloudfront_distribution_id: <%= ENV['CLOUDFRONT_DISTRIBUTION_ID'] %>
cloudfront_distribution_config:
default_cache_behavior:
min_TTL: <%= 60 * 60 * 24 * 7 %>
aliases:
quantity: 1
items:
CNAME: www.mikerogers.io
#aliases:
#quantity: 1
#items:
#CNAME: wwW.mikerogers.io

#cloudfront_invalidate_root: true

concurrency_level: 5

redirects:
index.php: /
feed/index.html: rss.xml
sitemap/index.html: sitemap.html
connect-with-me/index.html: /
my-blog/index.html: posts.html
Expand Down
38 changes: 21 additions & 17 deletions sitemap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,25 @@

{% include partials/page_title.html %}

<div class="container">
<h2>Pages</h2>
<ul class="post-list">
{% for page in site.pages %}
<li><a href="{{site.production_url}}{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}
</ul>

<h2>Posts</h2>
<ul class="post-list">
{% for post in site.categories['blog'] %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
<div class="meta">{{ post.date | date_to_string }}, {{ post | readtime | pluralize: "minute" }} read</div>
</li>
{% endfor %}
</ul>
<div class="container calander">
<div>
<h2>Posts</h2>
<ul class="post-list">
{% for post in site.categories['blog'] %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
<div class="meta">{{ post.date | date_to_string }}, {{ post | readtime | pluralize: "minute" }} read</div>
</li>
{% endfor %}
</ul>
</div>

<div>
<h2>Pages</h2>
<ul class="post-list">
{% for page in site.pages %}
<li><a href="{{site.production_url}}{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
</div>
</div>

0 comments on commit b6e0c70

Please sign in to comment.