This repository has been archived by the owner. It is now read-only.
"Create your own website" Hackathon at HSR
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
.gitignore
README.md
package.json
screenshot.png
server.js

README.md

yow-hackathon

Join the chat at https://gitter.im/lukasmartinelli/yow-hackathon

yow Hackathon

Jeder Entwickler sollte einen Blog oder eine Portfolio Website haben um sich zu präsentieren und von der breiten Masse abzuheben.

Wir werden uns am Montag 23. Februar ab 17:00 im Raum 1.277 treffen um zusammen an unserem persönlichen Webauftritt zu arbeiten. Melde dich auf http://yow-hackathon.lukasmartinelli.ch an.

Ziel des Hackathons ist es, das am Ende alle eine eigene Seite und Domain haben und z.B einen einfachen Entwickler Blog mit Tools wie Github Pages aufgesetzt haben. Du bist natürlich auch willkommen, wenn du bereits mit deiner Website begonnen hast und Unterstützung oder Feedback brauchst.

Ich werde dieses Repo im Laufe der Woche mit zusätzlichen Materialien ergänzen, Pull Requests sind natürlich willkommen.

Ablauf

Zeit Ablauf
17:00 Welcome in Raum 1.277
17:15 Intro
17:30 Templates / Designs aussuchen und verwenden
18:00 1. Ziel: Einfache statische Site öffentlich erreichbar
18:00 Pizzabestellung aufnehmen
19:00 Ess- und Trinkpause 🍕
19:30 Dynamische Blog Posts mit Github Pages (Jekyll)
20:00 2. Ziel: Blog aufsetzen
21:30 Aufräumen
22:00 Protectas wirft uns raus

Get started

Terms

GitHub Pages

You can host a static website directly from your repository with Github Pages. Read a longer introduction if you want to skip ahead.

Git

Git is the most popular version control system today. It is hard to master but you can read the simple guide to get started.

Static Site Generator

The first choice for creating a personal website or a blog for non-programmers is WordPress. But do you really need a PHP webserver just to host your static little site?

A static site generator transforms plain text and templates into a static website. Advantages of a static site:

  • Simplicity
  • Fast
  • Minimal (no database and no CMS) and secure
  • No hosting fees

Markdown

Markdown is everywhere nowadays. Markdown is a way to style text (like Latex or reStructuredText). Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *. You can master markdown in 3 minutes with this quick introduction.

Create a page

  1. Register at GitHub
  2. Setup Git
  3. Follow the steps in this tutorial and create a repository named username.github.io.

Setup Local Developer Environment

Using Github Pages with Jekyll uses Ruby - which is easy to set up as long you are not using Windows 😏. You can either setup the environment yourself or use Cloud9 or Vagrant. If you just building a static site you can skip this seciton for now.

Setup the environment yourself:

Use Cloud9

You can use Cloud9 to develop without installing anything on your machine.

  1. Register at Cloud9 with your Github credentials
  2. Choose your username.github.io repo
  3. Click "Clone to edit" and choose the "Ruby on Rails" if you want to use Jekyll
  4. Install Jekyll: gem install github-pages
  5. Run in command line: jekyll serve --port $PORT --host $IP
  6. Click "Preview with Web Server"

Use Vagrant

What is Vagrant? Vagrant let's you create portable development environments.

  1. Install Vagrant
  2. git clone https://github.com/kappataumu/vagrant-up-github-pages.git
  3. In bootstrap.sh replace XXX with the URL for your GitHub pages repo
  4. vagrant up
  5. visit http://localhost:4000

You should know have a subfolder /www containing your GitHub pages repo that is kept in sync with the Vagrant image. Use the editor of your choice (e.g. Sublime, notepad++, Atom or Brackets) to edit the files.

Design and Templates

You can build up your blog step by step from a static template (greater learning effect) or jump directly into Jekyll and use a ready made template.

Get some Inspiration

Think about what your website is about and how it should look like. If you are like me and lacking a bit of imagination it helps alot to browse websites and templates of other people and get some inspiration or simply steal ideas.

I prepared a little list of websites to look at. Please add your own awesome sites to the list.

Inspect other pages

Use the Chrome Devtools or the Firefox Developer Tools to inspect your favorite sites and mix and match.

Use static template

Download a static template and put it in your repo or start from scratch. I listed some template resources below.

Jekyll

The most popular static site generator is Jekyll which also runs on Github (it has been written by GitHub CEO Tom Preston-Werner).

Jekyll and Poole

Poole is a very simple Jekyll starter template. Hyde and Lanyon are offical Poole themes you can use.

Choose one and clone the template into your repo:

  • Pole: git clone https://github.com/poole/poole.git username.github.io
  • Hyde: git https://github.com/poole/hyde.git username.github.io
  • Lanyon: git clone https://github.com/poole/lanyon.git username.github.io

Cloud9 Tricks

If you are using Cloud9 I recommend deleting the workspace folder and cloning the template into the workspace folder.

cd ..
rm -r workspace
git clone https://github.com/poole/poole.git workspace`

Now set the remote url back to your own custom repo and push the changes:

cd username.github.io
git remote set-url origin git@github.com:username/username.github.com.git
git push origin master

Jekyll and Twitter Bootstrap

Twitter Bootstrap is a HTML & CSS framework to get started quickly. Just try, google and copy paste.

If you really want to learn some HTML and CSS I would try to stay away from Twitter Bootstrap for now. But you can use the jekyllbootstrap template to get up and running in 3 minutes.

git clone https://github.com/plusjade/jekyll-bootstrap.git username.github.io
cd username.github.com
git remote set-url origin git@github.com:username/username.github.com.git
git push origin master

After a couple minutes your blog will be publicly available at http://username.github.com

Custom domain

If you don't have a domain but got the Github Student pack you can register a .me domain for free.

The easiest way to setup a custom domain with GitHub Pages is a CNAME record.

Materials

Free Twitter Bootstrap Templates

Free HTML Blog Templates

Fonts

Minimalism and typography make great technical websites. The best way to use free web fonts is Google Fonts.

Ready made combinations (because we know nothing about typography):

Other Jekyll starter templates

Blogging Essentials

  • Use Google Analytics
  • Make sure you are found (check for search terms from the start)
  • Spread your content via Twitter, Reddit and Hackernews

Links

Dynamic Elements

Comments: Use Disqus for comments and embed it into your sites.

Forms: Do you really need a contact form? Perhaps a simple mail address will be just as good. However there are form generators like Wufoo. You can also try out Simple Form.

Search: People don't want to use your custom search! Just make sure you can be found via Google.

Inspiration Links

Websites of HSR Students

Good Looking Portfolio Sites

Other Dev Blogs

Attendees

I will reference the great pages you will build in the list below. Please notify me if you don't want to appear on the list.