Generated using Hugo and deployed to Cloudflare Workers Sites.
- Production website: https://console.dev
- Test environment: https://test.console.dev (behind Cloudflare Access)
- Deploy action
For any site development that doesn't require modifying Cloudflare Workers code, you only need Hugo:
- Install Hugo.
- Two options:
- Run
./dev.shto start the Hugo server on localhost. - Run
./dev.sh xxx.xxx.xxx.xxxto test from other devices on local network (such as iPhone), wherexxx.xxx.xxx.xxxis the local IP of the machine running the Hugo server.
- Run
- Launch the URL in your browser. It will watch for changes and auto refresh the browser.
We use Trunk to handle linting across all files. This runs in CI but you can install it as a Git hook:
cat >>.git/hooks/pre-push <<EOF
# This is required to accept user input from the keyboard.
exec < /dev/tty
trunk check --trigger=git-push
EOF
chmod +x .git/hooks/pre-push- .jpg
- 1600x1600px
- 300kb max
- Centered subject, square ratio (if possible)
- .svg, .png, .jpg
- 1600x1600px
- 300kb max
Text (what)
- 70 characters max
headerType:fixedorfalse- When fixed the header will show on top on scroll.hideLines:trueorfalse- Hides the finer lines from the page.hidePlanes:trueorfalse- Hides the planes grid from the page.isPage: a string defining the page fragment used for the body css class, custom stylesheet definition, menu item activation and assets location.isSubpage: a string defining the subpage fragment used for the body css class, custom stylesheet definition, menu item activation and assets location.customStyle:trueorfalse- Will expect and load a custom style based on theisPagestring.pageType:feature,article,vendor-review, seecss/pageType/... - Defines a custom class for the<body>and<main>page elements.customPageStyle:trueorfalse- Will expect and load a custom stylesheet based on thepageTypestring.xlViewport: segment for specifying style classes for xl viewports.largeText:trueorfalsewill enable text size increase on xl viewports.
There are several custom Hugo shortcodes that can be used in templates:
| Shortcode | Example |
|---|---|
| Link | {{< a-link url="consoledotdev" text="see what we're building" icon-left="github" icon-right="github" >}} |
| Button | {{< a-button url="/about/" text="About" title="View About page" is-text="true" size="null (large)||medium||small" icon-left="arrow-right" icon-right="arrow-right" >}} |
| Caption Div | {{< div-caption >}}Markdown formatted text to appear in the caption.{{< /div-caption >}} |
| Centered Image | {{< img-center src="/img/interviews/stackhawk-scott-gerlach-product.png" alt="StackHawk product screenshot" width="100%" caption="The StackHawk vulnerability scanning dashboard." >}} (Caption optional) |
| 2-column Image | {{< img-2col src1="/img/david.jpg" alt1="David Mytton" src2="/img/max.jpg" alt2="Max Jennings">}} |
| Subscribe Box | {{< section-subscribe> }} |
| Image Modal | {{< modal-custom type="screen" type-screen="/img/browser-testing/browserstack-webtesting.png" >}}{{< img-custom class="content-image" src="/img/browser-testing/browserstack-webtesting.png" alt="Screenshot of web testing with BrowserStack." >}}{{< a--close >}} |
Set up a Python venv:
python3 -m venv .venv
source .venv/bin/activate
pip3 install -r requirements.txtFor production builds, the JSON source is retrieved using the
gsheet.action GitHub
Action. In development, example JSON files are provided in /tests/ and
pre-generated examples are already in /themes/console-home/data/.
To generate new examples into /data/:
python parseTools.py --tools-json themes/console-home/data/toolsallraw.json --beta-json themes/console-home/data/betasallraw.json --ignore-date YESFor testing how the site will be served live and/or for development with Cloudflare Workers:
- Set up Hugo as described above but have Hugo build the static site rather
than using Hugo server:
hugo -D - Install Cloudflare Wrangler.
wrangler preview --watch
hugo
wrangler publish --env testAvailable at: https://test.console.dev
Automatic deployment: run
workflow
and enter production as the deployment environment.
The Github Action also gets the latest newsletter content and saves the files to
the /data/ directory. If no data files exist in that directory, the test files
from /themes/console-home/data/ will be used instead.
We use k6 to define performance SLAs. These are run on every commit using GitHub Actions but they can also be run locally after installing k6:
hugo
wrangler publish --env perftest
k6 run tests/perf.jsThis tests against https://test.console.dev authenticated using service tokens.
The Google Service Account is used by gsheet.action to pull the contents of the beta programs source Google Sheet. The Google Sheets API is enabled for the Service Account.
CF_API_TOKEN- Cloudflare API token to deploy.CF_CLIENT_ID- Cloudflare Access service token ID fortest.console.dev. Used in k6 tests.CF_CLIENT_SECRET- Cloudflare Access service token secret fortest.console.dev. Used in k6 tests.GSHEET_CLIENT_EMAIL- email of the Google Service Account.GSHEET_PRIVATE_KEY- private key of the Google Service Account. Download JSON then extract private key component.