Building Our Website on GitHub With Jekyll

Dashamir Hoxha


Git and GitHub

  • Install git: `sudo apt-get install git`
  • Create an account on GitHub:
  • Create a repository named:

GitHub Pages

  • See:
    git clone
    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

Setup the SinglePaged theme

  • Delete the github project that we created previously.
  • Fork this project:
  • Rename it to
  • Clone your repository:
    git clone

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 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 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:

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:

Setting your own domain name (optional)

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