Webiste hosting with GitHub and Publii

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.

107bf3f27c9ed8aa6bfa3ef4d718df04?s=128

Albert W. Alberts

June 20, 2019
Tweet

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
  12. None
  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?
  18. None
  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?