./Cybersecurity Sacramento (DC916)

Belonging is the very best thing there is

Development Guide for DC916 Website

This guide provides detailed information for developers working on the DC916 website. It covers Jekyll features, advanced customization options, and best practices for development.

Jekyll Overview
Project Structure
Liquid Templating
Front Matter
Working with Layouts
CSS/SCSS Architecture
JavaScript Features
Adding New Pages
Working with Resources
Deployment Scripts
Performance Optimization
SEO Considerations
Accessibility
Advanced Jekyll Features

Jekyll Overview

Jekyll is a static site generator that transforms plain text into static websites. It’s built with Ruby and uses the following core concepts:

graph TD
    A[Content Files] -->|Front Matter + Markdown| B[Jekyll Processing]
    C[Layouts & Includes] --> B
    D[Data Files] --> B
    E[Configuration] --> B
    B --> F[Static HTML Site]
    F --> G[GitHub Pages Deployment]
    F --> H[Local Build Deployment]
    H --> I[Manual Push to GitHub]

Key Jekyll features used in this project:

Markdown content with YAML front matter
Liquid templating for dynamic content
Layouts for consistent page structure
Includes for reusable components
SCSS processing for stylesheets
Collections for organizing related content

Project Structure

The DC916 website follows this 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

Liquid Templating

Jekyll uses Liquid templating for dynamic content. Here are the key Liquid features used in this project:

Objects

Objects represent variables that output content:

Development Guide for DC916 Website

05 Nov 2025

Filters

Filters modify the output of objects:

Hello world
1836

Front Matter

Front matter is YAML at the beginning of content files that defines variables for the page:

---
layout: default
title: My Page Title
permalink: /custom-url/
featured_image: /assets/images/featured.jpg
show_sidebar: true
custom_css:
  - custom1
  - custom2
---

Common front matter variables in this project:

layout: Specifies which layout to use
title: Page title
permalink: Custom URL for the page
description: Page description for SEO
custom_css: Additional CSS files to include
custom_js: Additional JavaScript files to include

Working with Layouts

Layouts define the structure of pages. The main layout is in _layouts/default.html.

To create a new layout:

Create a new HTML file in the _layouts directory
Use Liquid to include dynamic content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Development Guide for DC916 Website | Cybersecurity Sacramento (DC916)</title>
  <!-- Include styles and scripts -->
</head>
<body>
  <header>
    <!-- Simple header for the DC916 website -->
<header class="site-header">
  <div class="container">
    <a class="site-title" href="/">Cybersecurity Sacramento (DC916)</a>
    <nav class="site-nav">
      <a href="/">Home</a>
      <a href="/resources/">Resources</a>
      <a href="/road-to-defcon/">Road to DEFCON</a>
      <a href="/Leadership/">Leadership</a>
      <a href="/Projects/">Projects</a>
      <a href="/Donations/">Donations</a>
      <a href="/Giveaways/">Giveaways</a>
      <a href="/CoC/">Code of Conduct</a>
    </nav>
  </div>
</header>

  </header>
  
  <main>
    <h1 id="wireless-hacking-resources">Wireless Hacking Resources</h1>

<div class="resource-header">
  <div class="resource-icon">
    <i class="fas fa-wifi"></i>
  </div>
  <div class="resource-title">
    <h1>Wireless Hacking</h1>
    <p>Resources for WiFi, Bluetooth, and RF security</p>
  </div>
</div>

<div class="resource-content">
  <div class="resource-section">
    <div class="section-header collapsible">
      <h2><i class="fas fa-book"></i> Learning Resources</h2>
      <i class="fas fa-chevron-down toggle-icon"></i>
    </div>
    <div class="section-content">
      <div class="resource-cards">
        <div class="resource-card placeholder-card">
          <div class="card-header">
            <i class="fas fa-graduation-cap"></i>
            <h3>Wireless Security Fundamentals</h3>
          </div>
          <div class="card-content">
            <p>This section will contain resources for learning wireless security fundamentals</p>
            <div class="placeholder-message">
              <i class="fas fa-wifi"></i>
              <span>Resources coming soon</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="resource-section">
    <div class="section-header collapsible">
      <h2><i class="fas fa-tools"></i> Wireless Hacking Tools</h2>
      <i class="fas fa-chevron-down toggle-icon"></i>
    </div>
    <div class="section-content">
      <div class="resource-cards">
        <div class="resource-card placeholder-card">
          <div class="card-header">
            <i class="fas fa-tools"></i>
            <h3>Popular Wireless Hacking Tools</h3>
          </div>
          <div class="card-content">
            <p>This section will list common wireless hacking tools and equipment</p>
            <div class="placeholder-message">
              <i class="fas fa-wifi"></i>
              <span>Tools list coming soon</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="resource-section">
    <div class="section-header collapsible">
      <h2><i class="fas fa-newspaper"></i> Articles &amp; Guides</h2>
      <i class="fas fa-chevron-down toggle-icon"></i>
    </div>
    <div class="section-content">
      <div class="resource-cards">
        <div class="resource-card placeholder-card">
          <div class="card-header">
            <i class="fas fa-file-alt"></i>
            <h3>Wireless Hacking Guides</h3>
          </div>
          <div class="card-content">
            <p>This section will contain articles and guides on wireless hacking topics</p>
            <div class="placeholder-message">
              <i class="fas fa-wifi"></i>
              <span>Articles coming soon</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="resource-section">
    <div class="section-header collapsible">
      <h2><i class="fas fa-broadcast-tower"></i> RF Resources</h2>
      <i class="fas fa-chevron-down toggle-icon"></i>
    </div>
    <div class="section-content">
      <div class="resource-cards">
        <div class="resource-card placeholder-card">
          <div class="card-header">
            <i class="fas fa-satellite-dish"></i>
            <h3>Radio Frequency Hacking</h3>
          </div>
          <div class="card-content">
            <p>This section will contain resources for radio frequency hacking and SDR</p>
            <div class="placeholder-message">
              <i class="fas fa-broadcast-tower"></i>
              <span>RF resources coming soon</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="contribute-section">
  <h2><i class="fas fa-hands-helping"></i> Contribute Resources</h2>
  <p>
    Do you have wireless hacking resources to share with the DC916 community? We're actively collecting high-quality links, tools, and guides for this section.
  </p>
  <p>
    Please reach out to the DC916 team through our <a href="https://discord.gg/Dkn5DZTaGh" target="_blank">Discord</a> or at one of our meetings to contribute your resources.
  </p>
</div>

<style>
/* Resource Page Styles */
.resource-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  background: rgba(91, 43, 130, 0.2);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--conifer);
}

.resource-icon {
  font-size: 3rem;
  color: var(--conifer);
  margin-right: 1.5rem;
}

.resource-title h1 {
  margin: 0 0 0.5rem 0;
  color: var(--conifer);
}

.resource-title p {
  margin: 0;
  color: var(--kings-silver);
  font-size: 1.1rem;
}

.resource-content {
  margin-bottom: 2rem;
}

.resource-section {
  margin-bottom: 2rem;
  border: 1px solid rgba(91, 43, 130, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

/* Collapsible Section Styles */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(91, 43, 130, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.section-header:hover {
  background: rgba(91, 43, 130, 0.3);
}

.section-header h2 {
  color: var(--kings-silver);
  margin: 0;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
}

.section-header h2 i {
  margin-right: 0.75rem;
  color: var(--conifer);
}

.toggle-icon {
  color: var(--conifer);
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.section-header.active .toggle-icon {
  transform: rotate(180deg);
}

.section-content {
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.section-content.collapsed {
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0 !important;
  border-top: none;
  border-bottom: none;
}

/* Resource Cards Styles */
.resource-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.resource-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--kings-purple);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-color: var(--conifer);
}

.card-header {
  background: rgba(91, 43, 130, 0.3);
  padding: 1rem;
  display: flex;
  align-items: center;
}

.card-header i {
  font-size: 1.5rem;
  color: var(--conifer);
  margin-right: 1rem;
}

.card-header h3 {
  margin: 0;
  color: var(--kings-silver);
  font-size: 1.1rem;
}

.card-content {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-content p {
  color: var(--terminal-text);
  margin: 0 0 1rem 0;
}

.resource-link {
  display: inline-flex;
  align-items: center;
  background: var(--kings-purple);
  color: var(--terminal-text);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: auto;
}

.resource-link:hover {
  background: var(--conifer);
  color: var(--terminal-background);
}

.resource-link i {
  margin-right: 0.5rem;
}

/* Placeholder Styles */
.placeholder-card {
  border-style: dashed;
}

.placeholder-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  color: var(--kings-silver);
  text-align: center;
  margin-top: auto;
}

.placeholder-message i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.7;
}

/* Contribute Section */
.contribute-section {
  background: rgba(91, 43, 130, 0.1);
  border: 1px dashed var(--kings-purple);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 3rem;
}

.contribute-section h2 {
  color: var(--conifer);
  margin-top: 0;
  margin-bottom: 1rem;
}

.contribute-section h2 i {
  margin-right: 0.5rem;
}

.contribute-section p {
  color: var(--terminal-text);
  margin-bottom: 1rem;
}

.contribute-section a {
  color: var(--conifer);
  text-decoration: none;
  transition: all 0.3s ease;
}

.contribute-section a:hover {
  text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .resource-header {
    flex-direction: column;
    text-align: center;
  }
  
  .resource-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .resource-cards {
    grid-template-columns: 1fr;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Initialize all sections as expanded
  const sections = document.querySelectorAll('.section-header');
  
  sections.forEach(section => {
    // Add active class to all sections initially
    section.classList.add('active');
    
    // Add click event listener
    section.addEventListener('click', function() {
      this.classList.toggle('active');
      
      // Toggle the visibility of the content
      const content = this.nextElementSibling;
      if (this.classList.contains('active')) {
        content.classList.remove('collapsed');
        setTimeout(() => {
          content.style.maxHeight = content.scrollHeight + "px";
        }, 10);
      } else {
        content.style.maxHeight = "0";
        content.classList.add('collapsed');
      }
    });
    
    // Set initial state (expanded)
    const content = section.nextElementSibling;
    content.style.maxHeight = content.scrollHeight + "px";
  });
});
</script>


  </main>
  
  <footer>
    <!-- Simple footer for the DC916 website -->
<footer class="site-footer">
  <div class="container">
    <div class="footer-content">
      <div class="footer-section">
        <h3>About DC916</h3>
        <p>Cybersecurity Sacramento (DC916) is a local hacker group that's part of DEF CON groups in the Sacramento, CA area.</p>
      </div>
      <div class="footer-section">
        <h3>Connect</h3>
        <ul class="social-links">
          
          <li><a href="https://twitter.com/CyberSec916" target="_blank">Twitter</a></li>
          
          <li><a href="https://instagram.com/cybersec916" target="_blank">Instagram</a></li>
          
          <li><a href="https://www.facebook.com/profile.php?id=61562053185228" target="_blank">Facebook</a></li>
          
          <li><a href="https://www.threads.net/@cybersec916" target="_blank">Threads</a></li>
          
          <li><a href="https://bsky.app/profile/cybersec916.com" target="_blank">Bluesky</a></li>
          
          <li><a href="https://discord.gg/Dkn5DZTaGh" target="_blank">Discord</a></li>
          
          <li><a href="https://forum.defcon.org/node/231442" target="_blank">DEF CON Forums</a></li>
          
          <li><a href="https://github.com/CyberSecSacramento/Cybersecurity-Sacramento" target="_blank">GitHub</a></li>
          
        </ul>
      </div>
      <div class="footer-section">
        <h3>Legal</h3>
        <ul>
          <li><a href="/CoC/">Code of Conduct</a></li>
        </ul>
      </div>
    </div>
    <div class="copyright">
      <p>&copy; 2025 Cybersecurity Sacramento (DC916). All rights reserved.</p>
    </div>
  </div>
</footer>

  </footer>
</body>
</html>

Use the layout in content files:

---
layout: your-new-layout
---

CSS/SCSS Architecture

The site uses SCSS for styling, with a focus on variables for theming:

CSS Variables

The main variables are defined in assets/css/style.scss:

:root {
  --powershell-blue: #012456;
  --kings-purple: #5B2B82;
  --kings-silver: #C4CED4;
  --conifer: #b5e853;
  --terminal-text: #E0E0E0;
  --terminal-background: #012456;
  --terminal-border: #444;
  /* ... other variables ... */
}

CSS Organization

The CSS follows this organization:

Variables: Color and theme definitions
Reset: Basic reset and normalization
Base: Typography and base element styles
Layout: Container and grid styles
Components: Specific UI component styles
Utilities: Helper classes

Adding Custom CSS

To add custom CSS for a specific page:

Create a new SCSS file in assets/css/
Import it in style.scss or include it via front matter:

---
custom_css: your-custom-file
---

JavaScript Features

The site uses vanilla JavaScript for interactive features:

Console Typing Effect

The console typing effect is implemented in assets/js/console-effect.js. It simulates terminal typing with a blinking cursor.

Modal dialogs for resources are implemented in assets/js/main.js.

Adding Custom JavaScript

To add custom JavaScript:

Create a new JS file in assets/js/
Include it in the layout or via front matter:

---
custom_js: your-custom-file
---

Adding New Pages

To add a new page to the site:

Create a new Markdown file in the root directory
Add front matter:

---
layout: default
title: Your Page Title
permalink: /your-page-url/
---

Add your content using Markdown
Link to your page from other pages as needed

Working with Resources

The resources section is organized into categories:

Resource Categories

Each resource category has:

A Markdown file in resources/pages/
Content files in resources/
An entry in the resources grid in resources.md

Adding a New Resource Category

To add a new resource category:

Create a new Markdown file in resources/pages/
Add any resource files to resources/
Update the resource grid in resources.md to include your new category

Deployment Scripts

The repository includes two important scripts to help with development and deployment:

serve.sh

The serve.sh script simplifies the local development process:

#!/bin/bash

# Script to run the Jekyll site locally

# Check if Ruby is installed
if ! command -v ruby &> /dev/null; then
    echo "Ruby is not installed. Please install Ruby before running this script."
    exit 1
fi

# Check if Bundler is installed
if ! command -v bundle &> /dev/null; then
    echo "Bundler is not installed. Installing Bundler..."
    gem install bundler --user-install
fi

# Install dependencies locally to avoid permission issues
echo "Installing dependencies locally..."
bundle config set --local path 'vendor/bundle'
bundle install

# Run Jekyll server
echo "Starting Jekyll server..."
bundle exec jekyll serve --livereload

To use this script:

Make the script executable: chmod +x serve.sh
Run the script: ./serve.sh

deploy.sh

The deploy.sh script handles the deployment process to GitHub Pages:

#!/bin/bash

# Script to deploy the Jekyll site to GitHub Pages

# Check if Git is installed
if ! command -v git &> /dev/null; then
    echo "Git is not installed. Please install Git before running this script."
    exit 1
fi

# Check if we're in a Git repository
if ! git rev-parse --is-inside-work-tree &> /dev/null; then
    echo "Not in a Git repository. Please run this script from within a Git repository."
    exit 1
fi

# Check if the current branch is site-upgrade
current_branch=$(git rev-parse --abbrev-ref HEAD)
if [ "$current_branch" != "site-upgrade" ]; then
    echo "You are not on the site-upgrade branch. Please switch to site-upgrade branch before running this script."
    exit 1
fi

# Check if there are uncommitted changes
if ! git diff-index --quiet HEAD --; then
    echo "There are uncommitted changes. Please commit or stash them before running this script."
    exit 1
fi

# Install dependencies locally to avoid permission issues
echo "Installing dependencies locally..."
bundle config set --local path 'vendor/bundle'
bundle install

# Build the site
echo "Building the site..."
bundle exec jekyll build

# Switch to main branch
echo "Switching to main branch..."
git checkout main

# Copy the built site from _site to the main branch
echo "Copying built site to main branch..."
cp -r _site/* .

# Add all changes to Git
echo "Adding changes to Git..."
git add .

# Commit changes
echo "Committing changes..."
git commit -m "Deploy site update from site-upgrade branch"

# Push to GitHub
echo "Pushing to GitHub..."
git push origin main

# Switch back to site-upgrade branch
echo "Switching back to site-upgrade branch..."
git checkout site-upgrade

echo "Deployment complete! The site should be live shortly."

To use this script:

Make the script executable: chmod +x deploy.sh
Ensure you’re on the site-upgrade branch
Commit all your changes
Run the script: ./deploy.sh

Deployment Strategy

We use a local build and deploy strategy rather than relying on GitHub Pages’ built-in Jekyll processing. This approach gives us several advantages:

Plugin Support: We can use any Jekyll plugin, not just those supported by GitHub Pages
Version Control: We maintain separate branches for source code (site-upgrade) and the built site (main)
Build Control: We have complete control over the build process
Troubleshooting: It’s easier to debug build issues locally

This strategy is particularly important because GitHub Pages has limitations on which Jekyll plugins it supports and how it builds Jekyll sites.

Performance Optimization

To optimize the site’s performance:

Image Optimization

Compress images using tools like ImageOptim
Use appropriate image formats (JPEG for photos, PNG for graphics with transparency, SVG for icons)
Specify image dimensions in HTML

CSS/JS Optimization

Minimize CSS and JavaScript files
Use async or defer for non-critical scripts
Consider lazy-loading for non-critical resources

Jekyll Optimization

Use Jekyll’s incremental build feature during development:
```
bundle exec jekyll serve --incremental
```
Consider using Jekyll’s caching options in _config.yml

SEO Considerations

The site uses the jekyll-seo-tag plugin for basic SEO. To optimize a page for search engines:

Use descriptive titles and headings

Add meta descriptions in front matter:

---
description: A detailed description of the page content
---

Use semantic HTML
Ensure images have alt text
Create a sitemap.xml file

Accessibility

To ensure the site is accessible:

Use semantic HTML elements
Provide alternative text for images
Ensure sufficient color contrast
Make sure interactive elements are keyboard accessible
Test with screen readers
Follow WCAG 2.1 guidelines

Advanced Jekyll Features

Collections

Collections group related content. To create a new collection:

Define it in _config.yml:

collections:
  your_collection:
    output: true
    permalink: /your-collection/:path/

Create a directory _your_collection/
Add content files to the directory

Data Files

Data files store structured data. To use data files:

Create a YAML, JSON, or CSV file in the _data directory
Access the data in templates:
```
   
```

Custom Plugins

To create a custom plugin:

Create a Ruby file in the _plugins directory
Define your plugin functionality
Note that custom plugins won’t work on GitHub Pages unless you use GitHub Actions

This development guide covers the main aspects of working with the DC916 website. For more information about Jekyll, refer to the official Jekyll documentation.

./Cybersecurity Sacramento (DC916)

Belonging is the very best thing there is

Development Guide for DC916 Website

Table of Contents

Jekyll Overview

Project Structure

Liquid Templating

Objects

Tags

Filters

Front Matter

Working with Layouts

CSS/SCSS Architecture

CSS Variables

CSS Organization

Adding Custom CSS

JavaScript Features

Console Typing Effect

Adding Custom JavaScript

Adding New Pages

Working with Resources

Resource Categories

Adding a New Resource Category

Deployment Scripts

serve.sh

deploy.sh

Deployment Strategy

Performance Optimization

Image Optimization

CSS/JS Optimization

Jekyll Optimization

SEO Considerations

Accessibility

Advanced Jekyll Features

Collections

Data Files

Custom Plugins

Development Guide for DC916 Website

Table of Contents

Jekyll Overview

Project Structure

Liquid Templating

Objects

Tags

Filters

Front Matter

Working with Layouts

CSS/SCSS Architecture

CSS Variables

CSS Organization

Adding Custom CSS

JavaScript Features

Console Typing Effect

Modal Dialogs

Adding Custom JavaScript

Adding New Pages

Working with Resources

Resource Categories

Adding a New Resource Category

Deployment Scripts

serve.sh

deploy.sh

Deployment Strategy

Performance Optimization

Image Optimization

CSS/JS Optimization

Jekyll Optimization

SEO Considerations

Accessibility

Advanced Jekyll Features

Collections

Data Files

Custom Plugins