From Theory to Practice: Implementing Your Static Site

From Theory to Practice: Implementing Your Static Site

In our previous posts, we’ve explored the benefits of static sites for speed, security, and flexibility. Now, let’s dive into the practical side of implementing a static site. We’ll look at some code samples to get you started on your static site journey.

Choosing a Static Site Generator

One of the most popular static site generators is Middleman. Here’s a basic Middleman configuration file (config.rb):

# Post front matter
layout: "custom"
title: "My Title"
my_list:
  - one
  - two
  - three

# config.rb
activate :blog do |blog|
  # set options on blog
end

page '/*.xml', layout: false
page '/*.json', layout: false
page '/*.txt', layout: false

configure :build do
  activate :minify_css
  activate :minify_javascript
end

Creating Content

In Middleman, you typically write your content in Markdown. Here’s an example of a blog post (2024-09-14-welcome-to-my-site.md):

---
title:  "Welcome to My Static Site!"
date:   2024-09-14 12:00:00 -0500
---

# Welcome to My Static Site

This is my first blog post on my new static site. 
I'm excited to share my thoughts and experiences with you! I hope you really enjoy it.

## Why I Chose a Static Site

1. Speed
2. Security
3. Flexibility

Stay tuned for more updates!

Example Code Snippets

When configured with Ruby Static Pro, code blocks will show up with syntax highlighting automatically:

Here’s some ruby code:

def do_something()
   "hello world".upcase!
end

This is some code in Kotlin:

data class Foo(name: String)

fun suspend doStuff(): Int {
    // Some code that returns an int
}

And some javascript

function myFunction(p1, p2) async {
  return p1 * p2;
}

Adding Custom Styles

You can easily add custom styles to your static site. Simple edit the site.css file and do anything you’d like, like this:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 1rem;
}

main {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.post {
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

Including Assets into the Asset Block

You can include assets in pages where you need them. For example, in the faq.html.erb we have the following:

<% content_for :assets do %>
  <%= stylesheet_link_tag "faq" %>
<% end %>

This includes the faq.css file in the assets code block in the <head> tag which can be seen in the layout.erb file:

<%= yield_content :assets %>

Deploying Your Site

Many platforms offer easy deployment for static sites.

Here’s an example of a post deploy configuration for Hatchbox to get Ruby Static Pro running:

bundle install
npm install # or yarn install
bundle exec middleman build
cp -r build public

This is an example image
A Coder

By following these examples, you can create a basic static site and start experiencing the benefits we’ve discussed in our previous posts. Remember, the beauty of static sites lies in their simplicity and flexibility – you can start small and gradually add more features as your needs grow.

Happy coding, and enjoy your journey into the world of static sites!

Implementing Your Static Site (Example Code Blocks)