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.
| 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 |
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.
- Register at GitHub
- Setup Git
- 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.
- Register at Cloud9 with your Github credentials
- Choose your
username.github.iorepo - Click "Clone to edit" and choose the "Ruby on Rails" if you want to use Jekyll
- Install Jekyll:
gem install github-pages - Run in command line:
jekyll serve --port $PORT --host $HOST - Click "Preview with Web Server"
What is Vagrant? Vagrant let's you create portable development environments.
- Install Vagrant
git clone https://github.com/kappataumu/vagrant-up-github-pages.git- In
bootstrap.shreplaceXXXwith the URL for your GitHub pages repo vagrant up- 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://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