whoa, hey an open-source

single-page jekyll theme

…it’s focused on delivering information quickly, easily, configurably, and stylishly!

Want to make a single-page site to show off something cool? Go fork me on github!

Fork me on GitHub

Why

Basically

this theme rocks.

Got some killer app, some neat project, a cool portfolio? Make an easy single-page site to show it all off. SinglePaged uses jekyll niceties to make a polished, modular, and beautiful single page site.

Oh– go see some examples!

  • Each vertical section is a markdown file in _posts/ directory.
    • They’re sorted by ‘date’. (we don’t use date anywhere, it only sorts)
  • Each vertical section sets it’s own color, header icon (or image), title, and easy-to-write markdown body.
  • Only two things to edit:
    1. Edit _config.yml to set the site title, description, etc
    2. Add _posts/*.md to make each vertical section. Copy some examples and add the sections from your README.md for a fast start!
  • Easy adding of SEO terms, favicon & such, and google analytics token.

Sound good? Let’s go!

There are three way to get started: (links jump to that section)

  1. Make a user homepage (or organization)
  2. Make a standalone project page
  3. Make a site under an existing project
setup details

Setup as user homepage

  • Go click fork on the github project page
  • Rename your new repository to **username**.github.io. (click settings in the right column)
  • Clone your repository, cd into the project
  • Run git checkout publish && git branch -m master && git push -u origin master && git branch -D gh-pages to get the publish branch as master for a clean, empty starting point.
  • On your github project page go to settings again and change your default branch to master
  • Run git push origin --delete gh-pages to delete your remote’s development branch

Now hop over to Usage to get it running with your own stuff!

When you publish changes use git push -u origin master


Setup as standalone project page

  • Go click fork on the github project page
  • Rename your new repository to whatever you want. (click settings in the right column)
    • It will go live at yourusername.github.io/WhateverYouWant
  • Clone your repository, cd into the project
  • Run git checkout publish && git branch -D gh-pages && git branch -m gh-pages && git push -uf origin gh-pages to swap the publish and gh-pages branch.

Now hop over to Usage to get it running with your own stuff!

When you publish changes use git push -u origin gh-pages


Setup inside existing project

This is the most complicated use-case .. but it’s the coolest. Say you’ve got your kickass project github.com/t413/kicker and want to have some web presence to post about on hacker news. This will create an orphan branch called gh_pages in your repository where you can publish changes, posts, images, and such. It won’t alter your code at all.

  • cd into your project on the command line
  • use git remote add -t publish singlepage git@github.com:t413/SinglePaged.git to get access to this repository.
  • use git fetch singlepage publish:gh-pages to fetch the remote branch
  • use git branch --set-upstream gh-pages singlepage/publish && git checkout gh-pages; This creates and checks out an orphan branch called gh-pages that tracks the original and lets you make changes.
  • When you run git push gh-pages:origin/gh-pages it’ll be live at yourusername.github.io/repositoryName

Now hop over to Usage to get it running with your own stuff!

When you publish changes use git push -u origin gh-pages

usage

Alright, you’ve got a clean copy and are ready to push some schmancy pages for the world to ogle at.

  • Edit _config.yml to change your title, keywords, and description.
  • Create a new file in _posts/ called 2014-01-01-intro.md Edit it, and add:
1
2
3
4
5
6
7
8
9
---
title: "home"
bg: white     #defined in _config.yml, can use html color like '#010101'
color: black  #text color
style: center
---

# Example headline!
and so on..
  • Create a second post called 2014-01-02-art.md with an divider image this time:
1
2
3
4
5
6
7
8
---
title: "Art"
bg: turquoise  #defined in _config.yml, can use html color like '#0fbfcf'
color: white   #text color
fa-icon: paint-brush
---

#### A new section- oh the humanity!

Note: That part fa-icon: paint-brush will use a font-awesome icon of paint-brush. You can use any icon from this font-awesome icon directory.

  • install Jekyll with sudo gem install github-pages
  • run jekyll serve -w
  • Push changes and see them live!

Changing your colors

  • In each post file you can define bg: mycolor and color: myothercolor to change the background and text colors for that section.
  • mycolor can be a quoted html color like '#0fbfcf' or a key to a special color defined in _config.yml under ‘colors’.
    • Note: Changes to _config.yml require a manual restart to your local server with ^C and jekyll serve -w.

Nifty, right!

Also see README.md on github!

updating

Updating

So you’ve got a copy running and there’s some new update? Let’s update!

  1. Checkout your github-pages branch
    • git checkout gh-pages for a standalone or existing page
    • git checkout master for a username.github.io page
  2. run git remote | grep -q "singlepage" || git remote add -t publish singlepage https://github.com/t413/SinglePaged.git to be sure you have access to this repository (you can run this command at any time).
  3. git fetch singlepage to fetch-in-place new changes.
  4. Update to the new base (using merge)
    1. git merge singlepage/publish
  5. You can alternatively update using rebase. This rewrites history (bad), but it is cleaner.
    1. git rebase singlepage/publish
video

Having an embedded media (photos and video) is often inflexible with a dynamic and responsive design.

Embed your video like this:

1
2
3
<div class="icontain">
  <iframe src="//www.youtube.com/embed/8yis7GzlXNM" allowfullscreen></iframe>
</div>

It’ll play like this funny video below! Try resizing the page!

Photo layouts are also really cool and dynamically resizable. Check out the photos/gallery section at magiciansanfrancisco.com for a demo and see the source code for how.