Webiste hosting with GitHub and Publii

Presentation given at the KPN internal GroSkills event.

The presentation is in Dutch but most of the images should be readable for the non-Dutch.

Topics of this presentation include static websites, hosting on GitHub, GitLab or BitBucket, Hugo, MkDocs and Publii.

Transcript

1. Website hosting met GitHub
2. Een eigen website? Wordpress, Joomla, Drupal Jekyll, Hugo Nog geen website Waarom zou ik dat willen?
3. Wat is een website? Het eindproduct wordt getoond in een browsert maar wat gebeurt er onder water: HTML CSS JavaScript Webserver (host) Statische content, plaatjes e.d. Dynamische content, code
4. Content Management Systeem Online CMS: Dynamische websites Offline CMS Statische websites
5. Dynamische websites Wordpress Joomla Drupal etc.
6. Statische website?
7. Statische website: geen database back-end pagina's bestaan uit: HTML CSS client-side JavaScript content is statisch betere caching betere performance veilig
8. Voorbeeld sites devNetNoord WabiSabi 't is goud
9. Static Site Generators A List of Static Site Generators for JAMstack Sites StaticGen
10. CMS for Static Sites A List of Content Management Systems for JAMstack Sites Headless CMS
11. JAMstack noun \â​​jam-stakâ​​\ Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. JAMstack
13. Website hosting, de mogelijkheden ... Eigen server hosten Webserver als dienst Website als dienst Website genereren als dienst GitHub Pages, GitLab Pages of BitBucket Pages
14. Eigen server? Beveiliging? Hoe richt je je server in? Waar staat je server? Heb je voldoende bandbreedte?
15. Webserver als dienst? Beveiliging? Hoe richt je je webserver in? Welke hoster kies je? Wat kost het om je server te hosten?
16. Website als dienst? Welke hoster kies je? Wat zijn de mogelijkeden? Inclusief SSL certificaat? Kosten?
17. GitHub, GitLab of BitBucket Online code repositories Wat is de link met website hosten?
19. Git Git is a distributed version-control system for tracking changes in source code during so"ware development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-linear workflows. [Wikipedia]
20. Git clone Het ophalen van bestanden uit een repository Een voorbeeld ... git clone https://github.com/repository/project.git $ git clone https://github.com/repository/project.git project Cloning into 'ananke'... remote: Enumerating objects: 17, done. remote: Counting objects: 100% (17/17), done. remote: Compressing objects: 100% (15/15), done. remote: Total 1349 (delta 3), reused 13 (delta 2), pack-reused 1332 Receiving objects: 100% (1349/1349), 4.14 MiB | 155.00 KiB/s, done. Resolving deltas: 100% (722/722), done.
21. Git pull Het ophalen van de laatste versie van een lokaal bestaand project $ git pull
22. Git commit Het documenteren van wijzigingen $ git commit -m "typo in de pagina titel aangepast"
23. Git push Het uploaden van de lokale wijzigingen naar de repository $ git push
24. Is Git kennis echt nodig? Ja Nee Hangt ervan af...
25. Webhosting bij een GitRepo GitHub GitLab BitBucket
26. GitHub yoursite.github.io GitHub Pages
27. GitLab yoursite.gitlab.io GitLab Pages
28. BitBucket yoursite.bitbucket.io Publishing a Website on Bitbucket Cloud
29. Offline CMS Website lokaal genereren en uploaden. Wat zijn de mogelijkheden? Jekyll, meest populair Hugo, verreweg de snelste MkDocs, gericht op documentatie Publii, makkelijk in gebruik
30. Jekyll Geschreven in Ruby https://jekyllrb.com
31. Hugo Geschreven in Go(lang) https://gohugo.io
32. Hugo website Documentatie Thema keuzes https://gohugo.io
33. MkDocs
34. Geschreven in Python www.mkdocs.org
35. MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.
36. Publii a new Static CMS with GUI to build an extremely safe, fast and stylish HTML website. Publii is a static-website-building tool for every skill level, from beginner to developer. getpublii.com
37. Publii demo
38. Publii first page
39. Bedankt voor jullie aandacht! wat is jouw volgende stap?