[{"title":"FAQ","url":"/faq/","content":"Frequently Asked Questions Get answers to the most common questions about Ruby Static Pro General Why Middleman? You might be wondering, shouldn't we use something newer and more modern? There's no need for something newer or modern. Plain and simple - Middleman works and works well. It does the job and gets out of your way. Additionally, and more importantly, this template is made for Ruby developers (especially Ruby on Rails developers). Ruby developers spend most of their time working with Ruby and most work alot with the ERB syntax. Middleman is built with Ruby, and ERB is the default view language. Using the tools that your already familiar with lowers the cognitive load of context switching between your day to day Ruby work, Rails work, and this static site. Many very successful companies use Middleman for their static sites, including Mailchimp, Soundcloud, Discourse, Digital Ocean, Sass Lang, Banner Bear, and more. See a full list here. If it's good enough for all of them (some of them are billion dollar companies too), it's good enough for us. Why should I pay for this template? Good news, you don't have to. You can go assemble everything yourself for free. However, most of us value our time as its the only resource we can't get back. This template gives you weeks of time back that you'd otherwise spend putting this together yourself. Why is it a yearly subscription? The yearly subscription is to receive upates to template as new things are added released to it. You can purchase the template and immediately cancel your subscription. You have full access to the code. Just clone it and it's yours to do what you want with. No strings attached. What features are included? See the features section for a list of features included in this template. This is also included on the home page. Where can I host this? You can host this any place where static sites can be hosted. Such as, but not limited to: Hatchbox, GitHub Pages, S3, Netlify, Vercel, etc. Do I need any server-side code? No. When the site is built, it's just a bunch of HTML, CSS, and JavaScript files. No server-side code is needed. Can I customize the look and feel? Yes. You can customize the look and feel by editing the CSS and JavaScript files. You can also add new pages and sections to the site. Search What is powering the search? The search is powered by Fuse.js which is a lightweight fuzzy-search library. It's fast and easy to use. Learn more at fusejs.io. Can I customize the search? Yes. You can customize the search by editing the search_controller.js file. You can change the search options, such as the search keys, the threshold, and the location of the search input. The search input is generated by the search_data.json.erb file. You can change the search input by editing this file. document.querySelectorAll('.accordion-item').forEach(item =\u003e { const button = item.querySelector('button'); button.addEventListener('click', () =\u003e { const isActive = item.classList.contains('active'); // Close all accordion items document.querySelectorAll('.accordion-item').forEach(otherItem =\u003e { otherItem.classList.remove('active'); }); // If the clicked item wasn't active, open it if (!isActive) { item.classList.add('active'); } }); });"},{"title":"Why Static Sites Boost Your Online Presence","url":"/blog/why-static-sites-boost-your-online-presence/","content":"The Speed Advantage: Why Static Sites Boost Your Online Presence Lightning-Fast Load Times Improved SEO Rankings Enhanced User Experience Cost-Effective Scaling The Speed Advantage: Why Static Sites Boost Your Online Presence In today’s fast-paced digital world, the speed of your website can make or break your online success. This is where static sites shine, offering a significant advantage over their dynamic counterparts. Let’s explore why static sites are becoming the go-to choice for businesses and individuals looking to enhance their web presence. Just look at this graph: (This is just a placeholder image) Lightning-Fast Load Times Static sites are pre-built and served directly to users, eliminating the need for server-side processing with each request. This results in dramatically faster load times, often measured in milliseconds rather than seconds. In an era where users expect instant gratification, this speed can be the difference between engaging a visitor and losing them to a competitor. Improved SEO Rankings Search engines, particularly Google, factor in page speed when determining search rankings. Faster-loading static sites often receive preferential treatment in search results, boosting your visibility and driving more organic traffic to your business or personal brand. Enhanced User Experience Speed isn’t just about SEO; it’s about user satisfaction. A fast-loading site reduces bounce rates and increases the likelihood that visitors will explore more of your content, leading to higher engagement and conversion rates. Cost-Effective Scaling As your online presence grows, static sites scale effortlessly. With no complex databases or server-side applications to manage, you can handle traffic spikes without worrying about server crashes or slowdowns. This reliability ensures that your site remains accessible even during peak times, maintaining your professional image. In conclusion, the speed advantage of static sites translates directly into better user experiences, improved search engine rankings, and more efficient resource utilization. For businesses and personal brands alike, this can lead to increased visibility, engagement, and ultimately, success in the digital realm."},{"title":"Unleashing Creativity: The Flexibility of Static Sites for Personal Branding","url":"/blog/unleashing-creativity-the-flexibility-of-static-sites-for-personal-branding/","content":"Unleashing Creativity: The Flexibility of Static Sites for Personal Branding Complete Design Control Easy Integration of Multimedia Versatile Content Management Effortless Version Control Seamless Third-Party Integrations Future-Proof Technology Unleashing Creativity: The Flexibility of Static Sites for Personal Branding In the realm of personal branding, flexibility and control over your online presence are crucial. Static sites emerge as a powerful tool in this context, offering unparalleled flexibility that can help you craft a unique and impactful personal brand. Let’s explore how static sites can unleash your creativity and elevate your personal brand. Complete Design Control Static sites give you total control over your site’s design and layout. Without the constraints of pre-built themes or CMS limitations, you have the freedom to create a website that truly reflects your personal brand. This level of customization ensures that your site stands out in a sea of cookie-cutter web presences. Easy Integration of Multimedia Whether you’re a photographer, videographer, or podcaster, static sites excel at showcasing multimedia content. With optimized image loading and seamless video integration, you can create a rich, engaging experience that highlights your work and captivates your audience. Versatile Content Management Contrary to popular belief, static sites can be incredibly dynamic in terms of content management. With modern static site generators and headless CMS options, you can easily update your content without sacrificing the benefits of a static site. This versatility allows you to keep your personal brand fresh and relevant. Effortless Version Control Static sites typically use version control systems like Git, making it easy to track changes, collaborate with others, and roll back if needed. This feature is particularly valuable for maintaining consistency in your personal brand messaging and design over time. Seamless Third-Party Integrations From contact forms to e-commerce solutions, static sites can easily integrate with a wide range of third-party services. This flexibility allows you to add functionality to your personal brand site without compromising on speed or security. Future-Proof Technology The simplicity of static sites makes them inherently future-proof. As web technologies evolve, updating or migrating a static site is often much simpler than with complex dynamic sites. This ensures that your personal brand can adapt and grow alongside technological advancements. In conclusion, static sites offer a flexible, powerful platform for building and evolving your personal brand. By embracing the creative freedom and technical advantages of static sites, you can create a unique, engaging online presence that truly represents you and resonates with your audience."},{"title":"Jekyll vs Middleman ... Which one should you choose?","url":"/blog/jekyll-vs-middleman/","content":"Why Choose Middleman Over Jekyll for Your Ruby Static Site? Middleman Pros of Middleman Cons of Middleman Jekyll Pros of Jekyll Cons of Jekyll Why Choose Middleman Over Jekyll? Why Choose Middleman Over Jekyll for Your Ruby Static Site? When building a static site with ruby, two popular options often come up: Middleman and Jekyll. Both are powerful, but they have different strengths that make them suitable for various use cases. In this post, we’ll break down the pros and cons of each and help you decide which one might be the better fit for your project. Middleman Middleman is a static site generator built on Ruby. It provides a highly customizable framework for building anything from simple blogs to complex sales and marketing sites and more. Pros of Middleman Flexibility: Middleman is known for its flexibility. It allows you to build nearly anything you want, provides data structures, extensions, integrations with third-party APIs, and the ability to tailor every aspect of your build process to what you want the output to be. Ruby Ecosystem: If you’re familiar with Ruby or work on Rails applications, Middleman will feel more comfortable. It allows you to use Ruby gems and libraries directly. Customizable Build Process: Middleman’s build process is highly customizable, making it easier to integrate with tools like esbuild, third party integrations for headless CMS integration, custom scripts and css processors like Tailwind CSS. Powerful Extensions: Middleman has a range of plugins and extensions, such as blogging, image optimizers and internationalization (i18n) support, gzip compression, and much more. All of which make it ideal for more complex sites. Cons of Middleman Steeper Learning Curve: Due to its flexibility, Middleman can have a steeper learning curve, especially for those unfamiliar with Ruby. This is why we created Ruby Static Pro. Less Out-of-the-Box: Unlike Jekyll, Middleman requires a bit more setup to get started, especially if you’re looking for a simple blog or small site. Again, this is why Ruby Static Pro exists - to alleviate you of these issues. Jekyll Jekyll is also built on Ruby and is known for its simplicity, especially when creating blogs or personal websites. It’s the backbone of GitHub Pages, making it easy to deploy directly from a GitHub repository. Pros of Jekyll Simple Setup: Jekyll is easy to get up and running. With a few commands, you can have a basic blog or static site. Integrated with GitHub Pages: Jekyll’s tight integration with GitHub Pages makes it a great option for developers who want a hassle-free deployment workflow for a very simplistic site. Large Community: Jekyll has a large community and many themes, plugins, and tutorials. Finding solutions or pre-built themes is relatively easy. Markdown Support: Jekyll’s Markdown support is strong and intuitive, making it easy to create content without worrying too much about the underlying code. Cons of Jekyll Limited Flexibility: Jekyll is more opinionated than Middleman, which can make it less suitable for projects that require significant customization or advanced configurations. Your options are rather limited. Plugin Constraints: While Jekyll has many plugins, you are limited in terms of customization, especially when deploying to GitHub Pages, where certain plugins aren’t allowed. Why Choose Middleman Over Jekyll? You might want to choose Middleman if: You need a highly customizable build process and more control over how your content is rendered. You’re building a complex sales or marketing site or web app that needs to integrate with external data sources. You are comfortable with Ruby or already work within the Ruby ecosystem. On the other hand, Jekyll is a great choice if: You want a simple, fast setup for a blog or personal site. You plan to host your site on GitHub Pages and want an easy deployment process. You prefer a minimalistic approach with a focus on writing content rather than tweaking configurations. Ultimately, both Middleman and Jekyll are excellent tools, and the choice comes down to your specific needs. If you’re looking for flexibility and customization, Middleman might be the better fit. If simplicity and ease of use are your top priorities, Jekyll is likely the way to go. While Middleman might be more complex initially, there is a great power to be had. With Ruby Static Pro, all of the configuration and setup is done for you. Simply clone the repo and start making your site. Get your copy of Ruby Static Pro today."},{"title":"Tailwind CSS 4 Rust Compilation UTF8Error on GitHub Actions","url":"/blog/tailwind-css-4-compilation-on-github-actions/","content":"Tailwind CSS 4 Compilation Issues with GitHub Actions Fixing the UTF8Error Tailwind CSS 4 Compilation Issues with GitHub Actions I recently upgraded Ruby Static Pro to use Tailwind CSS 4 and run into some issues with compiling the CSS on GitHub Actions with ubuntu-latest as the agent. The code would compile fine on my local machine (macOS), but when I pushed the code to GitHub, the CI/CD pipeline would fail with an error. 🤔 The error I was getting was: ⚡ Done in 10ms | == External: \u0026gt; build:css | == External: \u0026gt; tailwindcss -i source/stylesheets/site.css -o .tmp/dist/site.css | | thread '\u0026lt;unnamed\u0026gt;' panicked at crates/oxide/src/extractor/pre_processors/ruby.rs:37:59: | called `Result::unwrap()` on an `Err` value: Utf8Error { valid_up_to: 0, error_len: Some(1) } | stack backtrace: | 0: 0xffff541377c4 - \u0026lt;unknown\u0026gt; | 1: 0xffff540726a0 - \u0026lt;unknown\u0026gt; | 2: 0xffff54136f54 - \u0026lt;unknown\u0026gt; | 3: 0xffff54137598 - \u0026lt;unknown\u0026gt; | 4: 0xffff54136cd8 - \u0026lt;unknown\u0026gt; | 5: 0xffff54160ae8 - \u0026lt;unknown\u0026gt; | 6: 0xffff54160a60 - \u0026lt;unknown\u0026gt; | 7: 0xffff54161018 - \u0026lt;unknown\u0026gt; | 8: 0xffff54038c98 - \u0026lt;unknown\u0026gt; | 9: 0xffff54038f04 - \u0026lt;unknown\u0026gt; | 10: 0xffff541a0a8c - \u0026lt;unknown\u0026gt; | 11: 0xffff5417acec - \u0026lt;unknown\u0026gt; | 12: 0xffff5417f10c - \u0026lt;unknown\u0026gt; | 13: 0xffff541a480c - \u0026lt;unknown\u0026gt; | 14: 0xffff5417f350 - \u0026lt;unknown\u0026gt; | 15: 0xffff54193e74 - \u0026lt;unknown\u0026gt; | 16: 0xffff541a4994 - \u0026lt;unknown\u0026gt; | 17: 0xffff5417f350 - \u0026lt;unknown\u0026gt; | 18: 0xffff54193e74 - \u0026lt;unknown\u0026gt; | 19: 0xffff541a4994 - \u0026lt;unknown\u0026gt; | 20: 0xffff5417f350 - \u0026lt;unknown\u0026gt; | 21: 0xffff54193e74 - \u0026lt;unknown\u0026gt; | 22: 0xffff541a4994 - \u0026lt;unknown\u0026gt; | 23: 0xffff5417f350 - \u0026lt;unknown\u0026gt; | 24: 0xffff541a480c - \u0026lt;unknown\u0026gt; | 25: 0xffff5417f350 - \u0026lt;unknown\u0026gt; | 26: 0xffff541a480c - \u0026lt;unknown\u0026gt; | 27: 0xffff5417f350 - \u0026lt;unknown\u0026gt; | 28: 0xffff54196f30 - \u0026lt;unknown\u0026gt; | 29: 0xffff5403dfe8 - \u0026lt;unknown\u0026gt; | 30: 0xffff540b4a94 - \u0026lt;unknown\u0026gt; | 31: 0xffff540b66e4 - \u0026lt;unknown\u0026gt; | 32: 0xffff54161094 - \u0026lt;unknown\u0026gt; | 33: 0xffff823ed5c8 - \u0026lt;unknown\u0026gt; | 34: 0xffff82455edc - \u0026lt;unknown\u0026gt; | 35: 0x0 - \u0026lt;unknown\u0026gt; | fatal runtime error: failed to initiate panic, error 283896592 | Aborted | == External: Command failed with non-zero exit status This was an error with the Tailwind CSS 4 Rust Compiler. The error was initially very confusing as there was not backtrace, so I added the following to the GitHub action step: - name: Build Middleman site run: bundle exec middleman build # My tailwindcss compilation step was called in here env: RUST_BACKTRACE: full This would then allow me to see the full backtrace of the error, but it still was not super helpful. Fixing the UTF8Error The problem ended up being that I needed to provide the tailwindcss cli with a path to look for sources. It was looking in god knows where before and it was finding files that were giving it problems with UTF-8 encoding. I had to specify the location of the source files in the new Tailwind CSS 4 css import command like this: - @import 'tailwindcss'; + @import 'tailwindcss' source(\"../\"); It needed to be in ../source because the site.css file in Ruby Static Pro is in the /stylesheets folder. The first line will crash the Tailwind CSS compiler, but when you add the source that Tailwind CSS should look in, the error goes away. Hopefully this helps you solve your error as well, if you’re running into it. Hat tip to this comment for giving me the idea to try this."},{"title":"Implementing Your Static Site (Example Code Blocks)","url":"/blog/from-theory-to-practice-implementing-your-static-site/","content":"From Theory to Practice: Implementing Your Static Site Choosing a Static Site Generator Creating Content Example Code Snippets Adding Custom Styles Including Assets into the Asset Block Deploying Your 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: \u0026lt;% content_for :assets do %\u0026gt; \u0026lt;%= stylesheet_link_tag \"faq\" %\u0026gt; \u0026lt;% end %\u0026gt; This includes the faq.css file in the assets code block in the \u0026lt;head\u0026gt; tag which can be seen in the layout.erb file: \u0026lt;%= yield_content :assets %\u0026gt; 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 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!"},{"title":"Terms of Use","url":"/terms/","content":"Terms of Use Last updated: 2025-10-24 12:55:29 (this date is generated by Ruby via ERB, then the markdown processor takes over, hence the terms.html.markdown.erb format) This is a sample Terms of Use. Please do not use it. This is just a demonstration. Welcome to Ruby Static Pro (“we,” “our,” or “us”). By accessing or using our static site application (the “App”), you agree to comply with and be bound by the following Terms of Use. If you do not agree to these terms, please do not use the App. 1. Acceptance of Terms By using the App, you acknowledge that you have read, understood, and agree to be bound by these Terms of Use and any future amendments and additions to these Terms of Use as published from time to time on this App. 2. Modifications to Terms of Use We reserve the right to modify these Terms of Use at any time without prior notice. Your continued use of the App after any such changes constitutes your acceptance of the new Terms of Use. 3. Use of the App You agree to use the App only for lawful purposes and in a way that does not infringe the rights of, restrict or inhibit anyone else’s use and enjoyment of the App. 4. Intellectual Property Rights The content, organization, graphics, design, compilation, magnetic translation, digital conversion, and other matters related to the App are protected under applicable copyrights, trademarks, and other proprietary rights. Copying, redistributing, use or publication by you of any such matters or any part of the App is strictly prohibited without our express prior written permission. 5. Disclaimers The App is provided on an “as is” and “as available” basis. We do not warrant that the App will be uninterrupted or error-free. There may be delays, omissions, interruptions, and inaccuracies in the content or other materials available through the App. 6. Limitation of Liability To the fullest extent permitted by applicable law, we shall not be liable for any indirect, incidental, special, consequential, or punitive damages, or any loss of profits or revenues, whether incurred directly or indirectly, or any loss of data, use, goodwill, or other intangible losses resulting from your access to or use of or inability to access or use the App. 7. Indemnification You agree to indemnify, defend, and hold harmless Ruby Static Pro/Agilevent Corporation, its officers, directors, employees, agents, and third parties, for any losses, costs, liabilities, and expenses (including reasonable attorneys’ fees) relating to or arising out of your use of or inability to use the App, any user content posted by you, your violation of any terms of this Agreement or your violation of any rights of a third party, or your violation of any applicable laws, rules or regulations. 8. Governing Law These Terms of Use and any dispute or claim arising out of, or related to them, shall be governed by and construed in accordance with the laws of New Jersey, USA without giving effect to any choice or conflict of law provision or rule. 9. Contact Information If you have any questions about these Terms of Use, please contact us at support at agilevent dot com. By using this App, you acknowledge that you have read these Terms of Use, understood them, and agree to be bound by them. If you do not agree to these Terms of Use, you are not authorized to use the App."},{"title":"Privacy Policy","url":"/privacy/","content":"Privacy Policy Last updated: 2025-10-24 12:55:29 This Privacy Policy describes how Ruby Static Pro/Agilevent (“we”, “us”, or “our”) collects, uses, and discloses your personal information when you use Ruby Static Pro (the “App”). 1. Information We Collect 1.1 Personal Information We may collect the following types of personal information: Name (if purchasing a license) Email address (if purchasing a license) IP address Usage data (website analytics) 1.2 Usage Data We may also collect information on how the App is accessed and used (“Usage Data”). This may include information such as your computer’s Internet Protocol address, browser type, browser version, the pages of our App that you visit, the time and date of your visit, the time spent on those pages, and other diagnostic data. 2. How We Use Your Information We use the collected data for various purposes: To provide and maintain our App To notify you about changes to our App To provide customer support To gather analysis or valuable information so that we can improve our App To monitor the usage of our App To detect, prevent and address technical issues 3. Data Retention We will retain your Personal Information only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Information to the extent necessary to comply with our legal obligations, resolve disputes, and enforce our legal agreements and policies. 4. Data Transfer Your information, including Personal Information, may be transferred to — and maintained on — computers located outside of your state, province, country or other governmental jurisdiction where the data protection laws may differ from those of your jurisdiction. 5. Disclosure of Data We may disclose your Personal Information in the good faith belief that such action is necessary to: Comply with a legal obligation Protect and defend the rights or property of Ruby Static Pro/Agilevent Prevent or investigate possible wrongdoing in connection with the App Protect the personal safety of users of the App or the public Protect against legal liability 6. Security of Data The security of your data is important to us but remember that no method of transmission over the Internet or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Information, we cannot guarantee its absolute security. 7. Your Data Protection Rights Depending on your location, you may have certain data protection rights. These may include: The right to access, update or delete the information we have on you The right of rectification The right to object The right of restriction The right to data portability The right to withdraw consent 8. Changes to This Privacy Policy We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the “Last updated” date at the top of this Privacy Policy. 9. Contact Us If you have any questions about this Privacy Policy, please contact us: By email: support at agilevent dot com"},{"title":"Welcome","url":"/","content":"Ruby Static Pro The Ruby static site generator template for blogs, personal sites, sales/marketing sites \u0026 more. Fast. Flexible. Fantastic. Sign Up See it in Action Watch a video demonstration of Ruby Static Pro. Features To Help You Scale Ruby Static Pro offers a variety of features to help you easily build and scale your static site. Middleman Powered by Middleman static site generator, highly extensible, configurable, and easy to use. Tailwind CSS 4 Easily style your site with Tailwind CSS, a utility-first CSS framework. Dark Mode Built-in dark mode with automatic system preference detection and manual toggle. Consistent styling across all components with CSS variables. Stimulus.js Stimulus is setup out of the box so you can easily craft interactive components. Fuse.js Search Fuse.js is integrated client-side for fast and fuzzy search. Powered by local data that is regenerated on each build. Try it here. Integrated with Stimulus. Esbuild Esbuild is configured for fast and efficient bundling of your assets and JavaScript, supporting ES6 and beyond. Sitemap The /sitemap.xml is regenerated automatically when you build your site, ensuring search engines can easily crawl your site. Blogging Blogging is set up and powered by the middleman blogging extension. Easily add, edit, and publish posts. Blog feed is automatically generated. Markdown Markdown is supported out of the box, allowing you to easily write content in a human-readable format. Syntax Highlighting Syntax highlighting is supported (example) in markdown files via fenced code blocks with the language specified and inline backticks. Author Blocks Author blocks are supported in blog posts, allowing you to easily add author information to your posts. Open Graph / X Cards Open Graph, X Cards (Twitter Cards), and other meta tags are automatically generated for each page, allowing for easy sharing on social media. Demo 1, Demo 2 Favicons Favicons are present in the main layout, simply replace the existing favicons in the source/images directory. Legal Pages Example privacy policy and terms of service pages are included in the installation. Just replace the contents with yours. Github CI/CD Ships with pre-configured Github Actions for continuous integration and deployment to make sure your changes don't break your build. Buy. Clone. Modify. Ship. All of the code is yours to keep. Download the source code and start building your next project. Clone Your Copy Now From The Blog Recent Posts from our Blog View post Tailwind CSS 4 Rust Compilation UTF8Error on GitHub Actions How we resolved the Utf8Error Rust compilation error on GitHub Actions after updating to Tailwind CSS 4. View post Jekyll vs Middleman ... Which one should you choose? Trying to decide between Jekyll and Middleman for your Ruby static site? Learn which one is better for you in this post. View post Unleashing Creativity: The Flexibility of Static Sites for Personal Branding Static sites offer unparalleled design control, easy integration options, allowing you to create a unique and adaptable online presence that truly reflects your personal brand."},{"title":"Hosting","url":"/docs/hosting/","content":"Hosting Ruby Static Pro can be hosted any number of places that host static files. The site you’re reading now is hosted on Digital Ocean and managed with Hatchbox.io. However, you can use any host that you’d like though. Here’s a list of some of the places where you can host static websites: Hatchbox.io GitHub Pages Netlify Vercel Amazon AWS S3 Cloudflare Pages Surge Firebase Hosting GitLab Pages Render Any VPS Etc These platforms offer various features and pricing options for hosting static websites, catering to different needs and preferences. As long as your server can serve static files, it will work."},{"title":"Analytics","url":"/docs/analytics/","content":"Analytics If you want to add analytics to your site, you’ll need to likely add a script to your site. You can do that in the /source/_header.erb partial file: \u0026lt;% if build? %\u0026gt; \u0026lt;%# Include your analytics script here so that its only active on your final build. %\u0026gt; \u0026lt;% end %\u0026gt; Put your analytics code between the if/end statement. This will ensure that your analytics are only active on your production build."},{"title":"Installation","url":"/docs/installation/","content":"Installing Ruby Static Pro Installing Ruby Static Pro and getting up and running is easy. Clone Ruby Static Pro: git clone git@github.com:rubystaticpro/rubystaticpro.git my-static-app cd my-static-app git remote rename origin rubystaticpro Run npm install Run bundle install Run bundle exec middleman serve or bundle exec middleman build Your app will now be running on the default port 4567, via localhost:4567 Updating the Site Name Open the config.rb file and update the site name, description and host values: set :site_name, \"Ruby Static Pro\" set :site_description, \"The Ruby static site generator template for blogs, personal sites, sales/marketing sites \u0026amp; more. Fast. Flexible. Fantastic.\" # Domain to use for build or for dev set :domain, build? ? \"demo.rubystaticpro.com\" : \"localhost:4567\" Save the file and your site should now use the proper name and description in the site header, open graph/x cards/etc. Updating the Default Open Graph Image Until otherwise updated, the default open graph image will show. This image is located at /images/og/open-graph.png. You will want to update it. Learn more about the Open Graph tags here"},{"title":"Stimulus","url":"/docs/stimulus/","content":"Stimulus Stimulus is installed and configurd and ready to use in your app. Stimulus controllers are located in /source/javascripts/controllers/ There is one controller already set up and working, this is the search_controller.js which powers the search in Ruby Static Pro (View search demo) Tailwind Stimulus Components Ruby Static Pro also comes with Tailwind Stimulus Components pre-installed. This library includes utitilies to help with: Alerts AutoSaving Color Preview Dropdowns Modals Popovers Slideovers Tabs Toggles See the component documentation for demos of each component. The Toggle component is already enabled. To enable more, simply open the /source/javascripts/controllers/index.js and import the additional components and register them with the application. Just follow the same pattern that is alreayd in place for the Toggle component. Adding a New Stimulus Controller To add a new custom stimulus controller … Add the new controller file to /source/javascripts/controllers/ Lets call it stats_controller.js and assume its used to fetch stats from some AIP/etc. Open the /source/javascripts/controllers/index.js file Add an import for your controller: import StatsController from \"./stats_controller\" Register your controller with the application object: application.register(\"stats\", StatsController) Your Stats controller is now ready to be used anywhere in your site."},{"title":"Blog Feed","url":"/docs/blog-feed/","content":"Blog Feed The blog feed is available at /blog/feed.xml, view it here on the demo. Users can subscribe to the feed using any of their favorite feed readers. This will return a feed that looks like this: \u0026lt;feed xmlns=\"http://www.w3.org/2005/Atom\"\u0026gt; \u0026lt;title\u0026gt;Ruby Static Pro Blog\u0026lt;/title\u0026gt; \u0026lt;subtitle\u0026gt;A blog about Ruby Static Pro\u0026lt;/subtitle\u0026gt; \u0026lt;id\u0026gt;https://demo.rubystaticpro.com/blog\u0026lt;/id\u0026gt; \u0026lt;link href=\"https://demo.rubystaticpro.com/blog\" /\u0026gt; \u0026lt;link href=\"https://demo.rubystaticpro.com/blog/feed.xml\" rel=\"self\" /\u0026gt; \u0026lt;updated\u0026gt;2024-09-16T15:38:00+00:00\u0026lt;/updated\u0026gt; \u0026lt;entry\u0026gt; \u0026lt;title\u0026gt;Unleashing Creativity: The Flexibility of Static Sites for Personal Branding\u0026lt;/title\u0026gt; \u0026lt;link rel=\"alternate\" href=\"https://demo.rubystaticpro.com/blog/unleashing-creativity-the-flexibility-of-static-sites-for-personal-branding/\" /\u0026gt; \u0026lt;id\u0026gt; https://demo.rubystaticpro.com/blog/unleashing-creativity-the-flexibility-of-static-sites-for-personal-branding/\u0026lt;/id\u0026gt; \u0026lt;published\u0026gt;2024-09-16T15:38:00+00:00\u0026lt;/published\u0026gt; \u0026lt;updated\u0026gt;2024-09-30T11:29:36+00:00\u0026lt;/updated\u0026gt; \u0026lt;summary\u0026gt;Static sites offer unparalleled design control, easy integration options, allowing you to create a unique and adaptable online presence that truly reflects your personal brand.\u0026lt;/summary\u0026gt; \u0026lt;/entry\u0026gt; \u0026lt;entry\u0026gt; \u0026lt;title\u0026gt;Implementing Your Static Site (Example Code Blocks)\u0026lt;/title\u0026gt; \u0026lt;link rel=\"alternate\" href=\"https://demo.rubystaticpro.com/blog/from-theory-to-practice-implementing-your-static-site/\" /\u0026gt; \u0026lt;id\u0026gt; https://demo.rubystaticpro.com/blog/from-theory-to-practice-implementing-your-static-site/\u0026lt;/id\u0026gt; \u0026lt;published\u0026gt;2024-09-15T11:02:00+00:00\u0026lt;/published\u0026gt; \u0026lt;updated\u0026gt;2024-09-30T11:29:36+00:00\u0026lt;/updated\u0026gt; \u0026lt;author\u0026gt; \u0026lt;name\u0026gt;Brian Baiker\u0026lt;/name\u0026gt; \u0026lt;/author\u0026gt; \u0026lt;summary\u0026gt;Static sites are easy to implement using popular tools like Middleman, with simple configuration and deployment options on platforms like Hatchbox, GitHub pages, S3 and more.\u0026lt;/summary\u0026gt; \u0026lt;/entry\u0026gt; \u0026lt;entry\u0026gt; \u0026lt;title\u0026gt;Why Static Sites Boost Your Online Presence\u0026lt;/title\u0026gt; \u0026lt;link rel=\"alternate\" href=\"https://demo.rubystaticpro.com/blog/why-static-sites-boost-your-online-presence/\" /\u0026gt; \u0026lt;id\u0026gt;https://demo.rubystaticpro.com/blog/why-static-sites-boost-your-online-presence/\u0026lt;/id\u0026gt; \u0026lt;published\u0026gt;2024-09-14T22:15:00+00:00\u0026lt;/published\u0026gt; \u0026lt;updated\u0026gt;2024-09-30T11:29:36+00:00\u0026lt;/updated\u0026gt; \u0026lt;author\u0026gt; \u0026lt;name\u0026gt;Brian Baiker\u0026lt;/name\u0026gt; \u0026lt;/author\u0026gt; \u0026lt;summary\u0026gt;Static sites offer lightning-fast load times, improving SEO rankings and user experience, which can significantly enhance your online presence and drive business growth.\u0026lt;/summary\u0026gt; \u0026lt;/entry\u0026gt; \u0026lt;/feed\u0026gt; This is controlled by the feed.xml.builder file. You can customize the feed to your liking by editing this file."},{"title":"Author Blocks","url":"/docs/author-blocks/","content":"Author Blocks Author blocks look like this: This is powered by the author front matter key. This key aligns with a value in the data/authors.yml file. If this key is missing from the blog post frontmatter (more info), the blog post will not have an author block. Here are two examples from the demo (scroll to the bottom of each link): With Author Block Without Author Block Authors Data File In this file you specify the authors of the blog, their name, avatar and bio. Here’s an example with a couple of authors in a sample authors.yml file. - brianbaiker: name: Brian Baiker photo: /images/authors/brianbaiker.jpg bio: Brian is not a real person. His last name is Baiker. Notice the AI? Brians photo was generated by AI. Brian is a figment of your imagination. But Brian would like to say that he loves Ruby and thinks you're a cool person. social_media: x: brianbaiker - janesmith: name: Jane Smith photo: /images/authors/janesmith.jpg bio: Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. social_media: x: If the X handle is provided it will be rendered in author block with a link to their X profile. If the X handle is omitted it will not be rendered. You can add more social media profiles and helpers as best suites you and your site."},{"title":"Favicon","url":"/docs/favicon/","content":"Favicon The favicon files are rendered in the _header.html.erb file as rel=\"icon\" HTML link tags. Here’s one of the favicons: Favicon Files The favicons are located in source/images. The following files are the various sizes that ship with Ruby Static Pro: favicon-16x16.png favicon-32x32.png favicon-192x192.png favicon-512x512.png favicon-apple.png Updating the Favicon Create favicons of the same dimensions and replace them in the source/images directory. You can use tools like Favicon.io to quickly update your favicon."},{"title":"Sitemap","url":"/docs/sitemap/","content":"Sitemap Ruby Static Pro comes with a site map that re-renders on every build. Every time you add a new page, blog post, etc, the sitemap will get updated on the next build. View an example of it here. The sitemap is built by the /sitemap.xml.builder file located in Ruby Static Pro. You can adjust the generation the sitemap in this file."},{"title":"Deployment \u0026 CI/CD","url":"/docs/deployment/","content":"Deployment and CI/CD Deploying your Ruby static pro website is as easy as running the middleman build command and pushing the files to your server. This guide covers the foollowing: Deployment and CI/CD Building the Static Site Cleaning Your Build GitHub CI/CD with GitHub Actions GitHub CI/CD with Hatchbox Enabling Auto Deployment Hatchxbox Auto Deployment Github Action CI/CD Deployment with the Hatchbox Action What happens during this process .. Building the Static Site To build yours static site, perform the following: Run bundle exec middleman build Files are built into the ./build folder Distribute these files to any host that can serve static files, such as any VPS, Hatchbox, Amazon AWS S3, and more. Cleaning Your Build If you need to clean your build because something seems off, you can use the --build switch: bundle exec middleman build --clean Then take the files from the build folder and distribute them to any place where you can host static files. The middleman build command generates your site for you into the build folder. GitHub CI/CD with GitHub Actions CI/CD is already set up and supported if you’re using Hatchbox. However, if you’re not, no worries, you can easily adjust. You can easily set up CI/CD with another procider such as S3, GitHub Pages, Vercel, etc. The .github/workflows/middleman-build.yml file is completely customizable so you can alter it to suit your needs. The only component of the middleman-build.yml file that is specific to Hatchbox is the last action: Deploy to Hatchbox. You can simply delete that and the associated HATCHBOX_DEPLOY_KEY key info. GitHub CI/CD with Hatchbox Ruby Static Pro ships with support for automated deployments via Hatchbox (Ruby Static Pro’s sites use Hatchbox) and the github-hatchbox-deploy-action. This is preconfigured for you in the .github/workflows/middleman-build.yml file, you just need to enable it in Hatchbox, and provide a key to your GitHub secrets. There are a couple steps to get this working: Set up your app on Hatchbox Add your repository info as such (replace the blurred values with yours), such as yourusername/your_repo Click the Dashboard menu on the left and then click Edit. In the Post-build script section add this code: bundle install npm install bundle exec middleman build cp -r build public During a deploy, this code will run as soon as its done pulling in your code from Git. It will install all the necessary Ruby gems and JavaScript packages, then it will build your site and copy it to the public directory which is served by Hatchbox. Then click Update App. Now click Deploy again. Your deployment should succeed. You can view the activity log in Hatchbox to verify. Enabling Auto Deployment You can do this in two ways. Hatchbox Automatic Deploys Github Action Deploy Both work, but we recommend #2. Why? With #1, the code will be automatically deployed on each push to main, which might contain errors causing the deployment to fail. With #2, the Github Action CI/CD pipeline will attempt to build the site, and if its successful, only then will it deploy it. Which one you choose is up to you. Hatchxbox Auto Deployment To enable auto deployment on each push to the main branch: Go to the Repository menu item Scroll down and click Enable automatic deploys Every time you push to main, a deployment will be kicked off, regardless if middleman build works or not. Github Action CI/CD Deployment with the Hatchbox Action This option uses the Hatchbox Github Action. You can view the entire workflow file here. The part of importance is at the end: # Only deploy to hatchbox if the secret is set - name: Deploy to Hatchbox if: env.HATCHBOX_DEPLOY_KEY != '' uses: hatchboxio/github-hatchbox-deploy-action@v2 with: deploy_key: ${{ secrets.HATCHBOX_DEPLOY_KEY }} This will deploy to Hatchbox ONLY after a sucessful build. To enable this, you’ll need to get your Hatchbox Deploy Key and add it to Github. Log into Hatchbox and go to your app Click Repository Scroll down and find the Hatchbox Deploy Key and copy it: No log into Github and go to your repo and click Settings. Find your Secrets and Variables section Click Actions Click New Repository Secret Give it the name of HATCHBOX_DEPLOY_KEY and the value of your copied hatchbox deploy key from above. Save the file. On your next push to main, the Github Action will start, and then it will automatically deploy to your server after a successful build. What happens during this process .. Github Actions builds your app in a clean environment On sucess, it tells the Hatchbox Github Action “Ok, please deploy this” The Hatchbox Action then deploys the latest to your app on your server The files are transferrred up, and then the Post-build script is executed (which installs and builds the site locally) The built site is copied from ./build to public which is the public folder to serve files for the site. Your site is now live."},{"title":"Search Exclusions","url":"/docs/search-exclusions/","content":"Search Exclusions To exclude a page from the search index, add the exclude_from_search_index: true to the frontmatter of the page. For example, Ruby Static Pro does not include the blog index page (located at /blog) in the seach index. Why? Becuase the individual blog posts are the valuable resources that someone is searching for. They probably do not want to land on page 3 of the blog and then find the article and click on it. They want to be taken directly to the article. Thereore, Ruby Static Pro disables the blog index from showing up in the search index. Excluding a Page From Search Here’s what the blog.html.erb frontmatter looks like in order to exclude it from search: --- title: Blog pageable: true exclude_from_search_index: true --- When exclude_from_search_index: true is present, the /source/search_data.json.erb file will exclude it from the search results. Just add that key to any page that you do not want included in the search index."},{"title":"Tailwind CSS","url":"/docs/tailwindcss/","content":"Tailwind CSS Ruby Static pro uses Tailwind CSS for it styling. Configuration is located in the tailwind.config.js file. The main css file is the /source/stylesheets/site.css file. In this file you will find the Tailwind imports and cusom CSS for the site. Tailwind CSS Build Process Ruby Static Pro uses the Tailwind CLI via Middleman’s external pipeline command. You can view this configuration in the config.rb file. Upon build, tailwwind will output the built css file. During development tailwind css will watch for any changes and recompile the css so you can quickly iterate on your site. This is done via the --watch switch. View the config.rb file for more info on the setup."},{"title":"Open Graph","url":"/docs/open-graph/","content":"Open Graph Open Graph tags are automatically rendered for all pages on Ruby Static Pro. The default open graph image is located at: /images/og/open-graph.png and looks like this. There is no additional gem needed for the open graph support. All open graph code is part of Ruby Static Pro. Tags included are: og:site_name og:title og:description og:type og:image og:image:secure_url og:image:type og:image:width og:image:height og:locale og:url twitter:title twitter:description twitter:card twitter:domain twitter:url twitter:image Click here to see an example of what the site looks like when rendered on various social media platforms. Tag Generation Open Graph tag generations happens automatically via the social media tags in the _header.html.erb file: \u0026lt;% social_tags(current_page).each do|key, value| %\u0026gt; \u0026lt;meta property=\"\u0026lt;%= key %\u0026gt;\" content=\"\u0026lt;%= value %\u0026gt;\" /\u0026gt; \u0026lt;% end %\u0026gt; The social_tags method is located in the helper method section of the config.rb file of your Ruby Static Pro stie. This is where all the logic resides for generating the open graph tags. Customizing the Open Graph Image, Title and Description You can customize the open graph results on each page by adding the following to your frontmatter: ogp: # Image is in a folder that has the same name as your blog post file. # e.g. 2024-10-07-foo-bar.html.markdown has a folder called /blog/2024-10-07-foo-bar/ image_path: path_to_your_image.jpg title: My Custom OGP Title description: My Custom OGP Description Providing these values will override the existing defaults that are generated in the social_tags method in config.rb All fields are optional. This means that you can leave the title and description as the defaults and only update the image_path. Same can be said for the title or description. Example, this is valid: ogp: image_path: path_to_your_image.jpg So is this: ogp: title: A Custom Title If the social tags method finds the key in the ogp data structure, it will use that instead of the default. Othwerwise the default will be used. Blog Images and Open Graph See the blogging open graph doc for more info."},{"title":"Blog Open Graph","url":"/docs/blog-open-graph/","content":"Blog Open Graph Support Just like regular posts on Ruby Static Pro, blog posts support Open Graph Protocol (OGP) tags as well and can be override in the same way that the default posts can be overridden too. Default Open Graph Support in Blog Posts By default, the following will be used for Open Graph support. Please see the config.rb file and the social_tags() method for more details. Example frontmatter for a blog post: --- # Title and summary are used for OGP meta tags title: \"The Title That Will Be the OGP Title\" summary: \"This is the summary that will show up as the description in OGP tags\" date: 2024-09-15 11:02 UTC type: blog tags: startups,coding author: brianbaiker featured_image: this_image_will_be_used_as_the_ogp_image.jpg og_image: # Use the following to override the default ogp settings (which is title and summary and featured_image) ogp: title: description: image_path: --- The title and summary will be used for the following open graph tags: The title blog frontmatter will provide OGP values to: og:title twitter:title The summary blog frontmatter will provide OGP values to: og:description twitter:description The featured_image blog frontmater will provide OGP values to: og:image og:image:secure_url twitter:image Overriding Default OGP Values You can see a sample of this in this blog post and it’s respective OGP results. Notice how the featured image is different than the OGP preview. This is because the featured image is set to the image you see on the site, but the ogp, image_path has its value set to another image which will only be visible in anythign requesting/reading the OGP tags (social media, link preview in chats, etc) How To Override The Values To override the default OGP values, you can specify an ogp structure in the frontmatter (as shown above, repeated here for simplicity): ogp: title: description: image_path: All of these values, title, description, and image_path are all optional. Including any of them will override the corresponding ogp tag. title will override the blog title description will override the summary from the blog image_path will override the featured_image If you only want to override the image_path, then just provide that value. If you want to override the description then provide that only. You can provide on or all. They are all optional. Ruby Static Pro will look for each key, and if it is present, it will override the OGP tag for that value. ### Why would you want to override values? You may want to override default values because you have a better image, title and/or description to showcase the blog post in OGP previews. This is compeltely up to you. If you leave out the ogp data structure in the frontmatter, the default values will be provided as mentioned above."},{"title":"Search","url":"/docs/search/","content":"Search The search is powered by fuse.js, a lightweight fuzzy-search library with no other dependencies. The search is 100% client side an the index is built at build time of the static site. You can view a demo of the search functionality on the demo search The Seach Index The search index is created at build time via the /source/search_data.json.erb file. View output example here. In this erb file, Ruby Static Pro iterates over all the resources in the app, and generates a JSON file that is used as the search index. This file will be located at the url: /search_data.json. You can view the file here on the demo As new pages get added to your app, the search data will automatically get updated. Yes, this means that the index could grow quite large. If you want to limit the amount of data that is present that is in the resulting JSON file, you can adjust the code that generates this json file in the /source/search_data.json.erb. This same mechanism is also what powers the doc search here. Notice how the doc search is limited to scope in just the /docs folder. This is a small modification we made to the script to support our docs site. Wiring Up the Search with the Search Stimulus Controller Fuse.js search is wired up with a Stimulus controller, located at /source/javascripts/controllers/search_controller.js You can view the usage of this controller in the search.html.erb file. The controller needs a urlValue and a place to return the results. This is present in the search.html.erb file. The urlValue is provided via the data-search-url-value=\"/search_data.json\" html attribute."},{"title":"Blog Customization","url":"/docs/blog-customizing/","content":"Customizing the Blog Ruby Static Pro uses the Middleman Blogging Extension to run its blog component. The blog configuration is in the config.rb file. This is where you can specify the permalink structure, paging details and more. Blog Index The blog index is located located at /source/blog.html.erb. Customize this file to change the index page. Blog Layout Each blog post uses the same layout. Lets assume you wanted to add something to that layout, maybe a call to action, or an ad or something of that nature. To do that, you’d edit the blog layout file located here: /source/layouts/blog_layout.erb Any changes you make to this file will be present on each blog page. Blog Tags When on the blog index, you’ll see tags like this: When you click on a blog tag you’ll be taken to the tag page that lists all the articles that have that tag. You can edit this layout by editing the /source/tag.html.erb file."},{"title":"Upgrading","url":"/docs/upgrading/","content":"Upgrading Ruby Static Pro You can clone Ruby Static Pro from our Git repository and merge updates at any time. Using Ruby Static Pro with Git Git allows merging changes from Ruby Static Pro into your application, enabling easy integration of new features and improvements. Initial Setup Clone Ruby Static Pro: git clone git@github.com:rubystaticpro/rubystaticpro.git my-static-app cd my-static-app git remote rename origin rubystaticpro Create your GitHub repository. Add the new remote and push: git remote add origin git@github.com:your-account/your-new-repo.git git push -u origin main Merging Updates To incorporate updates from Ruby Static Pro: git fetch rubystaticpro x git merge rubystaticpro/main"},{"title":"esbuild","url":"/docs/esbuild/","content":"esbuild esbuild is set up to enable you to to bundle your javascript assets, in order to use easy module suppport. View the config in package.json which is invoked from an :external_pipeline in the config.rb file."},{"title":"Writing Blog Posts","url":"/docs/writing-blog-posts/","content":"Creating Blog Posts in Ruby Static Pro This guide will walk you through the process of creating new blog posts in Ruby Static Pro with Middleman. We’ll cover two methods: using the Middleman CLI and creating posts manually. Using Middleman CLI The easiest way to create a new blog post is by using the Middleman CLI: bundle exec middleman article \"Your Blog Post Title\" This command will generate a new file with the correct format and frontmatter. The blog will be created from the new_article.tt template (source). The template is explained below. Creating Posts Manually If you prefer to create posts manually, follow these steps: Navigate to the source/blog directory. Create a new file with the naming convention: YYYY-MM-DD-your-post-title.html.markdown For example: 2024-09-24-my-new-post.html.markdown File Location and URL Structure Based on our configuration: Blog post files are stored in the source/blog directory. The URL structure will be: /blog/your-post-title For example, 2024-09-24-my-post.html.markdown will be accessible at /blog/my-post Writing Your Post Posts are written in Markdown and will be rendered as HTML. The content will be formatted using Tailwind CSS typography prose classes for a clean, readable layout. Learn more about tailwind typography. Frontmatter Each post should begin with frontmatter. Here’s a detailed explanation of the frontmatter template: --- # Title and summary are used for OGP meta tags title: \"Your Blog Post Title\" summary: \"A brief summary of your post\" date: 2024-09-24 12:00 UTC type: blog tags: tag1,tag2,tag3 author: yourname # see data/authors.yml file featured_image: # Use the following to override the default OGP settings # ogp: # title: # description: # image_path: --- title: The main title of your blog post. This will be used for OGP (Open Graph Protocol) meta tags by default. summary: A brief description of your post. Also used for OGP meta tags by default. date: The publication date and time of your post. Use the format: YYYY-MM-DD HH:MM UTC. type: Should be set to “blog” for all blog posts. tags: A comma-separated list of tags relevant to your post. author: The name of the post’s author. This is the authors key in the data/authors.yml file. Learn about author blocks here. featured_image: (Optional) Path to an image to be featured in the post. og_image: (Optional) Path to an image specifically for OGP. If not set, it may default to the featured_image. ogp: (Optional) You can override the default OGP settings by uncommenting this section and providing custom title and description. Content Structure After the frontmatter, you can add a table of contents: - TOC {:toc} The table of contents will look like this: The table of contents is automatically generated for you based upon the various headings of your blog post. Then, write your post content using Markdown syntax. Adding Images to Your Blog Post When you want to include images in your blog post, follow these steps: Create a folder with the same name as your blog post file (without the .html.markdown extension) in the source/blog directory. For example, if your post is named 2024-09-24-my-post.html.markdown, create a folder named 2024-09-24-my-post. Place your images in this newly created folder. Reference the images in your Markdown content using the following format: ![Alt text](/blog/2024-09-24-my-post/my_image.jpg) Note that the path starts with /blog/ followed by the folder name and then the image file name. After the site is built, the image will be available at /blog/my-post/my_image.jpg. This organization keeps your images tidy and ensures they’re properly referenced in both development and production environments. Syntax Highlighting See the syntax highlighting doc here. Author Blocks Author blocks are present at the bottom of the blog. View the author blocks docs here. Additional Notes Our configuration uses GitHub Flavored Markdown (GFM) for enhanced formatting options. The smartypants option is enabled, which provides typographically correct output. Posts are paginated, with 9 posts per page. Tag pages are generated automatically and can be accessed at /blog/tags/your-tag. Remember to commit and push your changes to see your new post live on the site!"},{"title":"Syntax Highlighting","url":"/docs/syntax-highlighting/","content":"Syntax Highlighting Ruby Static Pro uses the Rouge syntax highlighter. To use syntax highlight use triple backticks or tildes: ```python def hello_world(): print(\"Hello, World!\") ``` Will output: def hello_world(): print(\"Hello, World!\") … or … ~~~python def hello_world(): print(\"Hello, World!\") ~~~ Will output: def hello_world(): print(\"Hello, World!\") For inline code, use single backticks like this: This is some text, and this is `some_code`. Will output: This is some text, and this is some_code."},{"title":"Docs","url":"/docs/","content":"Ruby Static Pro Docs Ruby Static Pro is a preconfigured static site template that is built on top of Middleman. Why middleman and not something newer and more modern? There’s no need for something newer or modern. Plain and simple - Middleman works and works well. It does the job and gets out of your way. Additionally, and more importantly, this template is made for Ruby developers (especially Ruby on Rails developers). Ruby developers spend most of their time working with Ruby and most work alot with the ERB syntax. Middleman is built with Ruby, and ERB is the default view language. Using the tools that your already familiar with lowers the cognitive load of context switching between your day to day Ruby work, Rails work, and this static site. Does anyone else use Middleman that I might know of? Many successful companies have used the Middleman platform for various parts of of their companies infrastructure, including Mailchimp, ConvertKit, Soundcloud, NASA, WooCommerce, Sony, Best Buy, CoinAPI, Discourse, Digital Ocean, Coinbase, and many more. If it’s good enough for all of them (some of them are billion dollar companies too), it’s good enough for us. Why Should I Pay For This? Good news, you don’t have to. You can go assemble everything yourself for free. However, most of us value our time as its the only resource we can’t get back. This template gives you weeks of time back that you’d otherwise spend putting this together yourself. Why is it a yearly subscription? The yearly subscription is to receive upates to template as new things are added released to it. You can purchase the template and immediately cancel your subscription. You have full access to the code. Just clone it and it’s yours to do what you want with. No strings attached. Ruby Static Pro Features Ruby Static Pro comes with numerous features that will help you launch your site quickly. Tailwind CSS Tailwind Typography Stimulus JS esbuild ERB Support Responsive Design Markdown Support Blogging TOC (Table of Contents on each blog post) Tailwind Typograph Prose (for optimal reading) Pagination Author Blocks Tags / Tag Pages and Pagination Blog XML feed (located at /blog/feed.xml) Markdown Support Syntax Highlighting Code Blocks (set to Github flavored, yet configurable) with back ticks or tildes Inline code (single backticks) FAQ (powered by YAML) Full Fuzzy Search powered by Fuse.js Full data provided at /search_data.json route (this is what powers fuse.js search) Sitemap (located at /sitemap.xml) Open Graph Open Graph Tag Support Twitter Cards Support Support for site and per page and blog post Drop in Analytics (drop in your script file into the layout.html.erb file) Terms of Service Page Privacy Policy Page Sample Product Landing Page Favicons Github CI with Github Actions"}]