unasuke.comをつくる技術

middleman v4

#config.rb
activate :external_pipeline,
  name: :npm,
  command: "npm run sass",
  source: ".tmp/dest"
          

//package.json
{ ...
  "scripts": {
    "sass": "for file in `ls -1 source/stylesheets/[!_]*.scss`; do
              node-sass $file -o source/stylesheets/dest/; done"
  }, ...
}
          

unasuke.comをつくる技術

example of bourbon neat

/haml
%section.sponsors
  - sponsors.each_slice(3) do |_sponsors|
    .row
      - _sponsors.each do |person, data|
        .sponsor
          .card
            = image_tag "sponsors/#{data['image']}", class: "image"
            .name
              = data["name"]
            .account
              %span: i.fa.fa-twitter
              %span
                %a.link[href="https://twitter.com/#{data["twitter"]}"]
                  = data["twitter"]
          

unasuke.comをつくる技術

example of bourbon neat

//scss(一部)
.sponsors {
  margin-bottom: 50px;
  @include outer-container(70%);

  .row {
  @include outer-container();
    margin-bottom: 25px;

    .sponsor {
      @include span-columns(4);
      min-width: 100px;
      padding: 0 20px 0 20px;

      @media screen and (max-width: 426px){

        @include span-columns(12);
        padding: 0;
        margin-bottom: 25px;
      }
    }
  }
}

          

scssは長くなるから各自見てほしさ

unasuke.comをつくる技術

H2O

root@dea852228130:/# apt search h2o
Sorting... Done
Full Text Search... Done
fh2odg/xenial 0.9.4-4build4 amd64
  Freehand to OpenDocument converter
          

unasuke.comをつくる技術

H2O

root@dea852228130:/# apt search h2o
Sorting... Done
Full Text Search... Done
fh2odg/xenial 0.9.4-4build4 amd64
  Freehand to OpenDocument converter
          

パッケージがない！！！

unasuke.comをつくる技術

run H2O on the docker

FROM alpine
RUN apk update && apk upgrade

RUN apk update \
    && apk upgrade \
    && apk add -U perl openssl \
    && apk add -U build-base \
               cmake \
               curl \
               linux-headers \
               zlib-dev \
               ca-certificates curl wget ruby ruby-dev bison \
    && wget -O - https://github.com/h2o/h2o/archive/v1.7.2.tar.gz | tar xz \
        && cd h2o-* \
        && cmake -DWITH_BUNDLED_SSL=on -DWITH_MRUBY=on . \
        && make install \
        && cd .. \
        && rm -rf h2o-* \
    && apk del build-base \
    && rm -rf /var/cache/apk/*

RUN mkdir /etc/h2o
WORKDIR /etc/h2o
EXPOSE 80 443
          

unasuke.comをつくる技術

h2o.conf

# h2o.conf (一部)
hosts:
  "unasuke.com:80":
    listen:
      port: 80
    paths:
      "/":
        redirect: https://unasuke.com/
  "unasuke.com:443":
    listen:
      port: 443
      ssl:
        certificate-file: /etc/letsencrypt/live/unasuke.com/fullchain.pem
        key-file:         /etc/letsencrypt/live/unasuke.com/privkey.pem
    paths:
      "/":
        file.dir: /var/web/unasuke.com/