Created
February 16, 2012 06:10
-
-
Save MikeLarned/1842570 to your computer and use it in GitHub Desktop.
Skeleton Blog Complete
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> | |
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> | |
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> | |
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> | |
<head> | |
<!-- Basic Page Needs | |
================================================== --> | |
<meta charset="utf-8"> | |
<title>A free GitHub, Skeleton blog</title> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<!-- Mobile Specific Metas | |
================================================== --> | |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
<!-- CSS | |
================================================== --> | |
<link rel="stylesheet" href="stylesheets/base.css"> | |
<link rel="stylesheet" href="stylesheets/skeleton.css"> | |
<link rel="stylesheet" href="stylesheets/layout.css"> | |
<!--[if lt IE 9]> | |
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<!-- Favicons | |
================================================== --> | |
<link rel="shortcut icon" href="images/favicon.ico"> | |
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"> | |
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> | |
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> | |
</head> | |
<body> | |
<!-- Primary Page Layout | |
================================================== --> | |
<!-- Delete everything in this .container and get started on your own site! --> | |
<div class="container"> | |
<div class="sixteen columns"> | |
<h1 class="remove-bottom" style="margin-top: 40px">Mike Larned</h1> | |
<h5>[email protected]</h5> | |
<hr /> | |
</div> | |
<div class="sixteen columns"> | |
<h3>A Free Blog with GitHub Pages and Skeleton</h3> | |
<div> | |
<p>Gotta love free stuff. You can setup a mini blog using <a href='http://pages.github.com/'>GitHub Pages</a> and the <a href='http://www.getskeleton.com/'>Skeleton</a> template in about 10 minutes. Skeleton is a boilerplate html template | |
that uses a responsive grid layout (similiar to the 960 grid) to render a best fit based on device size. Here is a screenshot of this same page on my HTC Sense. (Which isn't going to act repsonsive and resize right now). </p> | |
<img src="skeletonblog/SkeletonBlogOnAndroid.png" alt="Now on Android" /> | |
<p>Skeleton's typography and basic styles are very clean looking. I found it hard to mess up the layout. The majority this post was wrapped in one div and a few p tags.</p> | |
<script src="https://gist.github.com/1842425.js"> </script> | |
<p> | |
And then we can easily add gists for code snippets. I did notice that long lines in the Gist on Android didn't allow me to scroll. If you collapse this page to a smaller size, you will see the Gist creates a scroll bar after a line in the Gist | |
is longer than its container. | |
</p> | |
<p> | |
The part I liked the most was the intergration into GitHub though. I'm already using git all the time, so switching over to my blog folder, adding something new and posting is simple. GitHub pages is going to pull up the index.html file. I do | |
need to update my most recent content in that page, move my old content to a folder and then link back to that folder for refrence. Its a bit manual, but should be easy enough to script. Editing was all done in Notepad++. I also didn't mind that. I found it | |
almost as fast to write the HMTL as I would have using a RTE. I might have to learn to spell now too. | |
</p> | |
<p> | |
Probably not a great setup for non developers, but for me it feels portable and I can reference anyone back to my content and projects all through GitHub. Any content indexing is going to happen on GitHub, so definitely a no go if you are using your blog as | |
marketing material. | |
</p> | |
<h4>Setup Steps</h4> | |
<ol> | |
<li>Clone the Skeleton Template (<a href="https://github.com/dhgamache/Skeleton">https://github.com/dhgamache/Skeleton</a></li> | |
<li>Create a repo on your GitHub account using your username.github.com<li> | |
<li>Copy files from Skeleton Template into your working directory. Push to the repo you just created. (See <a href="http://pages.github.com/">http://pages.github.com/</a> for detailed repo setup / push steps</li> | |
<li>Update the Skeleton index.html page to fit your layout. Here is my complete page</li> | |
<li>Push changes to master. Anything in the master branch will be published as a page</li> | |
</old> | |
</div> | |
<p> | |
</p> | |
</div> | |
</div><!-- container --> | |
<!-- JS | |
================================================== --> | |
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> | |
<!-- End Document | |
================================================== --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment