どうでもいいhtml一枚のウェブページを作って公開する #HTML

DropboxがDropbox Basicユーザに対しては2017/3/15にPublicフォルダの公開をやめると言う発表を行いました。
https://www.dropbox.com/help/16
このため、以下の記事の内容の実行は難しくなりました。

Macユーザ向けの解説です

どうでもいいhtml一枚のウェブページをつくる事が多い

ナルホディウスですぞー

どうでもいいのでDropboxのPublicフォルダで公開している
公開までの流れを軽く説明したい

1) ビムを開く

2) html[tab]と打ってテンプレートを展開する

snippet管理に登録しておくと良い
僕はneosnippetで

snippet html
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <title>${1}</title>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <script type="text/javascript" src="http://dl.dropbox.com/u/275354/lib/coffee-script.js"></script>
            <script type="text/coffeescript"></script>
            <link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/275354/lib/cssreset-min.css">
            <style type="text/css" media="screen">
            </style>
        </head>
        <body>
        </body>
    </html>

としている
CoffeeScript Compilerは使うと開発が早い(タイプ数が少なくなる)ので入れておくと便利

3) DropboxのPublicフォルダに保存しながら開発する

4) nginxで確認する

dburlというコマンドを使う

#!/usr/bin/env ruby

require 'optparse'
require 'ruby-debug'

@opt = OptionParser.new
@opt.on('-d') { |v| @is_development = true }
@opt.parse!(ARGV)

def main
  url = generate_url

  `echo #{url} | pbcopy`
  puts "#{url}"
end

def generate_url
  base = @is_development ? 'http://127.0.0.1:8080/' : 'http://dl.dropbox.com/u/275354/'
  path = File.expand_path(ARGV.shift).match(/Dropbox\/Public\/(.*)/)[1]
  url = base + path
end

main

死ぬほど適当だが、実行すると指定されたファイルのdropboxのパブリックリンクをコピーできる
-dをつけるとlocalhostのurlになるが、これは開発中に使う dropboxへのシンクには若干のタイムラグがあるので、nginxを手元で立ち上げている

nginx.conf

# place this to /usr/local/etc/nginx/nginx.conf

# daemon off;

events {
  worker_connections 48;
}

http {
  include       /usr/local/etc/nginx/mime.types;

  server {
    listen          8080;
    server_name     localhost;
    index           index.html;
    root            /Users/po/Dropbox/Public;

    access_log      /dev/null;
    error_log       /dev/null crit;

    expires     off;
    add_header  Cache-Control private;
  }
}

4) Dropboxで確認する

dburlでDropboxのurlをコピーして確認する

5) 公開する

以上です