Building Our Website on GitHub With Jekyll

Git and GitHub

• Install git: `sudo apt-get install git`
• Create an account on GitHub: https://github.com
• Create a repository named: username.github.io

GitHub Pages

• See: https://pages.github.com/

  git clone https://github.com/username/username.github.io
  cd username.github.io
  echo "Hello World" > index.html
  git add --all
  git commit -m "Initial commit"
  git push
  

• Use the "Automatic page generator" of GitHub

How it works

• Github uses Jekyll for the pages: http://jekyllrb.com/
• Jekyll can convert to HTML Markdown or Textile content.
• We can use a Jekyll theme from the ones avaiable at: http://jekyllthemes.org/
• In this training we will use the theme named SinglePaged:
  • http://t413.com/SinglePaged
  • https://github.com/t413/SinglePaged

Setup the SinglePaged theme

• Delete the github project that we created previously.
• Fork this project: https://github.com/t413/SinglePaged
• Rename it to username.github.io
• Clone your repository:

  git clone https://github.com/username/username.github.io
  cd username.github.io
  

Setup the right git branch

• Fix the publish branch:

  git checkout publish
  git branch -m master
  git push -u origin master 
  git branch -D gh-pages
  

• On the github project page go to settings and change the default branch to master.
• Delete the branch gh-pages:

  git push origin --delete gh-pages
  git branch -d gh-pages
  

Customize your website

• 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 another section on the page

• 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: http://fortawesome.github.io/Font-Awesome/icons/

Test the website locally

• Pull your changes on GitHub: git pull
• Install Jekyll:

  sudo apt-get install ruby ruby-dev build-essential nodejs
  sudo gem install github-pages
  

• Start a server with: jekyll serve -w
• Visit http://localhost:4000 to see a live locally served preview.
• Make changes and test them, and finally push them to GitHub:

  git push -u origin master
  

Markdown basics

• Headings (#, ##, ###, etc.)
• Paragraphs, quotes, code samples, etc.
• Lists (unordered and ordered)
• Bold, italic, hyperlinks, images, etc.
• HTML tags.

See also: https://stackedit.io/editor

Setting your own domain name (optional)

• Configure a custom subdomain with your DNS provider, for example: www.yourname.info
• Create the file CNAME with the domain in it:

  www.yourname.info