Personal note to create and deploy githubpages
My note to create and deploy next posts on github pages. Useful website for octopress and github pages.
After installation, to create a new post.
rake new_post['My another post title here']
# Then open it and adding categories and enter an article. Once you are ready, then
rake generate # Generates posts and pages into the public directory
rake watch # Watches source/ and sass/ for changes and regenerates
rake preview # Watches, and mounts a webserver at http://localhost:4000
To see a preview locally,
rake preview
//Go to http://localhost:4000/
# Then deploy your post by,
rake generate
rake deploy
And check your githubpage.
Commit and push your sorce
git add .
git commit -m 'your message'
git push origin source
How to install Octopress theme
$ git clone git://github.com/lucaslew/whitespace.git .themes/whitespace
$ rake install['whitespace']
$ rake generate
$ rake update_source # update the template's source
$ rake update_style
$ rake deploy
$ git add .
$ git commit -m 'your message'
$ git push origin source
And some tweaks.
/* sass/partials/diebar/_base.scss */
@media only screen and (min-width: 768px) {
.toggle-sidebar {
outline: none;
position: absolute; right: -10px; top: 0; bottom: 0;
/*display: inline-block;*/
...}
sass/custom/_styles.scss
// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much
$white: #FFFFFF;
html {
background: $white;
}
body {
font-family: $sans !important;
font-size: 1em;
max-width: 850px;
padding-left: 0.5em;
padding-right: 0.5em;
> header {
background: $white;
text-align: center;
padding-left: 0px;
padding-right: 0px;
h1 {
a, a:visited, a:hover {
color: #8C8C8C;
font-family: $heading-font-family;
}
}
}
> nav {
background: $white;
border-bottom: 1px solid #F2F2F2;
padding-left: 0px;
padding-right: 0px;
form .search {
border-radius: 0.2em 0.2em 0.2em 0.2em;
box-shadow: none;
border: 0px;
padding-top: 0.3em;
padding-bottom: 0.3em;
padding-left: 0.5em;
padding-right: 0.5em;
}
a {
font-family: $sans;
font-size: 0.9em;
padding-top: 0.3em;
line-height: 1.5em;
}
li + li {
border-left: 0px;
a {
border-left: 0px;
}
}
}
> div {
background: $white;
border-bottom: 0px;
> div {
background: $white;
border-right-width: 0px;
}
}
> footer {
background: $white;
text-shadow: none;
color: #AAAAAA;
padding-left: 0;
padding-right: 0;
border-top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#content {
> article {
padding-left: 0px;
padding-right: 0px;
}
> div {
> article, > section {
padding-left: 0px;
padding-right: 0px;
}
}
}
}
article {
padding-top: 2em;
.entry-content {
h3 {
font-style: italic
}
}
ul, ol {
margin-left: 2em;
}
a, a:visited {
color: #1863A1;
}
header {
h1.entry-title {
font-family: $heading-font-family;
font-weight: 400;
}
}
}
#content {
div.pagination {
background: none repeat scroll 0 0 transparent;
margin: 0 10px;
font-size: 0.95em;
padding-bottom: 1.5em;
margin-top: 4em;
position: relative;
text-align: center;
border-top: dotted 1px #D1D1D1;
border-bottom: dotted 1px #D1D1D1;
}
.blog-index {
article {
padding-top: 4em;
header {
padding-left: 0;
padding-right: 0;
}
}
h1 {
a {
font-family: $heading-font-family;
font-weight: 400;
}
a:hover {
text-decoration: none;
}
}
}
.hentry {
h1.entry-title {
font-family: $heading-font-family;
font-weight: 400;
font-size: 2.2em;
}
}
}
figure.code {
.highlight {
background: #212C3B !important;
.gutter {
display: none;
}
}
}
.pre-code, html .gist .gist-file .gist-syntax .highlight pre, .highlight code {
background: #212C3B !important;
}
aside {
display: none;
}
#markdown-toc:before {
content: "Table of Contents";
font-weight: bold;
}
ul#markdown-toc {
list-style: none;
float: right;
@include shadow-box;
background-color: white;
margin: 10px 0 20px 10px;
}
.gist, .bogus-wrapper{
clear: both;
margin-top:10px;
}
#content {
margin-right: 0;
}
/*
http://blog.codebykat.com/2013/05/23/gorgeous-octopress-codeblocks-with-coderay/
*/
/* overrides of the lousy styles from _syntax.scss */
.CodeRay {
clear: both;
}
.CodeRay pre {
background: none;
color: #000;
}
/* fixes issue where the whole line wouldn't get colored in a diff */
.CodeRay span.insert, .CodeRay span.change, .CodeRay span.delete {
width: auto;
}
.toggle-sidebar{
display: none;
}
article h2:first-of-type{background-image:none;}
@import "coderay-github"
Using CodeRay
Codeblocks with CodeRay After installing CodeRay use the folloings.
Some examples
def what?
42
end
The above code will produce the following.
def what?
42
end
Another way
def what?
42
end
will produce,
def what?
42
end
Inline code
`fox jumps over`
A quick brown `fox jumps over` lazy dogs.
will produce,
fox jumps over
A quick brown fox jumps over
lazy dogs.
Block code
foo foo
bar bar
baz baz
will produce,
foo foo
bar bar
baz baz
Written on January 6, 2013