Giter Club home page Giter Club logo

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

Radosław Stankiewicz's Projects

anthill-net icon anthill-net

Automatically exported from code.google.com/p/anthill-net

api-spec-converter icon api-spec-converter

Convert API descriptions between popular formats such as OpenAPI(fka Swagger), RAML, API Blueprint, WADL, etc.

bigquery-utils icon bigquery-utils

Useful scripts, udfs, views, and other utilities for migration and data warehouse operations in BigQuery.

countries icon countries

Tools to find out country where given GPS coordinates are

courses icon courses

Course materials for the Data Science Specialization: https://www.coursera.org/specialization/jhudatascience/1

dataform icon dataform

Dataform is a framework for managing SQL based data operations in BigQuery, Snowflake, and Redshift

flyway icon flyway

Flyway by Boxfuse • Database Migrations Made Easy.

guava icon guava

Google Core Libraries for Java

hadoop-book icon hadoop-book

Example source code accompanying O'Reilly's "Hadoop: The Definitive Guide" by Tom White

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.