Setup for Lighthouse CI (#2)

.github/workflows/build.yaml

@@ -40,9 +40,14 @@ jobs:
           npm install --clean
           npm run workbox-generate
 
-      - name: Upload artifact
-        # Automatically uploads an artifact from the './_site' directory by default
+      - name: Upload artifact for GitHub pages
         uses: actions/upload-pages-artifact@v3
         with:
-          name: 'github-pages-build'
+          name: 'github-pages'
+          path: "src/_site/"
+
+      - name: Upload artifact for CI
+        uses: actions/upload-artifact@v4
+        with:
+          name: 'build'
           path: "src/_site/"

.github/workflows/ci.yaml

@@ -0,0 +1,54 @@
+name: Continuous integration
+
+on:
+  push:
+    branches-ignore: deploy/gh-pages
+
+jobs:
+  lighthouse:
+    # A tool to measure website performance. See also:
+    # - https://github.com/GoogleChrome/lighthouse
+    # - https://github.com/GoogleChrome/lighthouse-ci
+    # - https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md
+
+    name: Lighthouse
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.3"
+          bundler-cache: true
+          cache-version: 0
+          working-directory: "${{ github.workspace }}/src"
+
+      # We need a development version because we need a base url of '' (empty string)
+      - name: Build the development version of the site
+        run: |
+          npm ci
+          npm run build-dev 
+
+      - name: Setup service worker
+        run: | 
+          npm run workbox-generate
+
+      - name: Run lighthouse
+        run: |
+          npm run lighthouse
+  
+      - name: Upload Lighthouse report
+        uses: actions/upload-artifact@v3
+        with:
+          name: lighthouse-report
+          path: .lighthouseci
+
+          # we need this because the folders/files start with a `.` which is considered to be hidden on Linux
+          include-hidden-files: true

.github/workflows/config/lighthouserc.json

@@ -0,0 +1,12 @@
+{
+  "ci": {
+    "collect": {
+      "staticDistDir": "./src/_site"
+    },
+    "assert": {},
+    "upload": {
+      "target": "filesystem",
+      "outputDir": ".lighthouseci"
+    }
+  }
+}

.github/workflows/deploy.yaml

@@ -35,4 +35,4 @@ jobs:
         id: deployment
         uses: actions/deploy-pages@v4
         with:
-          artifact_name: github-pages-build
+          artifact_name: github-pages

.gitignore

@@ -16,6 +16,10 @@ Gemfile.lock
 
 *.gem
 
+# -- Lighthouse -- 
+
+.lighthouseci
+
 # -- Files generated by OS --
 
 .DS_Store

README.md

@@ -13,6 +13,8 @@ This repository contains the source of a proposal for an alternative news hub fo
 
 - [Node Package Manager](https://nodejs.org/en/download/package-manager)
 - [Workbox](https://fredrickb.com/2019/07/25/turning-jekyll-site-into-a-progressive-web-app/) Tooling to generate information required for a progressive webapp
+- [Lighthouse](https://github.com/GoogleChrome/lighthouse): tooling to measure website performance, is integrated in Chrome developer tools
+  - [Lighthouse-ci](https://github.com/GoogleChrome/lighthouse-ci): wrapper to make it easier to do automated testing on website performance
 
 ## Branches
 
@@ -23,9 +25,12 @@ This repository contains the source of a proposal for an alternative news hub fo
 
 - [Turning a Jekyll site into a Progressive Web App](https://fredrickb.com/2019/07/25/turning-jekyll-site-into-a-progressive-web-app/)
 - [Generating a site map](https://independent-software.com/generating-a-sitemap-xml-with-jekyll-without-a-plugin.html)
+- [Simple cookie consent](https://jekyllcodex.org/without-plugin/cookie-consent/)
+- [Jank-free page loading with media aspect ratios](https://blog.logrocket.com/jank-free-page-loading-with-media-aspect-ratios/)
 
 ### Additional tooling
 
 - [Progressive Web App Builder](https://www.pwabuilder.com/)
 - [Web app manifest generator](https://app-manifest.firebaseapp.com/)
 - [SVG Icon Font generator](https://icomoon.io/app)
+- [Favicon generator](https://realfavicongenerator.net/)