giisyu

S3+CloudFrontで静的サイト作ったときに躓いたポイント

AWSのs3やcoudFrontなどのサービスを使うと、安く全世界にCMSを使って静的ファイルを公開できると聞いて触ってみました。 結果としてはめんどくさかったです。awsのいちサービスを知れて良かったというのはあるかもしれない。

以下はS3+CloudFrontで静的サイト作ってみて躓いたポイントのメモです。

静的Webサイトホスティングで検索すると

参考文献は公式のS3のチュートリアルがまず一番だと思います。検索すると、やってみた系の記事はヒットするのですが、簡略化されていたりで、あまり良くなかったです。（この記事もそうなんで気をつけてね）

giisyu

HtmlWebpackPluginでejsを使う。

webpackではtemplateにhtmlファイルを指定できるが、そのhtmlをモジュール化したかった。（とりあえず暫定。。）

まずwebpackではtemplateにhtml以外のファイルを使うことが出来る。

参考:

jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

giisyu

Webpackで複数のHTMLを出力する。

webpackで複数のHTMLを出力したい。

参考:

jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

Multiple entry points -> multiple html outputs? · Issue #218 · jantimon/html-webpack-plugin

giisyu

webpack2にBootstrap4を入れる

Bootstrap4を試しに使ってみていた。CDNからWebpackに移行しようと思ったら、やはりひとしきり迷った。

日付

2017/06/22

環境　

giisyu

npm install --save jimp
node 
var Jimp = require("jimp");
Jimp.read("画像パス" , (err,lenna)=>{if(err)throw err;lenna.crop(0,0,32,48).quality(100).write("出力パス");})

giisyu

git remote add fork_master レポジトリ
git checkout -b update
git fetch fork_master 
git merge fork_master/master
git add .
git commit -m 
git checkout master
git merge update

giisyu

function spawnLoop(init, onMessage)
{
    var andThen = _elm_lang$core$Native_Scheduler.andThen;

    function loop(state)
    {
        var handleMsg = _elm_lang$core$Native_Scheduler.receive(function(msg) {
            return onMessage(msg, state);
        });
        return A2(andThen, loop, handleMsg);

giisyu

port hello : String -> Cmd msg
port jsHello : (String -> msg) -> Sub msg

giisyu

git clone git@github.com:giisyu/elm-webpack-starter.git %1 && ^
cd %1 && ^
del /q /s /f .git && ^
git init && ^
git add . && ^
git commit -m "first" && ^
npm install && ^
elm-package install -y && ^
npm start

giisyu

import Html exposing (..)
import Html.Attributes exposing (..)

script_ : List (Attribute msg) -> List (Html msg) -> Html msg
script_ =
    Html.node "script"