Code Monkey home page Code Monkey logo

singlepaged's Introduction

Fancy jekyll powered single page site

Here're some examples:

Why?

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.

  • 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 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 [email protected]: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:
  ---
  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:
  ---
  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!

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
  1. 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).
  2. git fetch singlepage to fetch-in-place new changes.
  3. Update to the new base (using merge)
    1. git merge singlepage/publish
  4. You can alternatively update using rebase. This rewrites history (bad), but it is cleaner.
    1. git rebase singlepage/publish

singlepaged's People

Contributors

t413 avatar chrissphinx avatar soops avatar jairideout avatar keheliya avatar timodwhit avatar tfoote avatar

Watchers

James Cloos avatar yonglezhao avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.