Skip to content

Instantly share code, notes, and snippets.

View pmallol's full-sized avatar
✨

Paula Mallol pmallol

✨
20 followers · 60 following
View GitHub Profile
@pmallol
pmallol / middleman-webpack-demo index.html.erb
Created July 6, 2020 20:54
Add an About link to the Index page in Middleman app hosted in GitHub Pages
<!-- ../source/index.html.erb -->
---
title: Welcome to Middleman
---
<!-- ... -->
<%= link_to 'About', "about/index.html" %>
@pmallol
pmallol / middleman-webpack-demo index.html.erb
Last active July 6, 2020 20:54
Create an About page in Middleman app hosted in GitHub Pages
<!-- ../souce/about/index.html.erb -->
---
title: About
---
<h1>
Hi there!
</h1>
@pmallol
pmallol / middleman-webpack-demo config.rb
Created July 6, 2020 20:46
Configure build in Middleman, add a :http_prefix to generate relative links in GitHub Pages
# config.rb
#...
# Build-specific configuration
# https://middlemanapp.com/advanced/configuration/#environment-specific-settings
configure :build do
# Generate relative paths to the repo when deploying to GitHub Pages
config[:http_prefix] = '/middleman-webpack-demo'
@pmallol
pmallol / middleman-webpack-demo deploy.yml
Created July 6, 2020 20:41
Add workflow file to deploy Middleman with GitHub Actions to GitHub Pages
# ./github/workflows/deploy.yml
name: Deploy Middleman to GH Pages
on:
push:
branches: [master]
jobs:
build:
@pmallol
pmallol / middleman-webpack-demo config.rb
Last active July 6, 2020 19:27
Add LiveReload to a Middleman app running inside Docker
# Activate and configure extensions
# ...
# Livereload
activate :livereload, host: '0.0.0.0', port: '1234'
@pmallol
pmallol / middleman-webpack-demo docker-compose.yml
Created July 6, 2020 19:17
Add docker-compose.yml to configure docker containers necessary to have a dockerized Middleman app
# docker-compose.yml
version: '3.7'
services:
web:
build: .
command: bundle exec middleman server
volumes:
- '.:/app'
@pmallol
pmallol / middleman-webpack-demo Dockerfile
Last active July 6, 2020 19:14
Dockerfile to build a docker image with Ruby 2.6 and Node.js
# Dockerfile
FROM ruby:2.6.3
WORKDIR /app
RUN curl -sL https://deb.nodesource.com/setup_13.x -o nodesource_setup.sh && \
bash nodesource_setup.sh && \
apt install nodejs
@pmallol
pmallol / middleman-webpack-demo: layout.erb
Created July 3, 2020 22:12
Modify assets name files when adding Webpack to Middleman
<!doctype html>
<html>
<head>
...
<%= stylesheet_link_tag "style" %>
<%= javascript_include_tag "site.min" %>
</head>
...
@pmallol
pmallol / middleman-webpack-demo: config.rb
Created July 3, 2020 22:09
Add Webpack as external pipeline to Middleman
# Webpack
activate :external_pipeline,
name: :webpack,
command: build? ?
"./node_modules/webpack/bin/webpack.js --bail -p" :
"./node_modules/webpack/bin/webpack.js --watch -d --progress --color",
source: ".tmp/dist",
latency: 1
# Dev environment
@pmallol
pmallol / middleman-webpack-demo: webpack.config.js
Last active July 3, 2020 22:06
Add Webpack configuration file
// Add this to a webpack.config.js file
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
site: ['./source/javascripts/site.js'],
style: ['./source/stylesheets/site.css.scss'],
},