Start a blog with Middleman

.gitignore

@@ -1,5 +1,9 @@
+build/
 .bundle
 .cache
 .DS_Store
+node_modules/
+public/
 .sass-cache
-build/
+.tmp/
+tmp/

.gitlab-ci.yml

@@ -1,11 +1,27 @@
-image: ruby:2.6.5
+image: ruby:2.7.2
+
+cache:
+  paths:
+    - node_modules
+    - vendor
 
 variables:
+  BUNDLE_DEPLOYMENT: "true"
+  BUNDLE_FROZEN: "true"
+  DEBIAN_FRONTEND: "noninteractive"
   NO_CONTRACTS: "true"
 
 before_script:
-  - gem install bundler
-  - bundle install
+  - curl -sL https://deb.nodesource.com/setup_15.x | bash -
+  - apt-get update -qq
+  - apt-get install -qq -y apt-utils
+  - apt-get upgrade -qq -y
+  - apt-get install -qq -y nodejs
+  - ruby --version
+  - bundle --version
+  - node --version
+  - npm --version
+  - ./bin/setup
 
 build:
   stage: build

.ruby-version

@@ -1 +1 @@
-2.6.5
+2.7.2

Gemfile

@@ -1,7 +1,10 @@
-source 'https://rubygems.org'
+source "https://rubygems.org"
 
-gem 'middleman', '~> 4.2'
-gem 'middleman-autoprefixer', '~> 2.7'
-gem 'mini_racer', '~> 0.2.9'
-gem 'tzinfo-data', platforms: [:mswin, :mingw, :jruby, :x64_mingw]
-gem 'wdm', '~> 0.1', platforms: [:mswin, :mingw, :x64_mingw]
+gem "builder", ">= 3.0"
+gem "middleman", ">= 4.2"
+gem "middleman-autoprefixer", ">= 2.7"
+gem "middleman-blog", ">= 4.0"
+gem "middleman-imageoptim", ">= 0.3"
+gem "redcarpet", ">= 3.3.3"
+gem "tzinfo-data"
+gem "wdm", "~> 0.1", platforms: [:mswin, :mingw, :x64_mingw]

Gemfile.lock

@@ -1,55 +1,73 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (5.0.7.2)
+    activesupport (5.2.4.4)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
-    autoprefixer-rails (9.7.4)
+    autoprefixer-rails (9.8.6.5)
       execjs
-    backports (3.17.0)
+    backports (3.18.2)
+    builder (3.2.4)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
     coffee-script-source (1.12.2)
-    concurrent-ruby (1.1.6)
+    concurrent-ruby (1.1.7)
     contracts (0.13.0)
-    dotenv (2.7.5)
+    dotenv (2.7.6)
     erubis (2.7.0)
     execjs (2.7.0)
+    exifr (1.3.9)
     fast_blank (1.0.0)
-    fastimage (2.1.7)
-    ffi (1.12.2)
-    haml (5.1.2)
+    fastimage (2.2.0)
+    ffi (1.13.1)
+    fspath (3.1.2)
+    haml (5.2.1)
       temple (>= 0.8.0)
       tilt
     hamster (3.0.0)
       concurrent-ruby (~> 1.0)
     hashie (3.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    kramdown (1.17.0)
-    libv8 (7.3.492.27.1)
+    image_optim (0.25.0)
+      exifr (~> 1.2, >= 1.2.2)
+      fspath (~> 3.0)
+      image_size (~> 1.5)
+      in_threads (~> 1.3)
+      progress (~> 3.0, >= 3.0.1)
+    image_optim_pack (0.2.3)
+      fspath (>= 2.1, < 4)
+      image_optim (~> 0.19)
+    image_size (1.5.0)
+    in_threads (1.5.4)
+    kramdown (2.3.0)
+      rexml
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
     memoist (0.16.2)
-    middleman (4.3.6)
+    middleman (4.3.11)
       coffee-script (~> 2.2)
       haml (>= 4.0.5)
-      kramdown (~> 1.2)
-      middleman-cli (= 4.3.6)
-      middleman-core (= 4.3.6)
+      kramdown (>= 2.3.0)
+      middleman-cli (= 4.3.11)
+      middleman-core (= 4.3.11)
     middleman-autoprefixer (2.10.1)
       autoprefixer-rails (~> 9.1)
       middleman-core (>= 3.3.3)
-    middleman-cli (4.3.6)
+    middleman-blog (4.0.3)
+      addressable (~> 2.3)
+      middleman-core (>= 4.0.0)
+      tzinfo (>= 0.3.0)
+    middleman-cli (4.3.11)
       thor (>= 0.17.0, < 2.0)
-    middleman-core (4.3.6)
-      activesupport (>= 4.2, < 5.1)
+    middleman-core (4.3.11)
+      activesupport (>= 4.2, < 6.0)
       addressable (~> 2.3)
       backports (~> 3.6)
       bundler
@@ -71,40 +89,51 @@ GEM
       servolux
       tilt (~> 2.0.9)
       uglifier (~> 3.0)
-    mini_racer (0.2.9)
-      libv8 (>= 6.9.411)
-    minitest (5.14.0)
+    middleman-imageoptim (0.3.0)
+      image_optim (~> 0.25.0)
+      image_optim_pack (~> 0.2.1)
+      middleman-cli
+      middleman-core (>= 3.1)
+    minitest (5.14.2)
     padrino-helpers (0.13.3.4)
       i18n (~> 0.6, >= 0.6.7)
       padrino-support (= 0.13.3.4)
       tilt (>= 1.4.1, < 3)
     padrino-support (0.13.3.4)
       activesupport (>= 3.1)
-    parallel (1.19.1)
-    public_suffix (4.0.3)
-    rack (2.2.2)
-    rb-fsevent (0.10.3)
+    parallel (1.20.1)
+    progress (3.5.2)
+    public_suffix (4.0.6)
+    rack (2.2.3)
+    rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    sassc (2.2.1)
+    redcarpet (3.5.0)
+    rexml (3.2.4)
+    sassc (2.4.0)
       ffi (~> 1.9)
     servolux (0.13.0)
     temple (0.8.2)
     thor (1.0.1)
     thread_safe (0.3.6)
     tilt (2.0.10)
-    tzinfo (1.2.6)
+    tzinfo (1.2.8)
       thread_safe (~> 0.1)
+    tzinfo-data (1.2020.4)
+      tzinfo (>= 1.0.0)
     uglifier (3.2.0)
       execjs (>= 0.3.0, < 3)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  middleman (~> 4.2)
-  middleman-autoprefixer (~> 2.7)
-  mini_racer (~> 0.2.9)
+  builder (>= 3.0)
+  middleman (>= 4.2)
+  middleman-autoprefixer (>= 2.7)
+  middleman-blog (>= 4.0)
+  middleman-imageoptim (>= 0.3)
+  redcarpet (>= 3.3.3)
   tzinfo-data
   wdm (~> 0.1)
 

bin/setup

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+# export BUNDLE_DEPLOYMENT="true"
+export BUNDLE_JOBS="$(nproc)"
+export MAKEOPTS="-j$(nproc)"
+export BUNDLE_DISABLE_PLATFORM_WARNINGS="true"
+
+gem install bundler
+bundle install --quiet
+npm install

config.rb

@@ -1,49 +1,37 @@
-# Activate and configure extensions
-# https://middlemanapp.com/advanced/configuration/#configuring-extensions
-
 activate :autoprefixer do |prefix|
   prefix.browsers = "last 2 versions"
 end
 
-# Layouts
-# https://middlemanapp.com/basics/layouts/
+activate :blog do |blog|
+  blog.calendar_template = "calendar.html"
+  blog.paginate = true
+  blog.tag_template = "tag.html"
+end
+
+activate :directory_indexes
 
-# Per-page layout changes
-page '/*.xml', layout: false
-page '/*.json', layout: false
-page '/*.txt', layout: false
+page "/*.xml", layout: false
+page "/*.json", layout: false
+page "/*.txt", layout: false
+
+configure :development do
+  activate :external_pipeline, name: "gulp", command: "npm start", source: "./tmp/gulp", latency: 1
+end
 
 configure :build do
-  set :build_dir, 'public'
+  set :build_dir, "public"
 
+  activate :asset_hash
+  activate :external_pipeline, name: "gulp", command: "NODE_ENV=production npm run build", source: "./tmp/gulp", latency: 1
+  activate :gzip
   activate :minify_css
   activate :minify_javascript
   activate :relative_assets
-end
 
-# With alternative layout
-# page '/path/to/file.html', layout: 'other_layout'
+  activate :imageoptim do |imageoptim|
+    imageoptim.pngout = false
+    imageoptim.svgo = false
+  end
 
-# Proxy pages
-# https://middlemanapp.com/advanced/dynamic-pages/
-
-# proxy(
-#   '/this-page-has-no-template.html',
-#   '/template-file.html',
-#   locals: {
-#     which_fake_page: 'Rendering a fake page with a local variable'
-#   },
-# )
-
-# Helpers
-# Methods defined in the helpers block are available in templates
-# https://middlemanapp.com/basics/helper-methods/
-
-# helpers do
-#   def some_helper
-#     'Helping'
-#   end
-# end
-
-# Build-specific configuration
-# https://middlemanapp.com/advanced/configuration/#environment-specific-settings
+  ignore "stylesheets/compoents/*.css"
+end

gulpfile.js

@@ -0,0 +1,21 @@
+var gulp = require("gulp");
+var postcss = require("gulp-postcss");
+
+gulp.task("css", function() {
+  return gulp
+    .src("source/stylesheets/site.css")
+    .pipe(
+      postcss([
+        require("postcss-import"),
+        require("tailwindcss"),
+        require("autoprefixer")
+      ])
+    )
+    .pipe(gulp.dest("./tmp/gulp/stylesheets"));
+});
+
+gulp.task("build", gulp.series("css"));
+
+gulp.task("default", gulp.series("css"), function() {
+  gulp.watch("source/stylesheets/**/*.css", ["css"]);
+});