- Static Site GeneratorsZola2018-01-31T00:00:00+00:00https://www.fullstackstanley.com/tags/static-site-generators/atom.xmlUsing Middleman with Dokku - Updated2018-01-31T00:00:00+00:002018-01-31T00:00:00+00:00https://www.fullstackstanley.com/articles/using-middleman-with-dokku-updated/<p>In a previous blog post I explained how to set up a Middleman blog alongside Dokku. Since then I’ve found a better approach which uses <code>middleman-deploy</code>.</p>
<span id="continue-reading"></span>
<p>Full credit to this <a href="https://github.com/dokku/dokku/issues/1427">Github thread</a> which pointed me to the right path.</p>
<p>First add your new Dokku app on your server the same way you’d set up any Dokku app.</p>
<pre data-lang="bash" style="background-color:#2b303b;color:#c0c5ce;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#bf616a;">dokku</span><span> apps:create example-url.com
</span></code></pre>
<p>In your local version add middleman deploy to your Gemfile</p>
<p><a href="https://github.com/middleman-contrib/middleman-deploy">https://github.com/middleman-contrib/middleman-deploy</a></p>
<p>Use these settings in your <code>confir.rb</code></p>
<pre data-lang="ruby" style="background-color:#2b303b;color:#c0c5ce;" class="language-ruby "><code class="language-ruby" data-lang="ruby"><span>activate </span><span style="color:#a3be8c;">:deploy </span><span style="color:#b48ead;">do </span><span>|</span><span style="color:#bf616a;">deploy</span><span>|
</span><span> deploy.deploy_method = </span><span style="color:#a3be8c;">:git
</span><span> deploy.remote = '</span><span style="color:#a3be8c;">dokku@<serverip>:example-url.com</span><span>'
</span><span> deploy.branch = '</span><span style="color:#a3be8c;">master</span><span>'
</span><span style="color:#b48ead;">end
</span></code></pre>
<p>Note that in Middleman v3 you should use <code>method</code> and in v4 you should use <code>deploy_method</code></p>
<p>Make sure to add Dokku as a remote git on your local Middleman project</p>
<pre data-lang="bash" style="background-color:#2b303b;color:#c0c5ce;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#bf616a;">git</span><span> remote add dokku dokku@<serverip>:example-url.com
</span></code></pre>
<p>In the <code>source</code> dir add these two files</p>
<p><code>Procfile</code></p>
<pre style="background-color:#2b303b;color:#c0c5ce;"><code><span>web: vendor/bin/heroku-php-nginx -C nginx.conf
</span></code></pre>
<p><code>composer.json</code></p>
<pre style="background-color:#2b303b;color:#c0c5ce;"><code><span>{}
</span></code></pre>
<p>Running build will then put both files in the <code>build</code> which is where Dokku will find them.</p>
<p>To deploy, simply commit to git and run </p>
<pre data-lang="bash" style="background-color:#2b303b;color:#c0c5ce;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#bf616a;">Bundle</span><span> exec middleman deploy
</span></code></pre>
<p>That's all there is to it. Except perhaps one caveat!</p>
<pre data-lang="bash" style="background-color:#2b303b;color:#c0c5ce;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#bf616a;">Can</span><span>'</span><span style="color:#a3be8c;">t deploy! Please add a remote with the name </span><span>'</span><span style="color:#bf616a;">dokku@</span><span><serverip>:example-url.com'</span><span style="color:#a3be8c;"> to your repo
</span></code></pre>
<p>There are a couple of issues at play here, and it's to do with the middleman-deploy gem. Here's the quick fix:</p>
<p>You will need to modify the gem code, do this either by using a <code>git clone</code>, and setting the <code>path:</code> in your Gemfile to your local version. Or (and not recommended) use <code>bundle show middleman-deploy</code> to get the gem location on your computer.</p>
<p>In the file named <code>lib/middleman-deploy/strategies/git/force_push.rb</code> comment out these lines</p>
<pre data-lang="ruby" style="background-color:#2b303b;color:#c0c5ce;" class="language-ruby "><code class="language-ruby" data-lang="ruby"><span style="color:#b48ead;">unless</span><span> remote =~/</span><span style="color:#96b5b4;">\.git$</span><span>/
</span><span> url = `</span><span style="color:#a3be8c;">git config --get remote.</span><span>#{url}</span><span style="color:#a3be8c;">.url</span><span>`
</span><span style="color:#b48ead;">end
</span></code></pre>
<p>If your using the name 'dokku' instead of the full remote url in the <code>config.rb</code>, change the remote from <code>dokku</code> to the full git remote address.</p>
<p>Alternatively to modifying the <code>middleman-deploy</code> code, you can name your dokku project ending with <code>.git</code>.</p>
Using Brunch with Middleman2016-08-25T00:00:00+00:002016-08-25T00:00:00+00:00https://www.fullstackstanley.com/articles/using-brunch-with-middleman/<p><em>Update:</em> I've just released a Middleman template that does the hardwork for you. Check it out on my Github: <a href="https://github.com/acoustep/middleman-brunch">https://github.com/acoustep/middleman-brunch</a>. Read on for an explanation of how it works.</p>
<span id="continue-reading"></span>
<p>I recently started a new blog in an area unrelated to Web Development and was pleased to find that with the release of Middleman v4 you can now specify your own external asset pipeline.</p>
<p>I decided to give Brunch a shot - since I already use it with Elixir's Phoenix Framework and I was pleasantly surprised by how easy it was to get everything set up.</p>
<p>First of all, here's my <code>package.json</code> file - note that Bourbon, Bourbon Neat, Turbolinks, and Font Awesome are all optional but will help provide an example of how to set up various libraries with Brunch and Middleman.</p>
<pre data-lang="json" style="background-color:#2b303b;color:#c0c5ce;" class="language-json "><code class="language-json" data-lang="json"><span>{
</span><span> "</span><span style="color:#a3be8c;">name</span><span>": "</span><span style="color:#a3be8c;">middlemanblog</span><span>",
</span><span> "</span><span style="color:#a3be8c;">version</span><span>": "</span><span style="color:#a3be8c;">1.0.0</span><span>",
</span><span> "</span><span style="color:#a3be8c;">description</span><span>": "",
</span><span> "</span><span style="color:#a3be8c;">main</span><span>": "</span><span style="color:#a3be8c;">brunch-config.js</span><span>",
</span><span> "</span><span style="color:#a3be8c;">scripts</span><span>": {
</span><span> "</span><span style="color:#a3be8c;">test</span><span>": "</span><span style="color:#a3be8c;">echo </span><span style="color:#96b5b4;">\"</span><span style="color:#a3be8c;">Error: no test specified</span><span style="color:#96b5b4;">\"</span><span style="color:#a3be8c;"> && exit 1</span><span>"
</span><span> },
</span><span> "</span><span style="color:#a3be8c;">author</span><span>": "",
</span><span> "</span><span style="color:#a3be8c;">license</span><span>": "</span><span style="color:#a3be8c;">MIT</span><span>",
</span><span> "</span><span style="color:#a3be8c;">devDependencies</span><span>": {
</span><span> "</span><span style="color:#a3be8c;">brunch</span><span>": "</span><span style="color:#a3be8c;">^2.8.2</span><span>",
</span><span> "</span><span style="color:#a3be8c;">css-brunch</span><span>": "</span><span style="color:#a3be8c;">~2.0.0</span><span>",
</span><span> "</span><span style="color:#a3be8c;">clean-css-brunch</span><span>": "</span><span style="color:#a3be8c;">~2.0.0</span><span>",
</span><span> "</span><span style="color:#a3be8c;">copycat-brunch</span><span>": "</span><span style="color:#a3be8c;">^1.1.0</span><span>",
</span><span> "</span><span style="color:#a3be8c;">sass-brunch</span><span>": "</span><span style="color:#a3be8c;">^1.9.2</span><span>",
</span><span> "</span><span style="color:#a3be8c;">javascript-brunch</span><span>": "</span><span style="color:#a3be8c;">~2.0.0</span><span>",
</span><span> "</span><span style="color:#a3be8c;">uglify-js-brunch</span><span>": "</span><span style="color:#a3be8c;">~2.0.1</span><span>",
</span><span> "</span><span style="color:#a3be8c;">node-bourbon</span><span>": "</span><span style="color:#a3be8c;">^4.2.8</span><span>",
</span><span> "</span><span style="color:#a3be8c;">bourbon-neat</span><span>": "</span><span style="color:#a3be8c;">^1.8.0</span><span>",
</span><span> "</span><span style="color:#a3be8c;">font-awesome</span><span>": "</span><span style="color:#a3be8c;">^4.6.3</span><span>",
</span><span> "</span><span style="color:#a3be8c;">turbolinks</span><span>": "</span><span style="color:#a3be8c;">^5.0.0</span><span>"
</span><span> },
</span><span> "</span><span style="color:#a3be8c;">dependencies</span><span>": {
</span><span> "</span><span style="color:#a3be8c;">babel-brunch</span><span>": "</span><span style="color:#a3be8c;">^6.0.6</span><span>"
</span><span> }
</span><span>}
</span></code></pre>
<p>All of the Brunch libraries are copied over from Phoenix's set up.</p>
<ul>
<li><code>css-brunch</code> adds CSS support to brunch</li>
<li><code>clean-css-brunch</code> minifys CSS</li>
<li><code>sass-brunch</code> adds SASS support</li>
<li><code>copycat-brunch</code> is for copying files (in this case for copying font files to a new directory)</li>
<li><code>javascript-brunch</code> adds javascript support</li>
<li><code>uglify-js-brunch</code> minifys the Javascript</li>
</ul>
<p>Here's the <code>brunch-config.js</code></p>
<pre data-lang="js" style="background-color:#2b303b;color:#c0c5ce;" class="language-js "><code class="language-js" data-lang="js"><span>exports.</span><span style="color:#bf616a;">config </span><span>= {
</span><span> overrides: {
</span><span> production: {
</span><span> paths: {
</span><span> public: "</span><span style="color:#a3be8c;">build</span><span>"
</span><span> }
</span><span> }
</span><span> },
</span><span> </span><span style="color:#65737e;">// See http://brunch.io/#documentation for docs.
</span><span> files: {
</span><span> javascripts: {
</span><span> joinTo: "</span><span style="color:#a3be8c;">javascripts/all.js</span><span>"
</span><span> },
</span><span> stylesheets: {
</span><span> joinTo: "</span><span style="color:#a3be8c;">stylesheets/site.css</span><span>",
</span><span> order: {
</span><span> after: ["</span><span style="color:#a3be8c;">source/stylesheets/site.css.scss</span><span>"] </span><span style="color:#65737e;">// concat app.css last
</span><span> }
</span><span> },
</span><span> templates: {
</span><span> joinTo: "</span><span style="color:#a3be8c;">javascripts/all.js</span><span>"
</span><span> }
</span><span> },
</span><span>
</span><span> conventions: {
</span><span> assets: /</span><span style="color:#b48ead;">^</span><span style="color:#96b5b4;">(source\/assets)</span><span>/
</span><span> },
</span><span>
</span><span> paths: {
</span><span> </span><span style="color:#65737e;">// Dependencies and current project directories to watch
</span><span> watched: [
</span><span> "</span><span style="color:#a3be8c;">source/javascripts</span><span>",
</span><span> "</span><span style="color:#a3be8c;">source/stylesheets</span><span>",
</span><span> "</span><span style="color:#a3be8c;">source/assets</span><span>",
</span><span> "</span><span style="color:#a3be8c;">test/static</span><span>"
</span><span> ],
</span><span>
</span><span> </span><span style="color:#65737e;">// Where to compile files to
</span><span> public: "</span><span style="color:#a3be8c;">.tmp/dist</span><span>"
</span><span> },
</span><span>
</span><span> </span><span style="color:#65737e;">// Configure your plugins
</span><span> plugins: {
</span><span> babel: {
</span><span> </span><span style="color:#65737e;">// Do not use ES6 compiler in vendor code
</span><span> ignore: [/</span><span style="color:#96b5b4;">source\/vendor</span><span>/],
</span><span> presets: ['</span><span style="color:#a3be8c;">es2015</span><span>', '</span><span style="color:#a3be8c;">es2016</span><span>']
</span><span> },
</span><span> sass: {
</span><span> debug: '</span><span style="color:#a3be8c;">comments</span><span>',
</span><span> options: {
</span><span> includePaths: [
</span><span> "</span><span style="color:#a3be8c;">node_modules/bourbon/app/assets/stylesheets</span><span>",
</span><span> "</span><span style="color:#a3be8c;">node_modules/font-awesome/scss</span><span>",
</span><span> "</span><span style="color:#a3be8c;">node_modules/bourbon-neat/app/assets/stylesheets</span><span>"
</span><span> ], </span><span style="color:#65737e;">// tell sass-brunch where to look for files to @import
</span><span> precision: </span><span style="color:#d08770;">8 </span><span style="color:#65737e;">// minimum precision required by bootstrap-sass
</span><span> }
</span><span> },
</span><span> copycat: {
</span><span> "</span><span style="color:#a3be8c;">fonts</span><span>": ["</span><span style="color:#a3be8c;">node_modules/font-awesome/fonts</span><span>"]
</span><span> }
</span><span> },
</span><span>
</span><span> modules: {
</span><span> autoRequire: {
</span><span> "</span><span style="color:#a3be8c;">javascripts/all.js</span><span>": ["</span><span style="color:#a3be8c;">source/javascripts/all</span><span>"]
</span><span> }
</span><span> },
</span><span> npm: {
</span><span> enabled: </span><span style="color:#d08770;">true</span><span>,
</span><span> whitelist: ["</span><span style="color:#a3be8c;">turbolinks</span><span>"],
</span><span> globals: {
</span><span> $: '</span><span style="color:#a3be8c;">jquery</span><span>',
</span><span> jQuery: '</span><span style="color:#a3be8c;">jquery</span><span>'
</span><span> }
</span><span> }
</span><span>};
</span></code></pre>
<p>In the <code>overrides</code> section you can see that the <code>public</code> directory is changed to <code>build</code> instead of <code>.tmp/dist</code> which is used in development. This is because when you run <code>middleman build</code> you'll want the files in the build directory and when you run <code>middleman server</code> you'll want them in <code>.tmp/dist</code>.</p>
<p>Watches are set to various asset directories to auto reload. You could also watch the whole source directory for changes if you so wish.</p>
<p>Copycat copies the Font Awesome font files to the appropriate directory</p>
<p>Javascript is set to allow for es2016 code so you can use various Javascript goodies in your code.</p>
<p>The only thing I can't get working is SASS include paths. Even though they are set here, Brunch refuses to find them when imported. This is easy enough to get around by including the relative path in the SASS files which I'll show in a moment.</p>
<p>Here's the relevant snippet of configuration for <code>config.rb</code></p>
<pre data-lang="ruby" style="background-color:#2b303b;color:#c0c5ce;" class="language-ruby "><code class="language-ruby" data-lang="ruby"><span>activate </span><span style="color:#a3be8c;">:external_pipeline</span><span>,
</span><span> </span><span style="color:#a3be8c;">name: :brunch</span><span>,
</span><span> </span><span style="color:#a3be8c;">command:</span><span> build? ? '</span><span style="color:#a3be8c;">./node_modules/brunch/bin/brunch build --production --env production</span><span>' : '</span><span style="color:#a3be8c;">./node_modules/brunch/bin/brunch watch --stdin</span><span>',
</span><span> </span><span style="color:#a3be8c;">source: </span><span>"</span><span style="color:#a3be8c;">.tmp/dist</span><span>",
</span><span> </span><span style="color:#a3be8c;">latency: </span><span style="color:#d08770;">1
</span></code></pre>
<p>Here's how my SASS <code>source/stylesheets/site.css.scss</code> looks. Note that <code>$icon-font-path</code> is important for Font Awesome to find the fonts in the appropriate directory.</p>
<pre data-lang="sass" style="background-color:#2b303b;color:#c0c5ce;" class="language-sass "><code class="language-sass" data-lang="sass"><span style="color:#b48ead;">@charset </span><span>"</span><span style="color:#a3be8c;">utf-8</span><span>";
</span><span style="color:#65737e;">// @import "normalize";
</span><span>$</span><span style="color:#bf616a;">icon-font-path</span><span>: "</span><span style="color:#a3be8c;">/fonts/</span><span>"</span><span style="background-color:#bf616a;color:#2b303b;">;</span><span>
</span><span>$</span><span style="color:#bf616a;">font-stack-system</span><span>: "</span><span style="color:#a3be8c;">helvetica</span><span>"</span><span style="background-color:#bf616a;color:#2b303b;">;</span><span>
</span><span style="color:#b48ead;">@import </span><span>"</span><span style="color:#a3be8c;">../../node_modules/bourbon/app/assets/stylesheets/bourbon</span><span>";
</span><span style="color:#b48ead;">@import </span><span>"</span><span style="color:#a3be8c;">../../node_modules/bourbon-neat/app/assets/stylesheets/neat-helpers</span><span>";
</span><span style="color:#b48ead;">@import </span><span>"</span><span style="color:#a3be8c;">../../node_modules/bourbon-neat/app/assets/stylesheets/neat</span><span>";
</span><span style="color:#65737e;">// @import "base/base"; // This is only for Bourbon Bitters
</span><span style="color:#b48ead;">@import </span><span>"</span><span style="color:#a3be8c;">../../node_modules/font-awesome/scss/font-awesome</span><span>";
</span></code></pre>
<p>Bootstrap and Foundation can both be used in the exact same way as Bourbon. Just locate the main SASS file in your <code>node_modules</code> directory and import!</p>
<p>Example <code>source/javascripts/all.js</code></p>
<pre data-lang="js" style="background-color:#2b303b;color:#c0c5ce;" class="language-js "><code class="language-js" data-lang="js"><span style="color:#b48ead;">import </span><span>"</span><span style="color:#a3be8c;">turbolinks</span><span>";
</span><span>
</span><span style="color:#ebcb8b;">console</span><span>.</span><span style="color:#96b5b4;">log</span><span>('</span><span style="color:#a3be8c;">hello world :)</span><span>');
</span></code></pre>
<p>There you have it! Have fun using Middleman and Brunch!</p>
Using Middleman with Dokku2016-08-20T00:00:00+00:002016-08-20T00:00:00+00:00https://www.fullstackstanley.com/articles/using-middleman-with-dokku/<p>I Recently started using Dokku for my websites, which has been great for using various versions of languages and frameworks and keeping different versions of dependencies separate.</p>
<span id="continue-reading"></span>
<p>I wanted to host my blog - which is a static site built with <a href="https://middlemanapp.com">Middleman</a> - on the same server and came accross <a href="http://thepugautomatic.com/2016/01/static-sites-alongside-dokku-on-digital-ocean/">this article</a> which I feel is the perfect solution for most static sites, but I needed to add on to it for my own convenience with Middleman.</p>
<p>There's the option of using the <a href="https://github.com/middleman-contrib/middleman-deploy">middleman-deploy</a> gem, but since there is a fair amount of issues with this gem I decided to try an alternate solution.</p>
<p>As with the previously linked article mentioned, I have made a separate nginx configuration slightly modified to work with Middleman's pretty URL option.</p>
<p>In my <code>/etc/nginx/conf.d/static.conf</code> file I have the following:</p>
<pre style="background-color:#2b303b;color:#c0c5ce;"><code><span>server {
</span><span> server_name ~^(?<domain>.+)$;
</span><span> root /home/static/sites/$domain;
</span><span> index index.html index.htm;
</span><span> location / {
</span><span> try_files $uri $uri/ =404;
</span><span> # this makesure pretty urls works with html files without the extension
</span><span> default_type "text/html";
</span><span> add_header X-Frame-Options SAMEORIGIN;
</span><span> }
</span><span> location ~ /\.git {
</span><span> deny all;
</span><span> }
</span><span>
</span><span> access_log /var/log/nginx/$domain-static-access.log;
</span><span>
</span><span> # error_log can't contain variables, so we'll have to share: http://serverfault.com/a/644898
</span><span> error_log /var/log/nginx/static-error.log;
</span><span>}
</span></code></pre>
<p>I made sure my build directory is included in git and then pushed it to Github as a subtree.</p>
<pre data-lang="bash" style="background-color:#2b303b;color:#c0c5ce;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#bf616a;">git</span><span> subtree push</span><span style="color:#bf616a;"> --prefix</span><span> build origin production
</span></code></pre>
<p>In my <code>static</code> website directory on my server I clone the repository and switch to production.</p>
<pre data-lang="bash" style="background-color:#2b303b;color:#c0c5ce;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#bf616a;">git</span><span> clone git@github.com:username/example.git
</span><span style="color:#bf616a;">git</span><span> checkout production
</span></code></pre>
<p>Below is an example of commands I can use to push changes up to production!</p>
<pre data-lang="bash" style="background-color:#2b303b;color:#c0c5ce;" class="language-bash "><code class="language-bash" data-lang="bash"><span style="color:#65737e;"># Your usual git commit workflow
</span><span style="color:#bf616a;">middleman</span><span> build
</span><span style="color:#bf616a;">git</span><span> add .
</span><span style="color:#bf616a;">git</span><span> commit</span><span style="color:#bf616a;"> -m </span><span>"</span><span style="color:#a3be8c;">your commit</span><span>"
</span><span style="color:#bf616a;">git</span><span> push origin master
</span><span style="color:#65737e;"># Push update to the production build subtree
</span><span style="color:#bf616a;">git</span><span> subtree push</span><span style="color:#bf616a;"> --prefix</span><span> build origin production
</span><span style="color:#65737e;"># SSH into your server, change into the repo directory and run git pull
</span><span style="color:#96b5b4;">echo </span><span>"</span><span style="color:#a3be8c;">cd sites/example.com && git pull</span><span>" | </span><span style="color:#bf616a;">ssh</span><span> static@example.com /bin/bash
</span></code></pre>
<p>After restarting nginx with <code>sudo service nginx restart</code> everything should work!</p>
Middleman Template: bootstrap3, SASS and Slim2013-11-12T00:00:00+00:002013-11-12T00:00:00+00:00https://www.fullstackstanley.com/articles/middleman-template-bootstrap3-sass-and-slim/<p>As quoted from their website, Middleman is "A static site generator using all the shortcuts and tools in modern web development".</p>
<p>I really love using Middleman for simple static websites. Everything I use in my front end stack (SASS and coffeescript) just works out of the box.</p>
<p>Using two commands <code>middleman</code> while developing a website locally and then <code>middleman build</code> when I'm ready to push the static content to my server. It really saves a lot of time.</p>
<span id="continue-reading"></span>
<p>Anyway to the point of this blog post. One of the features of Middleman is the ability to load ready made templates so you don't have to waste time setting up layouts.</p>
<p>I have written a small template for Middleman that sets up Bootstrap 3 with the Slim templating engine (My preference to HTML). This also uses Bower for javascript dependancies (You will need Node and NPM installed for this).</p>
<p>You can view it / download it from my github repo <a href="https://github.com/acoustep/middleman-bootstrap3-sass-slim">available here</a>.</p>
<h2 id="links">Links</h2>
<ul>
<li><a href="http://middlemanapp.com/">Middleman</a></li>
<li><a href="http://nodejs.org/">NodeJS</a></li>
<li><a href="https://npmjs.org/">NPM</a></li>
<li><a href="http://bower.io/">Bower</a></li>
</ul>