summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorHans-Nikolai Viessmann2013-09-22 14:01:17 +0100
committerHans-Nikolai Viessmann2013-09-22 14:01:17 +0100
commit44adc3e48f4aa5577110b69244f2ad2da76f7e2e (patch)
tree665038da19e1a72ee0a0b678147eb1dc661aee24
parent332d241ff101e0e721804cce410613fac7019615 (diff)
downloadblog-stage.tar.gz
blog-stage.zip
Finished my first poststage
I finally have finished my first post! I also made some improvements to the <article> and the post/blog templates to better handle (visually) markdown's output.
-rw-r--r--_assets/images/crop/old-site-front-crop.pngbin0 -> 14855 bytes
-rw-r--r--_assets/images/old-site-front.pngbin0 -> 55079 bytes
-rwxr-xr-x_assets/stylesheets/main.css.scss20
-rwxr-xr-x_layouts/post.html2
-rwxr-xr-x_plugins/changelog.rb1
-rwxr-xr-x_posts/2013-04-05-Making-of-my-new-site.markdown12
-rw-r--r--_posts/2013-09-21-Making-of-my-new-site.markdown144
-rwxr-xr-xblog/index.html2
8 files changed, 166 insertions, 15 deletions
diff --git a/_assets/images/crop/old-site-front-crop.png b/_assets/images/crop/old-site-front-crop.png
new file mode 100644
index 0000000..a79e979
--- /dev/null
+++ b/_assets/images/crop/old-site-front-crop.png
Binary files differ
diff --git a/_assets/images/old-site-front.png b/_assets/images/old-site-front.png
new file mode 100644
index 0000000..174a76c
--- /dev/null
+++ b/_assets/images/old-site-front.png
Binary files differ
diff --git a/_assets/stylesheets/main.css.scss b/_assets/stylesheets/main.css.scss
index f269632..0cb51d9 100755
--- a/_assets/stylesheets/main.css.scss
+++ b/_assets/stylesheets/main.css.scss
@@ -80,6 +80,12 @@ a:hover {
color: $red;
}
+h1 {
+ > small {
+ font-size: $default-font-size;
+ }
+}
+
.button-link {
display: inline-block;
padding: 10px;
@@ -208,7 +214,7 @@ footer {
/* Article (Main Content) */
article {
- min-width: 720px;
+ min-width: $default-min-width - 258;
margin-left: 181px; /* nav width + space */
overflow: hidden;
font-family: $opensans;
@@ -216,6 +222,18 @@ article {
> :first-child {
margin-top: 0 !important;
}
+ img {
+ display: block;
+ min-width: inherit;
+ max-width: $default-min-width;
+ margin: 0 auto;
+ }
+ code {
+ display: inline-block;
+ padding: 5px;
+ font-weight: bold;
+ background-color: #636669;
+ }
}
/* Category-Index */
diff --git a/_layouts/post.html b/_layouts/post.html
index ebc4ecb..9c557a0 100755
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,7 +2,7 @@
layout: default
---
-<h4>{{ page.title }} <small>[{{ page.date | date_to_string }}]</small></h4>
+<h1>{{ page.title }} <small>[{{ page.date | date_to_string }}]</small></h1>
<div class="post">
{{ content }}
</div> \ No newline at end of file
diff --git a/_plugins/changelog.rb b/_plugins/changelog.rb
index 30366d4..221366c 100755
--- a/_plugins/changelog.rb
+++ b/_plugins/changelog.rb
@@ -2,6 +2,7 @@ module Jekyll
CHANGELOG_FILE = 'CHANGELOG.txt'
+ # Recover from strange exception when starting server without --auto
class ChangelogFile < StaticFile
def write(dest)
begin
diff --git a/_posts/2013-04-05-Making-of-my-new-site.markdown b/_posts/2013-04-05-Making-of-my-new-site.markdown
deleted file mode 100755
index 0938bbd..0000000
--- a/_posts/2013-04-05-Making-of-my-new-site.markdown
+++ /dev/null
@@ -1,12 +0,0 @@
----
-layout: post
-title: Making of my new site
-description: The why and how of making <em>this</em> website
-categories: blog intro
-tags: webdesign
----
-
-First off, welcome to my new site! Its been long in the making, I can tell you.
-I wanted to replace my previous site with something a little more snazzy and
-integrated (you can view that one at my [archive](http://archive.viessmann.co/))
-. \ No newline at end of file
diff --git a/_posts/2013-09-21-Making-of-my-new-site.markdown b/_posts/2013-09-21-Making-of-my-new-site.markdown
new file mode 100644
index 0000000..8a019c1
--- /dev/null
+++ b/_posts/2013-09-21-Making-of-my-new-site.markdown
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Making of my new site
+description: The why and how of making <em>this</em> website
+categories: blog intro
+tags: webdesign
+---
+
+Introduction
+------------
+
+First off, welcome to my new site! Its been long in the making, I can tell you.
+I wanted to replace my previous site with something a little more snazzy and
+integrated (you can view that one at my [archive][archive]).
+
+I started this project in April during my Easter break. Its main goal was to
+create an improved, more functional, blog-oriented site. Unlike my previous
+website, this one is meant to have more content; stuff I had originally intended
+to release on a separate website. However due to concerns of being able to
+maintain both sites, I decided to integrate them together into what you see
+now. Furthermore, I am intending to use this design on my [academic site][uni],
+or at least a variation thereof.
+
+Finding a CMS
+-------------
+
+Because I wanted a more blog-oriented site, I went out and looked at various
+CMS. At the top of my list was Wordpress. I have used it several times over the
+years and it works very well. However, I wanted something that I didn't have to
+hack too much in order to get what I wanted. So I kept looking. A friend of mine
+advised me to look at [Flask][flask] and [Hyde][hyde], two static site
+generators using Python.
+
+I initial had a close look at Hyde simply because it looked more like what I
+wanted to use. But due to huge changes occurring within the project at the time,
+I decided to pass over it. Flask reminded me a lot of [Sinatra][sinatra], in
+that it gives you a lot of control over how the application acts in regards to
+serving the website assets; in other words it is very low-level. In my case, too
+low-level. I skipped over Flask as well.
+
+I then had a look into [Github Pages][githubp], after another friend pointed it
+out to me. This then led to me looking into [Jekyll]. From what I read in the
+documentation and having had a look through some of the source code, I knew I
+had found a winner.
+
+Jekyll is, at its simplest, a blog-oriented static-site generator. However,
+through the use of plug-ins it can be expanded to fulfil a variety of purposes.
+That however wasn't too important to me. Instead I was happy to find a system
+that *just worked*. You `gem install jekyll`, you setup a few config files and a
+directory structure, then you write the template file(s), and then the actual
+content (e.g. pages, posts, etc.). Done!
+
+Design
+------
+
+[![My previous site][osfc]][osf]
+
+The next step for me was the actual design of the site. My previous site was
+fairly minimalistic and I wanted this one to follow the same principle. However
+I wanted it to be less *artsy* (have a look at it, you'll know what I mean). So
+I decided to keep it three-tonal except in the case of the [links][links] page,
+which I wanted to reflect my previous site's *colourfulness*. Furthermore, I
+wanted the site to be more user friendly. The previous site wasn't designed with
+a viewer in mind (at least when it came to choice of font and placement of the
+elements).
+
+I decided to keep a few design principles from my previous site, such as having
+the navigation and website title left aligned with the content in the middle
+offset to the right. I decided to move away from having the footer be right
+aligned and directly under the content. Instead I expanded it to the full width
+of the page and made its position absolute to the bottom of the page. I also
+wanted to use a different typography, something easier to read. The site now
+uses [Lacuna][lac] in the title and [OpenSans][ops] for everything else.
+
+I won't go into more detail of why I did what and where, such as my choice of
+font size, the colour scheme, or even the placement of various elements. This is
+all meant to be a short overview. What I will talk about are some of the extra
+things I did, like how I add new entries to the links page or how I create the
+[CHANGELOG][clog] file including all git commits.
+
+Extra stuff
+-----------
+
+Lets start with the links page. I opted, just because I am dealing with static
+content, to use a flat file containing all my link entries. I created a plug-in
+to take the data and turn it into HTML using a template. I also included a set
+of functions so that every time I regenerate the site, I get different colours
+for the links (the [plug-in source code][cl]). The cool thing is that because I
+am using the HSV colour model, all the colours I generate have all the same
+saturation and brightness, meaning the colours don't clash. The tricky bit was
+actually converting between HSV and RGB values, the function I created with the
+help of the [Wikipedia page][HSV].
+
+The changelog file I created using a [plug-in][gc] as well, this time using the
+`git` command-line tool to get the log output. The interesting part was figuring
+out how to dynamically create a static page and add it to Jekyll's generation
+process. It turns out that there is a [StaticFile][jsf] class to do just that.
+I had a look at a similar plug-in (to create a [sitemap.xml file][jsm]) and
+copied from it a bit of code regarding an issue when using Jekyll to serve the
+site, see [line 94][sg]. Another thing I did was change the format of the `git
+log` output, using `# %h --- <%aD>%n%B` to create something that looks like
+this:
+
+ # <rev-short> --- <date>
+ <Commit Title>
+
+ <Commit Comment>
+
+Conclusion
+----------
+
+Well, that's basically it in a nutshell, just a quick overview of everything. I
+hope to be adding a few more things in the future to this site.
+
+Also, have a look at the [humans.txt][hum] file; I have used a variety of tools
+and services to create this site, and I would like to thank the developers and
+service providers, without there work, this would have been much harder.
+
+[archive]: /archive/homepage-one/ (previous website)
+[uni]: //www2.macs.hw.ac.uk/~hv15/ (my academic website)
+[flask]: //flask.pocoo.org/
+[hyde]: //ringce.com/hyde/
+ (by the look of things, I think the project is back up and running)
+[sinatra]: //www.sinatrarb.com/
+ (actually really cool, I am intending to use this for another project)
+[githubp]: //pages.github.com/ (just awesome, thanks GitHub)
+[osfc]: {% asset_path crop/old-site-front-crop.png %}
+[osf]: {% asset_path old-site-front.png %}
+ (click here to see a full size example)
+[lac]: //www.dafont.com/lacuna.font
+[ops]: //www.google.com/fonts/specimen/Open+Sans
+[links]: /links/ (my lovely links page)
+[clog]: /CHANGELOG.txt (my changelog file for the site)
+[cl]: //bitbucket.org/hv15/hans.viessmann.co/src/stage/_plugins/links.rb
+ (my links page generator, including the colour functions)
+[HSV]: //en.wikipedia.org/wiki/HSV_color_space#Converting_to_RGB
+ (it isn't as hard as it looks, but its pretty complex)
+[gc]: //bitbucket.org/hv15/hans.viessmann.co/src/stage/_plugins/changelog.rb
+ (very simple)
+[jsf]: //github.com/mojombo/jekyll/blob/master/lib/jekyll/static_file.rb
+ (they that of everything)
+[jsm]: //github.com/kinnetica/jekyll-plugins
+[sg]: //github.com/kinnetica/jekyll-plugins/blob/master/sitemap_generator.rb#L94
+[hum]: /humans.txt (thanks for everything) \ No newline at end of file
diff --git a/blog/index.html b/blog/index.html
index 4283ce5..b112807 100755
--- a/blog/index.html
+++ b/blog/index.html
@@ -15,6 +15,6 @@ description: Here is my collection of articles which include monologues, anecdot
<div class="category">
<div class="title"><a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></div>
<div class="meta"><span class="timeago">[{{ post.date | date_to_string }}]</span>{% for tag in post.tags %} <span>{{ tag }}</span>{% endfor %}</div>
- <div class="description">{{ post.excerpt | markdownify }}</div>
+ <div class="description">{{ post.description }}</div>
</div>
{% endfor %} \ No newline at end of file