diff options
| -rw-r--r-- | README.md | 3 | ||||
| -rw-r--r-- | _config.yml | 46 | ||||
| -rw-r--r-- | _includes/analytics.html | 2 | ||||
| -rw-r--r-- | _includes/disqus.html | 20 | ||||
| -rw-r--r-- | _layouts/default.html | 6 | ||||
| -rw-r--r-- | _layouts/page.html | 2 | ||||
| -rw-r--r-- | _layouts/post.html | 4 | ||||
| -rw-r--r-- | _posts/2014-4-4-Jekyll-The-Easy-Way.md | 85 | ||||
| -rw-r--r-- | about.md | 14 | ||||
| -rw-r--r-- | images/omg-code.jpg | bin | 0 -> 63111 bytes | |||
| -rw-r--r-- | index.html | 6 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 | ||||
| -rwxr-xr-x | scss/style.scss | 37 | ||||
| -rw-r--r-- | style.css | 44 |
14 files changed, 194 insertions, 77 deletions
@@ -1,6 +1,5 @@ - # Jekyll Boilerplate Create your Jekyll blog in minutes. -A clean, one-column theme from which to kick off your Jekyll blog. +A clean, one-column theme from which to kick off your Jekyll blog.
\ No newline at end of file diff --git a/_config.yml b/_config.yml index d49bef6..9e58c71 100644 --- a/_config.yml +++ b/_config.yml @@ -1,25 +1,37 @@ +# +# This file contains configuration flags to customize your site +# + +# The name of your site name: Jekyll Boilerplate -markdown: redcarpet -markdown_ext: md +# A short bio or description +description: Short bio of description placeholder. + +# A URL pointing to your avatar or profile pic +# To use your Gravatar: (the one that GitHub uses for your profile pic) +# 1. Go to https://github.com/YOURUSERNAME/ +# 2. Right click > Copy Image URL on your profile pic, +# 3. Take the first long ID from the URL and paste it in place of mine below +avatar: http://www.gravatar.com/avatar/36b4f56a7fa40d3c06e5afc4ed0b82b5?s=200 + +# Your disqus username, if you'd like blog commenting +disqus: + +# Your Google Analytics web tracking code (e.g. UA-2110908-2) +google_analytics: + +# Links used for your social icons +links: + github: https://github.com/YOUR-USERNAME + twitter: https://twitter.com/YOUR-USERNAME + #linkedin: https://linkedin.com/in/YOUR-USERNAME -pygments: true +markdown: redcarpet +# Exclude these files from your production _site exclude: - Gemfile - Gemfile.lock - scss - - js - - README.md - -disqus: - shortname: '' - -googleanalytics: - id: '' - -links: - #github: https://github.com/YOUR-USERNAME - #twitter: https://twitter.com/YOUR-USERNAME - #linkedin: https://linkedin.com/in/YOUR-USERNAME - #avatar: http://YOUR-USERNAME.github.io/images/avatar.jpg + - README.md
\ No newline at end of file diff --git a/_includes/analytics.html b/_includes/analytics.html index 6707963..ccd51fd 100644 --- a/_includes/analytics.html +++ b/_includes/analytics.html @@ -2,7 +2,7 @@ <script type="text/javascript"> var _gaq = _gaq || []; - _gaq.push(['_setAccount', '{{ site.googleanalytics.id }}']); + _gaq.push(['_setAccount', '{{ site.google_analytics }}']); _gaq.push(['_trackPageview']); (function() { diff --git a/_includes/disqus.html b/_includes/disqus.html index 82f4fe5..ad38601 100644 --- a/_includes/disqus.html +++ b/_includes/disqus.html @@ -1,16 +1,14 @@ <div id="disqus_thread"></div> <script type="text/javascript"> - /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ - var disqus_shortname = '{{ site.disqus.shortname }}'; // required: replace example with your forum shortname + {% if include.disqus %} - {% if include.disqus_identifier %} - var disqus_identifier = "{{ include.disqus_identifier }}"; - {% endif %} + var disqus_shortname = '{{ site.disqus }}'; - (function() { - var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; - dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; - (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); - })(); - </script> + (function() { + var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; + dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); + })(); + {% endif %} +</script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index c1761c2..0992bcc 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -20,8 +20,10 @@ </head> <body> - <header> - <a href="/" class="logo"><img src="/404.ups" />{{ site.name }}</a> + <header class="masthead"> + <img src="{{ site.avatar }}" class="avatar" /> + <a href="/" class="name">{{ site.name }}</a> + <p class="description">{{ site.description }}</p> <nav> <a href="/">Blog</a> diff --git a/_layouts/page.html b/_layouts/page.html index 7f97e69..9b67cad 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -3,7 +3,7 @@ layout: default --- <article class="page"> - <h1>{{ page.title }}</h1> + <header><h1>{{ page.title }}</h1></header> <div class="entry"> {{ content }} diff --git a/_layouts/post.html b/_layouts/post.html index 4a3c140..1384cce 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -3,7 +3,9 @@ layout: default --- <article class="post"> - <h1>{{ page.title }}</h1> + <header> + <h1>{{ page.title }}</h1> + </header> <div class="entry"> {{ content }} diff --git a/_posts/2014-4-4-Jekyll-The-Easy-Way.md b/_posts/2014-4-4-Jekyll-The-Easy-Way.md new file mode 100644 index 0000000..7eccc1a --- /dev/null +++ b/_posts/2014-4-4-Jekyll-The-Easy-Way.md @@ -0,0 +1,85 @@ +--- +layout: post +title: Jekyll The Easy Way +--- + +I just migrated my blog over to this Jekyll powered static site that you're currently reading. Finding a good workflow with Jekyll took me longer than I expected. + +When you understand how Jekyll works, it's _extremely_ fast to set up. However when learning I came across lot of articles, repos and stack overflow threads that made the setup much more complicated than it needs to be. + + + +### Jekyll is built for one specific purpose + +Tom Preston Warner of Github build Jekyll to [[INSERT HERE EXCERT FROM TPW's blog]] + +This also the way that Jekyll was built to be used! + +It was built for one purpose. To make blogging on Github Pages extremely quick and easy. + +If you want more than a simple blog hosted on Github Pages, don't use Jekyll! Sure, it can be used for other things too. But if you try to use them for those, you're probably going to have a bad time. + +### Use your named account on Github Pages (barryclark.github.io) + +This eliminates the need for a seperate gh-pages branch workflow, making things really simple! + +You just commit your Jekyll layout files and your markdown blog posts and content to the master branch of your barryclark.github.io, and Github Pages AUTOMATICALLY compiles it. + +Fun fact: Github Pages processes ALL files through Jekyll. You mostly just don't notice this if you're using Github Pages for static content as flat .html content just passes through and doesn't get compiled. + +If you wanted to, you wouldn't actually ever hard to install or run jekyll locally. You could just push up to your barryclark.github.io and everything would be taken care of for you. + +That is awesome. And that's the first way that Jekyll is supposed to be used. + +### Don't use plugins + +Github Pages builds Jekyll sites in "safe mode". This means that when compiling your site, Github Pages won't run any of your plugins, it'll only use the standard Jekyll build. If you want to use plugins to + +That means you can't compile SASS, etc, etc. + +Using plugins means that you can't use your Github Pages account. There are other ways to do this. But they add lots of extra complexity. + +### Pre-process css/js yourself + +Use a guard or grunt script while you're theming. Don't try to do it within the jekyll build process. + +You should be using grunt anyway. + +Then just push the .css and .js and Jekyll will have no problems with it. No need to install jekyll-asset-manager, which has a whole host of complications with it. + +### Have a workflow for blogging, and a separate workflow for theming + +Updating content is CRAZY easy... and that's the whole point of Jekyll. You just write a markdown post and commit it to the repo, and you're done. Amazing. + +2 of the simplest theming workflows I found: + +- Build your site statically and theme that. +- + +Don't try to mix things in to the jekyll build process. It's not worth it, and you likely won't be able to use that workflow on barryclark.github.io + +### To get started, fork a good repo + +Following all of the about tips, you'll have a much easier time setting up Jekyll... and hell, if you want to do some fancy things, add them in later. + +There are a number of repos that already follow the rules above. Forking one of them will put you on the right tracks, and save you a TON of time. You'll be able to get up and running extremely quickly. + +Give a list of my favorite repos to fork. + +- Tom Preston Warner +- Zach Holman + +I've also shared my base theme repo, which abides by each of the things I've covered in this post. It includes grunt scripts to do your pre-processing, and the same layout as you see here on this blog, with easy options for customization. + +- Mine (Jekyllstrap? Jekyll-base?) :> + +### Forking Jekyllstrap + +Give instructions on exactly how to fork the repo. Step through each step to have your Jekyll site running on your name.com domain name. + +1. Fork +2. Write your CSS +3. + +I should create this, and fork my own repo. + diff --git a/about.md b/about.md new file mode 100644 index 0000000..b94a096 --- /dev/null +++ b/about.md @@ -0,0 +1,14 @@ +--- +layout: page +title: About Me +--- + +Some information about you! + +### More Information + +A place to include any other types of information that you'd like to include about yourself. + +### Contact me + +[email@domain.com](mailto:email@domain.com)
\ No newline at end of file diff --git a/images/omg-code.jpg b/images/omg-code.jpg Binary files differnew file mode 100644 index 0000000..648a1b4 --- /dev/null +++ b/images/omg-code.jpg @@ -6,12 +6,12 @@ layout: default {% for post in site.posts %} <article class="post"> <header> - <h2>{{ post.title }}</h2> + <h1>{{ post.title }}</h1> </header> - <div class="entry">{{ post.content | truncatewords:50}}</div> + <div class="entry">{{ post.content | truncatewords:40}}</div> - <a href="{{ post.url }}">Read More</a> + <a href="{{ post.url }}" class="read-more">Read More</a> </article> {% endfor %} </div>
\ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss index 0a85575..53bae88 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -12,7 +12,7 @@ $black: #000; $darkerGray: #222; $darkGray: #333; $gray: #666; -$lightGray: #bbb; +$lightGray: #aaa; $lighterGray: #eee; $white: #fff; diff --git a/scss/style.scss b/scss/style.scss index d3d2cfc..6b13419 100755 --- a/scss/style.scss +++ b/scss/style.scss @@ -17,7 +17,7 @@ html { } body { - max-width: 700px; + max-width: 680px; margin: 0 auto; background: $white; @@ -25,20 +25,20 @@ body { color: $darkGray; } -h1, h2, h3, h4, h5, h6, .section > header { +h1, h2, h3, h4, h5, h6 { font-family: $helveticaNeue; color: $darkerGray; - font-weight: bold; + font-weight: 400; line-height: 1.7; - margin: 2em 0 15px; + margin: 1em 0 15px; padding: 0; } - + h1 { - font-size: 2rem; + font-size: 2.2rem; @include mobile { - font-size: 2rem; + font-size: 2.2rem; } } @@ -86,6 +86,10 @@ ul { list-style-type: disc; } +img { + max-width: 100%; +} + // Specify the color of the selection ::-moz-selection { color: $black; @@ -101,10 +105,6 @@ ul { // LAYOUT / SECTIONS // -header { - margin: 40px 0; -} - .logo { float: left; @@ -118,6 +118,10 @@ header { } } +.avatar { + border-radius: 6px; +} + nav { float: right; @@ -154,13 +158,12 @@ nav { } } -.post { - width: 680px; - - @include mobile { - width: 100%; - } +.posts > .post { + padding-bottom: 2em; + border-bottom: 1px solid $lighterGray; +} +.post { blockquote { border-left: 2px solid $gray; font-size: 1.2em; @@ -285,25 +285,25 @@ html { font-size: 100%; } body { - max-width: 700px; + max-width: 680px; margin: 0 auto; background: white; font: 18px/1.4 Helvetica, Arial, sans-serif; color: #333333; } -h1, h2, h3, h4, h5, h6, .section > header { +h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #222222; - font-weight: bold; + font-weight: 400; line-height: 1.7; - margin: 2em 0 15px; + margin: 1em 0 15px; padding: 0; } h1 { - font-size: 2rem; } + font-size: 2.2rem; } @media screen and (max-width: 520px) { h1 { - font-size: 2rem; } } + font-size: 2.2rem; } } h2 { letter-spacing: 1px; @@ -340,6 +340,9 @@ ul { padding-left: 30px; list-style-type: disc; } +img { + max-width: 100%; } + ::-moz-selection { color: black; background: #eeeeee; } @@ -348,9 +351,6 @@ ul { color: black; background: #eeeeee; } -header { - margin: 40px 0; } - .logo { float: left; } .logo a { @@ -360,6 +360,9 @@ header { .logo a:hover, .logo a:active { color: #4183c4; } +.avatar { + border-radius: 6px; } + nav { float: right; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -386,18 +389,17 @@ nav { width: 100%; text-align: center; } } -.post { - width: 680px; } - @media screen and (max-width: 520px) { - .post { - width: 100%; } } - .post blockquote { - border-left: 2px solid #666666; - font-size: 1.2em; - font-style: italic; - margin: 1.8em 0.8em; - padding: 0.1em 1em; - color: #666666; } +.posts > .post { + padding-bottom: 2em; + border-bottom: 1px solid #eeeeee; } + +.post blockquote { + border-left: 2px solid #666666; + font-size: 1.2em; + font-style: italic; + margin: 1.8em 0.8em; + padding: 0.1em 1em; + color: #666666; } footer { padding: 1rem 0; } |
