Architecture
The Architecture.md file describes and centralizes the architecture and general implementation details of the shellsharks.com site. Read more about ARCHITECTURE.md here.
High-Level Architecture
The site is built on GitHub Pages, which leverages the static site engine Jekyll, which in turn uses Liquid as its templating language. I have a paid GitHub Personal/Pro subscription which allows my shellsharks.github.io repo (the one my site is built from) to be private. Builds & Deployments are performed via GitHub Actions, and not the traditional Pages Deploy-from-a-branch method. DNS is managed by GoDaddy. Object storage (i.e. most images, hosted files, etc…) is within AWS S3. All my writing is performed on my desktop computer & tablet listed here (with occasional updates directly from my phone).
A data-flow view which describes system layers/boundaries:

Architecture Component List
- GitHub Pages + GitHub Actions + Jekyll + Liquid + Ruby
- GoDaddy DNS
- AWS S3
- Writing hardware listed on /Uses
- Writing software:
- Desktop: Visual Studio Code, Git (Homebrew)
- Tablet: Textastic, Working Copy, 1Writer
Design Walkthrough
This section walks through more granular architectural items.
- The humans.txt file is maintained and lists information about who runs the site, some inspirations and details around how it is hosted.
- My site is proudly IndieWeb. An indieweb.txt file is maintained per the spec.
- The site theme was built originally used the Agus Makmun Jekyll theme. Since then, it has been heavily modified with a lot of custom CSS, HTML, JavaScript and novel Jekyll configurations.
- The Statboard requires dynamic refreshing. This has been achieved via GitHub Actions as described here. It also requires some use of jQuery for dynamic fetching of page content from other shellsharks pages
- A tablet-based writing workflow I have has been described in detail here.
- Read more on the syndication strategy for how posts are shared to and pulled back from other places on the Internet (e.g. social media, thread-based platforms, etc…)
- Third-parties leveraged by the site are maintained using pubvendors.json
- Site-wide iconography brought to Shellsharks via Phosphor
- A visual history of the site
- Other things I use tangential to the architecture of this site is maintained in my /Uses page
- The Website Component Checklist lists all components of the site. The purpose of these components are briefly described below…
- A Webfinger endpoint is exposed to redirect ActivityPub requests in the Fediverse to my main Mastodon account @[email protected]
- How the site is styled can be seen in the Style Guide
- Site-wide search is built using lunr.js
- robots.txt allows traditional search engine indexing but aggressively disallows AI-related bots
- RSS feeds are aggregated in /feeds
- I publish a wide variety of content here in multiple formats, read more about this here
- Read more on the shellsharks License. I encourage sharing my work and using it to build more useful content. I politely ask that you give credit for any work inspired by mine
- The site has no cookies or tracking capabilities whatsoever
- Most non-trivial changes to the site are catalogued in the Change Log
Design-wise the latest architectural revision of the site sports a dynamic, mobile-friendly 5-pane design. A header at the top, nav section on the left, main section for body content, sidebar section on the right & a sticky footer section at the bottom.
<body>
<div class="container">
<heading class="container_item">
<!-- Header content -->
{% include header.html %}
</heading>
<nav class="container_item">
<!-- Navigation -->
</nav>
<main class="container_item">
<!-- Main content -->
{{ content }}
</main>
<aside class="container_item">
<!-- Sidebar / Ads -->
</aside>
<footer class="container_item">
<!-- Footer content -->
{% include footer.html %}
</footer>
</div>
The folder structure for my shellsharks.github.io repo looks like…
.
├── 404.html
├── CNAME
├── _captain_logs
├── _config.yml
├── _includes
├── _layouts
├── _notes
├── _posts
├── _site
├── about.md
├── ai.txt
├── architecture.md
├── assets
│ ├── css
│ ├── img
│ ├── js
│ └── other
├── blog.html
├── blogroll.md
├── changelog.md
├── contact.md
├── disclaimer.md
├── donate.md
├── fediverse.md
├── feeds
├── humans.txt
├── ideas.md
├── index.html
├── indieweb.txt
├── more.md
├── notebook.md
├── now.md
├── podcast.md
├── pro.md
├── public.pgp
├── referrals.md
├── resume.md
├── roadmap.md
├── robots.txt
├── search.md
├── security.txt.md
├── sharkinfestedwaters.md
├── sharkweek
├── sharkweek.md
├── sitemap.xml
├── starsharks.md
├── statboard.md
├── style.md
├── tags.md
├── toots
│ └── infosec-exchange
│ └── shellsharks
│ ├── actor.json
│ ├── avatar.png
│ ├── bookmarks.json
│ ├── index.html
│ ├── likes.json
│ ├── media_attachments
│ │ └── files
│ └── outbox.json
└── uses.md
Architectural Invariants, Concerns, Future Items
A discussion on what is notably absent from the site and what the future holds. A limited roadmap of proposed upcoming features has been made available.
- A lot of work is left to be done to build out nav & sidebar (left/right) panes with useful information.
- Accessibility improvements are much needed
- Lunr.js search is a big improvment over super-search but there is still much to be desired
- An all-emcompoassing mega feed would be a great addition, specifically doing more in a dynamic fashion (rather than a manual one) to PESOS content here
- The site code desperately needs to be cleaned up and better-commented. This especially goes for sloppy hand-made CSS
- Other ideas for the site and beyond can be seen here