Charles Sieg's Personal Website

Source code for charlessieg.com, a static website built with the Static Narrative CMS. This repository contains all content, templates, and assets for the personal website of Charles Sieg.

🌟 Features

Static Site Generation: Fast, secure, and scalable static website
Markdown Content: Write content in Markdown with YAML frontmatter
Blog System: Chronological blog posts with tagging and pagination
Smart Archiving: Automatic separation of posts older than 1 year with intelligent breadcrumbs
Article System: Topic-organized articles for longer-form content
Custom Templates: Jinja2-based templating system
Dark Mode Support: Built-in dark mode with theme switching
Responsive Design: Mobile-first responsive layout using Tailwind CSS
SCSS Compilation: Automatic SCSS to CSS compilation with @import support
Syntax Highlighting: Pygments-powered code highlighting with Monokai theme
RSS/Atom Feeds: Automatic feed generation for blog posts
Resume Section: Structured professional experience and publications
CloudFront Integration: Automatic cache invalidation on deployment

📁 Project Structure

website-charlessieg-source/
├── source/                      # Source files for the website
│   ├── content/                 # Markdown content files
│   │   ├── posts/              # Blog posts
│   │   ├── articles/           # Long-form articles
│   │   ├── about/              # About page
│   │   ├── archive/            # Archived posts
│   │   ├── tags/               # Tag index pages
│   │   ├── rss/                # RSS feed
│   │   └── atom/               # Atom feed
│   ├── assets/                  # Static assets
│   │   ├── css/                # Stylesheets
│   │   │   ├── style.scss      # Custom SCSS styles
│   │   │   ├── tailwind.css    # Tailwind CSS framework
│   │   │   └── pygments-monokai.css  # Syntax highlighting
│   │   ├── images/             # Image assets
│   │   └── js/                 # JavaScript files
│   ├── templates/               # Jinja2 templates
│   │   └── default/            # Default theme
│   │       ├── partials/       # Reusable template partials
│   │       ├── base.jinja      # Base template
│   │       ├── post.jinja      # Blog post template
│   │       ├── article.jinja   # Article template
│   │       └── ...             # Other templates
│   ├── resume/                  # Resume content
│   ├── clients/                 # Client information
│   ├── site.yml                # Site configuration
│   └── _index.md               # Homepage content
├── rendered/                    # Generated static site (output)
└── buildspec.yml               # AWS CodeBuild configuration

🚀 Prerequisites

Docker: For running the Static Narrative CMS backend
Python 3.9+: For the backend CMS (if running locally)
Node.js: For frontend development server (optional)
Git: For version control

🛠️ Getting Started

1. Clone the Repository

git clone https://github.com/CharlesSieg/website-charlessieg-source.git
cd website-charlessieg-source

2. Start the CMS Backend

The site is built using the Static Narrative CMS. To start the backend:

# Navigate to the CMS directory
cd ../static-narrative-cms-python

# Start Docker containers
docker compose up -d

# The backend will be available at http://localhost:5001
# The frontend UI will be available at http://localhost:3000

3. Build the Site

Trigger a build via the API:

curl -X POST http://localhost:5001/api/build

Or use the frontend UI at http://localhost:3000 to manage builds.

4. View the Site

The generated static site is output to the rendered/ directory. You can:

Open rendered/index.html in your browser
Use a local server: python -m http.server 8000 -d rendered
The site auto-reloads during development when files change

✍️ Content Management

Creating a Blog Post

Create a new Markdown file in source/content/posts/:

---
date: 2025-10-11
layout: post
published: true
title: "My Blog Post Title"
tags:
- Technology
- Development
---

Your blog post content goes here in Markdown format.

## Headings

Support for **bold**, *italic*, and `code`.

```python
# Code blocks with syntax highlighting
def hello_world():
    print("Hello, World!")


### Creating an Article

Create a new Markdown file in `source/content/articles/`:

```markdown
---
date: 2025-10-11
layout: article
published: true
title: "Long-Form Article Title"
topic: Technology
---

Your article content...

Frontmatter Fields

date: Publication date (YYYY-MM-DD)
layout: Template to use (post, article, page)
published: Set to true to include in builds, false to exclude
title: Page/post title
tags: Array of tags (for posts)
topic: Topic category (for articles)
featured_image: Hero image for the post

🎨 Styling

SCSS Customization

Edit source/assets/css/style.scss to customize styles:

// Custom variables
$primary-color: #3b82f6;

// Typography
body {
  font-size: 1.35rem;
  line-height: 1.75;
}

// Dark mode
html.dark {
  background-color: #111827;
}

The SCSS is automatically compiled to CSS during the build process.

Tailwind CSS

The site uses Tailwind CSS for utility classes. The full Tailwind CSS file is included at source/assets/css/tailwind.css.

Tailwind classes can be used directly in templates and markdown:

<div class="container mx-auto px-4">
  <h1 class="text-4xl font-bold text-gray-900 dark:text-gray-100">
    Hello World
  </h1>
</div>

🏗️ Template Customization

Templates are located in source/templates/default/. The main templates are:

base.jinja: Base template with HTML structure
post.jinja: Blog post layout
posts.jinja: Blog index with pagination
article.jinja: Article layout
tag.jinja: Tag archive page
partials/_metadata.jinja: HTML head metadata
partials/_navigation.jinja: Site navigation
partials/_footer.jinja: Site footer

Template Variables

Templates have access to:

page: Current page object with title, content, date, etc.
all_pages: List of all site pages
site_name: Site name from configuration
Custom: Custom configuration values

🔧 Configuration

Site configuration is in source/site.yml:

SiteName: website-charlessieg-source
Domain: charlessieg.com
LogLevel: DEBUG
Minification: false
Template: default

Stages:
  Staging:
    Profile: renkara-dev
    Bucket: staging.charlessieg.com
    Distribution: E3FNJYJX0ZA4QS  # CloudFront distribution (optional)
  Production:
    Profile: renkara-prod
    Bucket: charlessieg.com
    Distribution: E2C4OL5KA0G7I3  # CloudFront distribution (optional)

Custom:
  Author: Charles Sieg
  Socials:
    Facebook: https://www.facebook.com/charles.sieg
    Twitter: https://www.twitter.com/charlessieg
    LinkedIn: https://www.linkedin.com/in/charlessieg
    GitHub: https://github.com/CharlesSieg

CloudFront Integration

When a Distribution ID is specified in a deployment stage, the CMS automatically creates a CloudFront invalidation after uploading files to S3. This ensures visitors see the latest content immediately without waiting for the CloudFront cache to expire.

The invalidation covers all paths (/*) and typically completes within 1-2 minutes.

🚢 Building and Deployment

Local Development Build

# Build the site using the Makefile
cd ../static-narrative-cms-python
make build

# Or build directly with Python
SITE_NAME=website-charlessieg-source venv/bin/python3 backend/rendition.py

Deploy to Staging

Deploy via the frontend UI at http://localhost:3000, or use the API endpoint to trigger a build and upload.

Deploy to Production

Deploy via the frontend UI at http://localhost:3000 with the Production stage selected.

💻 Development Features

Auto-Reload

The site includes an auto-reload script that watches for changes and automatically refreshes your browser when files are updated.

Cache Control

During development, cache-control headers are automatically injected to prevent browser caching:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

File Watching

The CMS automatically watches the source/ directory and rebuilds when changes are detected:

Content changes (.md files): Full site rebuild
SCSS changes (.scss files): CSS-only rebuild

📝 Writing Tips

Markdown Features

Use ## for section headings
Code blocks with language: ```python
Images: ![Alt text](path/to/image.jpg)
Links: [Link text](https://example.com)

Shortcodes

The CMS supports shortcodes for dynamic content:

{{< toc >}}  <!-- Table of contents -->
{{< article_link name="my-post" text="Link to article" >}}  <!-- Link to another post/article -->
{{< youtube id="VIDEO_ID" >}}  <!-- Embed YouTube video -->

🤝 Contributing

This is a personal website repository. If you'd like to report an issue or suggest an improvement, please open an issue.

📄 License

👤 Author

Charles Sieg

Website: charlessieg.com
GitHub: @CharlesSieg
LinkedIn: charlessieg
Twitter: @charlessieg

Built with ❤️ using the Static Narrative CMS

Name		Name	Last commit message	Last commit date
Latest commit History 194 Commits
source		source
.gitignore		.gitignore
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

Charles Sieg's Personal Website

🌟 Features

📁 Project Structure

🚀 Prerequisites

🛠️ Getting Started

1. Clone the Repository

2. Start the CMS Backend

3. Build the Site

4. View the Site

✍️ Content Management

Creating a Blog Post

Frontmatter Fields

🎨 Styling

SCSS Customization

Tailwind CSS

🏗️ Template Customization

Template Variables

🔧 Configuration

CloudFront Integration

🚢 Building and Deployment

Local Development Build

Deploy to Staging

Deploy to Production

💻 Development Features

Auto-Reload

Cache Control

File Watching

📝 Writing Tips

Markdown Features

Shortcodes

🤝 Contributing

📄 License

👤 Author

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages