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.

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

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

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

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

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:

• Windows: http://jekyll-windows.juthilo.com/
• OSX or Linux: http://jekyllrb.com/docs/installation/

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 $HOST
6. Click "Preview with Web Server"

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.

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.

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.

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

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

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

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

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 [email protected]:username/username.github.com.git
git push origin master

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 [email protected]:username/username.github.com.git
git push origin master

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

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.

• http://bootswatch.com/
• http://startbootstrap.com/
• http://bootstrapzero.com/

• http://html5up.net/
• http://themeforest.net/search?term=profile
• http://speckyboy.com/2014/03/07/30-free-responsive-html-templates/
• http://www.devfloat.com/best-free-modern-blogger-templates/
• http://makeitcg.com/minimalist-blogger-templates/2789/
• http://webdesignmoo.com/2014/20-free-blogger-templates-2014/

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

• http://briangardner.com/google-font-combinations/
• http://hellohappy.org/beautiful-web-type/
• http://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html

• https://github.com/mmistakes/minimal-mistakes
• https://github.com/jenmyers/jekyll-kickoff
• https://github.com/chibicode/jekyll-base-template
• https://mmistakes.github.io/hpstr-jekyll-theme/theme-setup/

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

• Online Blog Writer for Github: You can now write your first post with an online editor like prose.io or just use Github directly.
• Install Jekyll on Windows: http://jekyllrb.com/docs/windows/
• Using Jekyll and Poole for building a minimal blog: http://joshualande.com/jekyll-github-pages-poole/
• Creating a Archive page with Jekyll: http://reyhan.org/2013/03/jekyll-archive-without-plugins.html
• Monster workshop about creating templates with Bootstrap 3: http://www.prideparrot.com/blog/archive/2014/4/blog_template_using_twitter_bootstrap3_part1

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.

• http://michaelburri.ch/
• http://marcjuch.li/
• https://emanuelduss.ch/
• https://dbrgn.ch/
• http://theowinter.ch/ and http://ghoul.io/
• http://scythe.ch/
• https://sbaerlocher.ch/
• http://www.patrickdoerig.ch/
• http://kapferer.ch/
• http://lukasmartinelli.ch/

• http://www.gcardoso.pt/
• http://botondraduly.com/
• http://www.haveyoumetjanet.ca/
• http://www.jacobgrubbe.com/
• http://michaelvilleneuve.fr/
• http://haraldurthorleifsson.com/
• http://lisher.net/
• http://michieldegraaf.com/

• http://contra.io/
• https://alexgaynor.net/
• http://sarajchipps.com/
• http://briantford.com/
• http://ejohn.org/
• http://maxogden.com/
• http://davidwalsh.name/
• https://alexsexton.com/
• http://jenmyers.net/
• http://www.hanselman.com/
• http://www.joshuanaylor.com/resume.html
• http://balupton.com/
• http://ednapiranha.com/
• http://ginatrapani.org/
• http://blog.codinghorror.com/

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.

• Lukas Martinelli @lukasmartinelli
• Manuel Roth @manuelroth
• Samuel Kurath @Murthy10
• Fabian Keller @fabiankeller
• Özhan Kaya @Fizzzo42
• Kevin Schmidiger @kschmidi
• Silvan Habegger
• Florian Merz @flomerz
• Josip Valencic
• Oussama Zgheb
• Patrick Raths
• Werner Cheung
• Marino Melchiori @mrevO
• Konrad Höpli @khoepli
• Stefan Kapferer @stefan-ka
• Jeyanthan Ravindran
• Simon Schaefer
• Janic Mikes @janicmikes
• Lukas Steiger
• Valentina Quni
• David Windler
• Andrea Hauser
• Raffael Ioannone @RaffaelIoannone
• Roberto Cuervo Alvarez
• Philippe Naegeli
• Rolf Furrer
• Philip Schmid
• Matthias Gabriel
• Philipp Walder
• Stefano Kals
• Tobias Schmitz
• Arianna Blanco
• Oliviero Chiodo
• Joël Egger
• Arian Gagica
• Simon Heller
• André Bachmann