NightOwlCoder Blog

My personal blog site lives here, kindly hosted by GitHub Pages.

Follow @OwlCoder for new posts.

My life in code language:

void LifeLoop()
{
Code();
Family();
Fun();
}

.NightOwlCoder

---

🚀 Technology Stack

• Static Site Generator: Jekyll 3.x
• Theme: jekyll-theme-hacker
• Hosting: GitHub Pages
• Comments: Disqus
• Analytics: Google Analytics
• Plugins:
  • jekyll-feed (RSS)
  • jekyll-seo-tag (SEO optimization)
  • jekyll-paginate (Pagination)
  • jekyll-sitemap (Sitemap generation)

📁 Project Structure

NightOwlCoder.github.io/
├── _config.yml # Site configuration
├── _posts/ # Blog posts (Markdown files)
├── _pages/ # Static pages
│ ├── 404.md # Error page
│ ├── about.md # About page
│ └── archive.md # Posts archive
├── _layouts/ # Page templates
│ ├── default.html # Base layout
│ ├── page.html # Static pages
│ └── post.html # Blog posts
├── _includes/ # Reusable components
│ ├── header.html
│ ├── footer.html
│ ├── head.html
│ ├── analytics.html
│ └── disqus_comments.html
├── _sass/ # Custom styles (SCSS)
├── assets/ # Images and media files
├── css/ # Main stylesheet
├── index.html # Homepage
├── Gemfile # Ruby dependencies
├── README.md # This file
└── AGENT.md # AI agent instructions

🛠️ Local Development Setup

Prerequisites

• Ruby 2.5+ installed
• Bundler gem installed (gem install bundler)

Installation

1. Clone the repository:

git clone https://github.com/NightOwlCoder/NightOwlCoder.github.io.git
cd NightOwlCoder.github.io

2. Install dependencies:

bundle install

3. Run the development server:

bundle exec jekyll serve

4. Open your browser to http://localhost:4000

The site will auto-regenerate when you make changes to files.

✍️ Creating a New Blog Post

Manual Method

1. Create a new file in the _posts/ directory with the naming convention:

   YYYY-MM-DD-title-slug.md
   

   Example: 2024-01-15-my-awesome-post.md

2. Add front matter at the top of the file:

   ---
   layout: posttitle: "Your Post Title"date: 2024-01-15 20:00:00 -0800categories: category1 category2 category3
   ---

3. Write your content in Markdown below the front matter

4. Add images to the assets/ folder and reference them:

   ![Alt text](../assets/image-name.png)

5. Commit and push to GitHub:

   git add .
   git commit -m "Add new blog post: Your Post Title"
   git push origin master

GitHub Pages will automatically build and deploy your changes within a few minutes.

Using an AI Agent

See AGENT.md for detailed instructions on how to use an AI assistant to create blog posts.

🖼️ Adding Images

1. Place image files in the assets/ directory
2. Reference images in your posts using relative paths:

   ![Description](../assets/your-image.png)

3. Optionally resize images:

   ![Description](../assets/your-image.png){:width="350px"}

🎨 Customization

Site Configuration

Edit _config.yml to customize:

• Site title and description
• Social media links
• Google Analytics ID
• Disqus shortname
• Pagination settings

Styling

• Modify SCSS files in _sass/ directory
• Edit css/main.scss to import custom styles

Layouts and Components

• Edit HTML templates in _layouts/
• Modify reusable components in _includes/

📝 Blog Post Front Matter Options

---
layout: post # Required: Always 'post'title: "Your Title"# Required: Post titledate: YYYY-MM-DD HH:MM:SS -0800 # Required: Publication datecategories: cat1 cat2 # Optional: Post categoriesexcerpt: "Short summary"# Recommended: Used for auto-tweet and previewsimage: /assets/post-image.png # Optional: Custom social media preview imagecomments: true # Optional: Enable/disable Disqus comments
---

Auto-Tweet Feature

🐦 Automatic Twitter Posting

When you push a new blog post to GitHub, it automatically posts to @OwlCoder with:

• Post title
• Custom excerpt (if provided)
• Link to the full post
• Preview card with image

Setup Requirements:

• Twitter API credentials configured in GitHub Secrets
• See docs/X-API-SETUP-GUIDE.md for setup instructions
• See docs/AUTO-TWEET-SUMMARY.md for complete documentation

Best Practices:

• Always include an excerpt: field for better tweet text
• Add an image: field for custom preview images (optional)
• Without custom image, defaults to NightOwlCoder logo
• Keep excerpts under 150 characters for best results

🔧 Configuration Files

_config.yml

Main site configuration including:

• Site metadata (title, description, URLs)
• Jekyll settings (theme, plugins)
• Pagination configuration
• Social media links
• Analytics and comments configuration

Gemfile

Ruby gem dependencies for Jekyll and plugins

🚢 Deployment

This site automatically deploys via GitHub Pages when you push to the master branch.

No manual deployment steps required!

📊 Features

• ✅ Responsive design
• ✅ Syntax highlighting for code blocks
• ✅ Pagination (4 posts per page)
• ✅ RSS feed at /atom.xml
• ✅ SEO optimized
• ✅ Google Analytics integration
• ✅ Disqus comments
• ✅ Twitter integration
• ✅ Sitemap generation

🐛 Troubleshooting

Bundle Install Fails

bundle update
bundle install

Jekyll Serve Fails

Clear the cache:

bundle exec jekyll clean
bundle exec jekyll serve

Changes Not Showing on GitHub Pages

• Wait 2-5 minutes for GitHub Pages to rebuild
• Check the Actions tab in your GitHub repository for build status
• Ensure _config.yml is valid YAML

📚 Resources

• Jekyll Documentation
• GitHub Pages Documentation
• Markdown Guide
• Jekyll Hacker Theme

📄 License

Content is copyrighted. Code structure follows Jekyll's standard MIT license.

---

Built with ❤️ using Jekyll and hosted on GitHub Pages