./ Cybersecurity Sacramento (DC916)

./Cybersecurity Sacramento (DC916)

Belonging is the very best thing there is

DC916 Website Structure

This document provides a detailed overview of the DC916 website’s architecture, explaining how different components interact and how the site is organized.

Table of Contents

Overall Architecture

The DC916 website is built using Jekyll, a static site generator. The site follows a component-based architecture where content is separated from presentation:

flowchart TD
    A[Content Files] --> B[Jekyll Build Process]
    C[Layouts & Templates] --> B
    D[Assets] --> B
    E[Configuration] --> B
    B --> F[Static HTML Site]
    F --> G[GitHub Pages]
    G --> H[Public Website]

The key components are:

  1. Content Files: Markdown files with YAML front matter
  2. Layouts & Templates: HTML templates that define the structure
  3. Assets: CSS, JavaScript, and images
  4. Configuration: Jekyll configuration in _config.yml
  5. Build Process: Jekyll transforms the content into a static site
  6. Deployment: GitHub Pages hosts the static site

Directory Structure

The site follows this directory structure:

Cybersecurity-Sacramento/
├── _config.yml              # Jekyll configuration
├── _includes/               # Reusable HTML components
│   └── head-custom.html     # Custom head content
├── _layouts/                # Page templates
│   └── default.html         # Main layout template
├── _site/                   # Generated site (not in repo)
├── assets/                  # Static assets
│   ├── css/                 # Stylesheets
│   │   └── style.scss       # Main stylesheet
│   ├── js/                  # JavaScript files
│   │   ├── console-effect.js # Terminal typing effect
│   │   └── main.js          # Main JavaScript functionality
│   └── images/              # Image files
├── resources/               # Resource files
│   ├── pages/               # Resource category pages
│   └── [resource files]     # Various resource files
└── [content pages].md       # Markdown content pages

Key Files and Their Purposes

  • _config.yml: Defines site-wide settings, collections, and plugins
  • _layouts/default.html: The main template that wraps all pages
  • _includes/head-custom.html: Custom content for the <head> section
  • assets/css/style.scss: Main stylesheet with CSS variables and styles
  • assets/js/console-effect.js: JavaScript for terminal typing effects
  • assets/js/main.js: General JavaScript functionality
  • index.md: The home page content
  • resources.md: The resources hub page
  • resources/pages/*.md: Individual resource category pages

Page Types

The site includes several types of pages:

graph TD
    A[Pages] --> B[Standard Pages]
    A --> C[Resource Pages]
    A --> D[Special Pages]
    
    B --> B1[Home Page]
    B --> B2[Directory]
    B --> B3[Projects]
    B --> B4[Leadership]
    
    C --> C1[Resources Hub]
    C --> C2[Resource Categories]
    
    D --> D1[404 Page]
    D --> D2[Road to DEFCON]

Standard Pages

Standard pages use the default layout and contain general content:

  • Home Page (index.md): Introduction to DC916
  • Directory (Directory.md): Community directory
  • Projects (Projects.md): Projects showcase
  • Leadership (Leadership.md): Team information
  • Code of Conduct (CoC.md): Community guidelines
  • Donations (Donations.md): Donation information
  • Giveaways (Giveaways.md): Giveaway information

Resource Pages

Resource pages are part of the resources system:

  • Resources Hub (resources.md): Main entry point for resources
  • Resource Categories (resources/pages/*.md): Individual resource categories

Special Pages

Special pages have unique functionality:

  • 404 Page (404.md): Custom error page
  • Road to DEFCON (road-to-defcon.md): Special event page

Template System

The template system uses Jekyll’s layouts and includes:

graph TD
    A[default.html Layout] --> B[Page Content]
    C[head-custom.html Include] --> A
    D[Front Matter] --> B
    E[Markdown Content] --> B

Layout Structure

The default.html layout defines the overall page structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags, title, CSS -->
  <!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=VT323&display=swap" rel="stylesheet">

<!-- Meta tags -->
<meta name="description" content="Cybersecurity Sacramento (DC916) - A DEF CON group for hackers, makers, tinkerers and security enthusiasts in the Sacramento area.">
<meta name="keywords" content="cybersecurity, sacramento, defcon, dc916, hacking, security, infosec">
<meta name="author" content="Cybersecurity Sacramento">

<!-- Open Graph / Social Media -->
<meta property="og:title" content="DC916 Website Structure">
<meta property="og:description" content="A DEF CON group for hackers, makers, tinkerers and security enthusiasts in the Sacramento area.">
<meta property="og:image" content="https://dc916.com/assets/images/hackthebeamsmaller.jpeg">
<meta property="og:url" content="https://dc916.com/docs/SITE_STRUCTURE.html">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="DC916 Website Structure">
<meta name="twitter:description" content="A DEF CON group for hackers, makers, tinkerers and security enthusiasts in the Sacramento area.">
<meta name="twitter:image" content="https://dc916.com/assets/images/hackthebeamsmaller.jpeg">

<!-- Custom JavaScript -->
<script src="/assets/js/console-effect.js"></script>

<!-- Custom styles -->
<style>
  /* Override font family with Fira Code for better terminal look */
  body {
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  }
  
  /* Blinking cursor effect */
  .cursor {
    display: inline-block;
    width: 10px;
    height: 1.2em;
    background-color: var(--conifer);
    margin-left: 5px;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
  }
  
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
</style>

</head>
<body>
  <header>
    <!-- Navigation -->
  </header>
  
  <main>
    <h1 id="installation-guide-for-dc916-website">Installation Guide for DC916 Website</h1>

<p>This guide provides detailed instructions for setting up and running the DC916 website locally on your machine. Follow these steps to get the development environment up and running.</p>

<h2 id="table-of-contents">Table of Contents</h2>

<ul>
  <li><a href="#prerequisites">Prerequisites</a>
    <ul>
      <li><a href="#windows">Windows</a></li>
      <li><a href="#macos">macOS</a></li>
      <li><a href="#linux">Linux</a></li>
    </ul>
  </li>
  <li><a href="#installation-steps">Installation Steps</a></li>
  <li><a href="#running-the-website">Running the Website</a></li>
  <li><a href="#common-issues--troubleshooting">Common Issues &amp; Troubleshooting</a></li>
  <li><a href="#development-tips">Development Tips</a></li>
</ul>

<h2 id="prerequisites">Prerequisites</h2>

<p>Before you begin, you’ll need to install the following software:</p>

<h3 id="windows">Windows</h3>

<ol>
  <li><strong>Install Ruby+Devkit</strong>:
    <ul>
      <li>Download the Ruby+Devkit installer from <a href="https://rubyinstaller.org/downloads/">RubyInstaller</a></li>
      <li>Choose a version &gt;= 2.5.0 (recommended: 3.0.x or newer)</li>
      <li>During installation, select “Add Ruby executables to your PATH” and “Associate .rb and .rbw files with Ruby”</li>
      <li>At the end of the installation, run the <code class="language-plaintext highlighter-rouge">ridk install</code> step and select option 3</li>
    </ul>
  </li>
  <li><strong>Verify Installation</strong>:
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ruby -v
gem -v
</code></pre></div>    </div>
  </li>
</ol>

<h3 id="macos">macOS</h3>

<ol>
  <li><strong>Install Homebrew</strong> (if not already installed):
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/bin/bash <span class="nt">-c</span> <span class="s2">"</span><span class="si">$(</span>curl <span class="nt">-fsSL</span> https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh<span class="si">)</span><span class="s2">"</span>
</code></pre></div>    </div>
  </li>
  <li><strong>Install Ruby</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>brew <span class="nb">install </span>ruby
</code></pre></div>    </div>
  </li>
  <li><strong>Add Ruby to your PATH</strong>:
    <ul>
      <li>For Zsh (default in macOS Catalina and newer):
        <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">echo</span> <span class="s1">'export PATH="/usr/local/opt/ruby/bin:$PATH"'</span> <span class="o">&gt;&gt;</span> ~/.zshrc
<span class="nb">source</span> ~/.zshrc
</code></pre></div>        </div>
      </li>
      <li>For Bash:
        <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">echo</span> <span class="s1">'export PATH="/usr/local/opt/ruby/bin:$PATH"'</span> <span class="o">&gt;&gt;</span> ~/.bash_profile
<span class="nb">source</span> ~/.bash_profile
</code></pre></div>        </div>
      </li>
    </ul>
  </li>
  <li><strong>Verify Installation</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ruby <span class="nt">-v</span>
gem <span class="nt">-v</span>
</code></pre></div>    </div>
  </li>
</ol>

<h3 id="linux">Linux</h3>

<ol>
  <li><strong>Install Ruby and development dependencies</strong>:
    <ul>
      <li>For Ubuntu/Debian:
        <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>apt-get update
<span class="nb">sudo </span>apt-get <span class="nb">install </span>ruby-full build-essential zlib1g-dev
</code></pre></div>        </div>
      </li>
      <li>For Fedora/CentOS/RHEL:
        <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>dnf <span class="nb">install </span>ruby ruby-devel make gcc gcc-c++ zlib-devel
</code></pre></div>        </div>
      </li>
    </ul>
  </li>
  <li><strong>Configure Gem installation path</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">echo</span> <span class="s1">'# Install Ruby Gems to ~/gems'</span> <span class="o">&gt;&gt;</span> ~/.bashrc
<span class="nb">echo</span> <span class="s1">'export GEM_HOME="$HOME/gems"'</span> <span class="o">&gt;&gt;</span> ~/.bashrc
<span class="nb">echo</span> <span class="s1">'export PATH="$HOME/gems/bin:$PATH"'</span> <span class="o">&gt;&gt;</span> ~/.bashrc
<span class="nb">source</span> ~/.bashrc
</code></pre></div>    </div>
  </li>
  <li><strong>Verify Installation</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ruby <span class="nt">-v</span>
gem <span class="nt">-v</span>
</code></pre></div>    </div>
  </li>
</ol>

<h2 id="installation-steps">Installation Steps</h2>

<p>Once you have Ruby installed, follow these steps to set up the DC916 website:</p>

<ol>
  <li><strong>Install Jekyll and Bundler</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem <span class="nb">install </span>jekyll bundler
</code></pre></div>    </div>
  </li>
  <li><strong>Clone the repository</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone https://github.com/CyberSecSacramento/Cybersecurity-Sacramento.git
<span class="nb">cd </span>Cybersecurity-Sacramento
</code></pre></div>    </div>
  </li>
  <li><strong>Install dependencies</strong>:
    <ul>
      <li>If a Gemfile exists:
        <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">install</span>
</code></pre></div>        </div>
      </li>
      <li>If no Gemfile exists, create one:
        <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">echo</span> <span class="s2">"source 'https://rubygems.org'"</span> <span class="o">&gt;</span> Gemfile
<span class="nb">echo</span> <span class="s2">"gem 'jekyll'"</span> <span class="o">&gt;&gt;</span> Gemfile
<span class="nb">echo</span> <span class="s2">"gem 'jekyll-seo-tag'"</span> <span class="o">&gt;&gt;</span> Gemfile
bundle <span class="nb">install</span>
</code></pre></div>        </div>
      </li>
    </ul>
  </li>
</ol>

<h2 id="running-the-website">Running the Website</h2>

<p>After installation, you can run the website locally:</p>

<ol>
  <li><strong>Start the Jekyll server</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve
</code></pre></div>    </div>
  </li>
  <li>
    <p><strong>View the website</strong> in your browser at <code class="language-plaintext highlighter-rouge">http://localhost:4000</code></p>
  </li>
  <li><strong>Live reload</strong> (optional):
    <ul>
      <li>To enable automatic page refresh when files are modified:
        <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--livereload</span>
</code></pre></div>        </div>
      </li>
    </ul>
  </li>
  <li><strong>Build for production</strong> (optional):
    <ul>
      <li>To generate the static site without starting a server:
        <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll build
</code></pre></div>        </div>
      </li>
      <li>The generated site will be in the <code class="language-plaintext highlighter-rouge">_site</code> directory</li>
    </ul>
  </li>
</ol>

<h2 id="common-issues--troubleshooting">Common Issues &amp; Troubleshooting</h2>

<h3 id="ruby-version-issues">Ruby Version Issues</h3>

<p><strong>Problem</strong>: Jekyll requires Ruby version 2.5.0 or higher.
<strong>Solution</strong>: Check your Ruby version with <code class="language-plaintext highlighter-rouge">ruby -v</code> and upgrade if necessary.</p>

<h3 id="permission-errors">Permission Errors</h3>

<p><strong>Problem</strong>: “Permission denied” errors when installing gems.
<strong>Solution</strong>:</p>
<ul>
  <li>On Unix-based systems, use <code class="language-plaintext highlighter-rouge">sudo gem install jekyll bundler</code></li>
  <li>Alternatively, set up a user-level gem installation directory as shown in the Linux instructions</li>
</ul>

<h3 id="dependency-conflicts">Dependency Conflicts</h3>

<p><strong>Problem</strong>: Bundler reports conflicts between dependencies.
<strong>Solution</strong>:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle update
bundle <span class="nb">install</span>
</code></pre></div></div>

<h3 id="port-already-in-use">Port Already in Use</h3>

<p><strong>Problem</strong>: “Address already in use - bind(2) for 127.0.0.1:4000” error.
<strong>Solution</strong>:</p>
<ul>
  <li>Kill the process using the port: <code class="language-plaintext highlighter-rouge">lsof -i :4000</code> then <code class="language-plaintext highlighter-rouge">kill -9 [PID]</code></li>
  <li>Or use a different port: <code class="language-plaintext highlighter-rouge">bundle exec jekyll serve --port 4001</code></li>
</ul>

<h3 id="ssl-certificate-issues">SSL Certificate Issues</h3>

<p><strong>Problem</strong>: SSL certificate verification errors when installing gems.
<strong>Solution</strong>:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem sources <span class="nt">-r</span> https://rubygems.org/
gem sources <span class="nt">-a</span> http://rubygems.org/
</code></pre></div></div>

<h2 id="development-tips">Development Tips</h2>

<h3 id="jekyll-commands">Jekyll Commands</h3>

<ul>
  <li><strong>Create a new post</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll post <span class="s2">"My New Post"</span>
</code></pre></div>    </div>
  </li>
  <li><strong>Create a new page</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll page <span class="s2">"My New Page"</span>
</code></pre></div>    </div>
  </li>
  <li><strong>Build with drafts</strong>:
    <div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">exec </span>jekyll serve <span class="nt">--drafts</span>
</code></pre></div>    </div>
  </li>
</ul>

<h3 id="directory-structure">Directory Structure</h3>

<p>Understanding Jekyll’s directory structure can help with development:</p>

<pre><code class="language-mermaid">graph TD
    A[Root Directory] --&gt; B[_config.yml: Configuration]
    A --&gt; C[_layouts/: HTML templates]
    A --&gt; D[_includes/: Reusable components]
    A --&gt; E[_posts/: Blog posts]
    A --&gt; F[_drafts/: Unpublished posts]
    A --&gt; G[_data/: Data files]
    A --&gt; H[_site/: Generated site]
    A --&gt; I[assets/: Static files]
    A --&gt; J[index.md: Home page]
</code></pre>

<h3 id="liquid-syntax">Liquid Syntax</h3>

<p>Jekyll uses Liquid templating language. Here are some common patterns:</p>

<ul>
  <li><strong>Variables</strong>: <code class="language-plaintext highlighter-rouge">Installation Guide for DC916 Website</code></li>
  <li><strong>Filters</strong>: <code class="language-plaintext highlighter-rouge">Hello</code></li>
  <li><strong>Tags</strong>:
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  
</code></pre></div>    </div>
  </li>
  <li><strong>Loops</strong>:
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  
</code></pre></div>    </div>
  </li>
</ul>

<h3 id="front-matter">Front Matter</h3>

<p>Every content file should begin with front matter:</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">default</span>
<span class="na">title</span><span class="pi">:</span> <span class="s">My Page</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/my-page/</span>
<span class="nn">---</span>
</code></pre></div></div>

<hr />

<p>If you encounter any issues not covered in this guide, please <a href="https://github.com/CyberSecSacramento/Cybersecurity-Sacramento/issues">open an issue</a> on the repository.</p>

  </main>
  
  <footer>
    <!-- Footer content -->
  </footer>
  
  <!-- JavaScript -->
</body>
</html>

Content Integration

Content files use front matter to specify the layout and other metadata:

---
layout: default
title: Page Title
---

# Markdown Content

Page content goes here...

Asset Organization

Assets are organized by type:

graph TD
    A[assets/] --> B[css/]
    A --> C[js/]
    A --> D[images/]
    
    B --> B1[style.scss]
    
    C --> C1[console-effect.js]
    C --> C2[main.js]
    
    D --> D1[Logo Files]
    D --> D2[UI Elements]
    D --> D3[Content Images]

CSS Architecture

The CSS follows a component-based architecture:

style.scss
├── Variables
├── Reset
├── Base Styles
├── Layout
├── Components
│   ├── Header
│   ├── Navigation
│   ├── Terminal
│   ├── Cards
│   ├── Resources
│   └── Footer
└── Utilities

JavaScript Organization

JavaScript is organized by functionality:

  • console-effect.js: Terminal typing effect
  • main.js: General site functionality, including:
    • Modal dialogs
    • Resource loading
    • Interactive elements

Resource System

The resource system is organized into categories:

graph TD
    A[resources.md] --> B[Resource Grid]
    B --> C[Resource Categories]
    C --> D[Resource Modal]
    C --> E[Resource Pages]
    
    D --> F[PDF Resources]
    D --> G[Text Resources]
    
    E --> H[Detailed Resource Content]

Resource Flow

When a user interacts with resources:

  1. User visits the resources hub (resources.md)
  2. User clicks on a resource category
  3. For PDF resources:
    • A modal opens with a link to the PDF
  4. For text resources:
    • User is directed to the resource category page
    • The page displays detailed information about the resource

Build Process

The Jekyll build process transforms the source files into a static site:

flowchart TD
    A[Source Files] --> B[Jekyll Build]
    B --> C[Process Markdown]
    B --> D[Process Liquid Templates]
    B --> E[Process SCSS]
    B --> F[Copy Static Assets]
    C --> G[Generated HTML]
    D --> G
    E --> H[Generated CSS]
    F --> I[Optimized Assets]
    G --> J[_site Directory]
    H --> J
    I --> J

Build Steps

  1. Process Markdown: Convert Markdown to HTML
  2. Process Liquid Templates: Apply layouts and includes
  3. Process SCSS: Compile SCSS to CSS
  4. Copy Static Assets: Copy images and JavaScript
  5. Generate Site: Output to _site directory

Deployment Flow

The site is deployed using GitHub Pages:

flowchart TD
    A[Local Development] --> B[Git Commit]
    B --> C[Push to GitHub]
    C --> D[GitHub Pages Build]
    D --> E[Deploy to Production]
    E --> F[Live Website]

Deployment Steps

  1. Local Development: Make changes locally
  2. Git Commit: Commit changes to Git
  3. Push to GitHub: Push to the GitHub repository
  4. GitHub Pages Build: GitHub Pages builds the site
  5. Deploy to Production: Site is deployed to production
  6. Live Website: Site is available at dc916.com

This document provides a comprehensive overview of the DC916 website structure. For more detailed information about specific components, refer to the other documentation files: