~franz/f-a.nz

63f7c7257a93f12d96be5020c6ad7c6648264518 — Franz Geffke 2 years ago 32b0ad3
added new post _dev
M Gemfile.lock => Gemfile.lock +24 -5
@@ 3,8 3,22 @@ GEM
  specs:
    addressable (2.5.0)
      public_suffix (~> 2.0, >= 2.0.2)
    aws-sdk (2.10.52)
      aws-sdk-resources (= 2.10.52)
    aws-sdk-core (2.10.52)
      aws-sigv4 (~> 1.0)
      jmespath (~> 1.0)
    aws-sdk-resources (2.10.52)
      aws-sdk-core (= 2.10.52)
    aws-sigv4 (1.0.3)
    colorator (1.1.0)
    colored (1.2)
    concurrent-ruby (1.0.4)
    configure-s3-website (2.3.0)
      aws-sdk (~> 2)
      deep_merge (~> 1.0.0)
    deep_merge (1.0.1)
    dotenv (1.0.2)
    extras (0.1.0)
      forwardable-extended (~> 2.5)
    fastimage (2.0.1)


@@ 37,14 51,13 @@ GEM
      sass (~> 3.4)
    jekyll-watch (1.5.0)
      listen (~> 3.0, < 3.1)
    jmespath (1.4.0)
    kramdown (1.13.1)
    liquid (3.0.6)
    listen (3.0.8)
      rb-fsevent (~> 0.9, >= 0.9.4)
      rb-inotify (~> 0.9, >= 0.9.7)
    mercenary (0.3.6)
    minima (2.1.0)
      jekyll (~> 3.3)
    pathutil (0.14.0)
      forwardable-extended (~> 2.6)
    public_suffix (2.0.4)


@@ 53,11 66,17 @@ GEM
    rb-inotify (0.9.7)
      ffi (>= 0.5.0)
    rouge (1.11.1)
    s3_website (3.4.0)
      colored (= 1.2)
      configure-s3-website (= 2.3.0)
      dotenv (~> 1.0)
      thor (~> 0.18)
    safe_yaml (1.0.4)
    sass (3.4.23)
    sprockets (3.6.3)
      concurrent-ruby (~> 1.0)
      rack (> 1, < 3)
    thor (0.20.0)

PLATFORMS
  ruby


@@ 67,10 86,10 @@ DEPENDENCIES
  jekyll-assets
  jekyll-feed (~> 0.6)
  jekyll-paginate-v2
  minima
  s3_website

RUBY VERSION
   ruby 2.3.3p222
   ruby 2.3.7p456

BUNDLED WITH
   1.15.4
   1.16.3

M _config.yml => _config.yml +1 -1
@@ 23,11 23,11 @@ gems:

# Exclude from processing
exclude:
  - .gitignore
  - Gemfile
  - Gemfile.lock
  - yarn.lock
  - package.json
  - .gitignore
  - node_modules
  - vendor
  - s3_website.yml

A _dev/2018/quick-n-dirty-jekyll-yarn-gulp-gitlab-ci-s3_website-to-s3.md => _dev/2018/quick-n-dirty-jekyll-yarn-gulp-gitlab-ci-s3_website-to-s3.md +124 -0
@@ 0,0 1,124 @@
---
title: "Quick n' Dirty: Jekyll via Gitlab CI to S3 & CloudFront"
layout: post
date: 2018-09-15 00:00:00 +0200
category:
  - dev
tags:
  - gitlab
  - jekyll
  - aws
  - development
  - git
---

## Instructions

This guide assumes that you have configured [GitLab](https://about.gitlab.com/installation/) and [GitLab Runner](https://docs.gitlab.com/runner/install/) with docker and are already using gulp to build you assets, and the `s3_website` gem for deployment to S3 / CloudFront.

This GitLab CI automation will do the following:

1. `bundle install`
2. `yarn`
3. `gulp`
4. `jekyll build`
5. `s3_website push`

If you workflow differs, adjust the `.gitlab-ci.yml` config example below.

### Set-up

1. Add and secure environment values
2. Prepare your repo
3. Add `.gitlab-ci.yml` and push

#### 1) Add and secure environment values

Open your repository and go to `settings/ci_cd` > **Variables**

- `AWS_ACCESS_KEY_ID`, add your ID, select protected
- `AWS_SECRET_ACCESS_KEY`, add your Key, select protected

... and hide the variables.

*Note: Protected environmental variables are only available during build processes on protected branches. This is especially important for public projects, with multiple contributors. The environmental values set are visible to any member with access level Maintainer and above. I'd suggest to limit AWS access to the GitLab IP.*

Next go to `settings/ci_cd` > **General pipelines** and uncheck **Public pipelines**. After that, check under `/settings/repository` > **Protected Branches** and ensure that your `master` branch is protected.

#### 2) Prepare your repo

1) Ensure `s3_website.yml` uses the environmental values, update `BUCKETNAME` and make sure it looks for the site under `public/`.

    s3_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
    s3_secret: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
    s3_bucket: BUCKETNAME

    site: public/

2) Update `_config.yml` to ignore the `vendor` folder - amongst others.

    exclude:
      - .gitignore
      - Gemfile
      - Gemfile.lock
      - yarn.lock
      - package.json
      - node_modules
      - vendor
      - s3_website.yml
      - .gitlab-ci.yml
      - gulpfile.js
      - src
      - README.md

#### 2) Add configuration

Create the `.gitlab-ci.yml` and add the following values.

    image: franzos/ruby-node-gulp-java

    cache:
      paths:
        - vendor/

    before_script:
      - bundle install --path vendor

    stages:
      - build
      - deploy

    build:
      stage: build
      script:
        - yarn
        - gulp
        - JEKYLL_ENV=production bundle exec jekyll build -d public/
      artifacts:
        when: on_success
        paths:
          - public
        expire_in: 1h

    deploy:
      stage: deploy
      script:
        - export AWS_ACCESS_KEY_ID="$(echo "$AWS_ACCESS_KEY_ID")"
        - export AWS_SECRET_ACCESS_KEY="$(echo "$AWS_SECRET_ACCESS_KEY")"
        - bundle exec s3_website push
      only:
        - master

The docker image already includes node, gulp and java for a speedy build and deployment process. With the runner on a 1GB DigitalOcean server, the whole process takes between 1.30 - 3 minutes.

**A note on Artifacts**

Artifacts are used to store the build result and make them available for download trough the GitLab UI. However, most projects will find them unnecessary. Unfortunately we still require them, to make the results of `build` available to the `deploy` stage. However, with the expiry time set to `expire_in: 1h`, these artifacts won't clutter up your hard disk.

## What's next? (Future Posts)

1. Deploy Jekyll to AWS S3 & CloudFront
2. Secure your site with CloudFront SSL or LetsEncrypt
3. Set-up GitLab on Debian
4. Configure GitLab Runner to work with GitLab
5. [Quick n' Dirty: Jekyll via Gitlab CI to S3 & CloudFront](/dev/quick-n-dirty-jekyll-yarn-gulp-gitlab-ci-s3_website-to-s3/)