GitHub Actions to generate complex static web sites

• Meetup

What are “GitHub Pages”?

• Create a static site from Markdown files in a branch. (Use the main branch and the docs/ subfolder) Use https://github.com/cm-demo for this
  • New repository cm-demo.github.io / Public / Add README
  • Settings / Pages (no need to do anything)
  • Visit

  • Edit the README.md add some text (e.g. “This is the README” )

  • We can see the process in the actions entry

  • Settings / Pages /
    • Source: Deploy from branch
    • Branch: main , /docs
  • Create docs/index.md file (write something like “this page is generated from docs/index.md”)
  • Visit
• User your own subdomain
  • Visit https://workshops.code-maven.com/
  • It’s source is at https://github.com/szabgab/workshops
  • It is in the /docs folder. There are some other things outside. (code generating banners for Meetup, thumbnails for the YouTube videos)
  • CNAME
  • DNS mapping at https://iwantmyname.com/
  • _config.yml (theme etc.)

  • _layouts

  • Visit https://szabgab.github.io/ (it redirects to https://github.szabgab.com/ )
• Convert it to a site generated by GitHub Actions using Static HTML
  • Settings / Pages
  • source: GitHub Actions (beta)
  • Static HTML: Configure
    • This will create a workflow YAML file in .github/workflows
  • Create a file called /index.html

  • Visit

  • Remove the workflow file and the index.html as we won’t need them

  • See Perlweekly.com and its source where the HTML pages are generated locally.
    • This does not even need the action we created.
• Convert it to a site generated by GitHub Actions using Jekyll
  • What is Jekyll? It can transform Makrdown to HTML just like Dr. Jekyll and Mr. Hyde
  • Settings / Pages
  • source: GitHub Actions (beta)
  • GitHub Pages Jekyll: Configure
    • This will create a workflow YAML file in .github/workflows
  • Visit
  • Visit the docs
• Change the site to be generated by our own code
  • Edit the .github/workflows/jekyll-gh-pages.yml file
    • rename it
    • replace the Jekyll action by the following:

            - name: Build by myself
              run: |
                mkdir _site
                echo "Hello from Shell" > _site/index.html
    

• From this point you can build anything using any programming language.

• CPAN Digger
  • It has many steps testing the code first and there are several calls to the script that generates parts of the site.
• Ruby Digger
  • This one commits the collected data back to the repository.
  • This is a left over from the era when we could not yet use GitHub Actions to deploy a page.
  • I’d change it, except in the docs/update.log we collect historical data.
• Forem monitor
  • Collects data
  • Stores raw data in the data folder.
  • Builds the site in the _site folder
  • Deploys the pages.
• Kantoniko
  • Kantoniko GitHub organization
  • The repo that builds the web site kantoniko.github.io
  • It checks out all the other repositories that contain the code and the manually edited data and then runs the code.
  • Push to any other repository triggers the build on this one. e.g. whatsapeando
• Open Source by Organizations
  • source
  • Manually edited data
  • Python program collecting more data and saving them in the cache folder generating the HTML files from them.
  • Using the GitHub Actions caching reseting it once every day to avoid downloading the same data too frequently, but to also avoid having stale data.
• OSDC instances
  • Each course has its own GitHub repository
  • There is a repository with GitHub Action
  • Using the cache is problematic.

Videos in Hebrew

• Part 1
• Part 2