Nginx conf of cutls.com

cutls.com.conf

map $http_upgrade $connection_upgrade {
  default upgrade;
  ''      close;
}

server {
  listen 80;
  listen [::]:80;
  server_name cutls.com;
  root /home/mastodon/live/public;
  # Useful for Let's Encrypt
  location /.well-known/acme-challenge/ { allow all; }
  location / { return 301 https://$host$request_uri; }
}

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name cutls.com;

  ssl_protocols TLSv1.3 TLSv1.2;
  ssl_ciphers HIGH:!MEDIUM:!LOW:!aNULL:!NULL:!SHA;
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;

  ssl_certificate     /etc/letsencrypt/live/cutls.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/cutls.com/privkey.pem;

  keepalive_timeout    70;
  sendfile             on;
  client_max_body_size 8m;

  root /home/mastodon/live/public;

  gzip on;
  gzip_disable "msie6";
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_buffers 16 8k;
  gzip_http_version 1.1;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

  add_header Strict-Transport-Security "max-age=31536000";

  location / {
    try_files $uri @proxy;
  }

  location ~ ^/(emoji|packs|system/accounts/avatars|system/media_attachments/files) {
    add_header Cache-Control "public, max-age=31536000, immutable";
    try_files $uri @proxy;
  }
  
  location /sw.js {
    add_header Cache-Control "public, max-age=0";
    try_files $uri @proxy;
  }
  location /favicon.ico {
    root /home/mastodon;
  }

  location @proxy {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto https;
    proxy_set_header Proxy "";
    proxy_pass_header Server;

    proxy_pass http://127.0.0.1:3000;
    proxy_buffering off;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    tcp_nodelay on;
  }

  #location /api/v1/streaming {
  #  proxy_set_header Host $host;
  #  proxy_set_header X-Real-IP $remote_addr;
  #  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  #  proxy_set_header X-Forwarded-Proto https;
  #  proxy_set_header Proxy "";

  #  proxy_pass http://127.0.0.1:4000;
  #  proxy_buffering off;
  #  proxy_redirect off;
  #  proxy_http_version 1.1;
  #  proxy_set_header Upgrade $http_upgrade;
  #  proxy_set_header Connection $connection_upgrade;
#
  #  tcp_nodelay on;
  #}
  
  location /about {
    if ($arg_mastodon != "true") {
        proxy_pass https://cutls.toot.app;
    }
    try_files $uri @proxy;
  }
  location /about/more {
    try_files $uri @proxy;
  }

  error_page 500 501 502 503 504 /500.html;
}

index.css

body {
  background-image: url("../img/top.png");
  font-family: "Montserrat", Meiryo, Hiragino Kaku Gothic, sans-serif;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  color: white;
}
#start {
  font-family: "Open Sans";
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  z-index: 2;
  height: 50vh;
}
#start div {
  text-align: center;
  margin: 10px;
}
#next {
  background-color: #282c37;
  width: 100vw;
  min-height: 50vh;
}
h1 {
  font-size: 5rem;
  font-weight: normal;
}
h2 {
  font-size: 3rem;
  font-weight: normal;
}
h3 {
  font-size: 2rem;
  font-weight: normal;
  margin: 0;
}
.white-text {
  color: white;
}
.center {
  text-align: center;
}
.left-side {
  text-align: right;
  width: 50vw;
}
.right-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50vw;
}
.flex-ct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flex-ct .card {
  margin-left: 10px;
  margin-right: 10px;
}
.flex-lp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.card {
  width: 250px;
  height: 320px;
  margin: 5px;
  border-radius: 2px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
  padding: 25px;
  text-align: center;
}
p {
  margin: 0;
}
.card .title {
  font-size: 2rem;
  margin: 10px;
}
.white-text {
  color: white;
}
.card .appeal {
  width: 50px;
}
.card img.me {
  width: 20px;
}
.card .action {
  margin-top: 10px;
}
.small-link {
  color: gray;
  transition: color 0.3s;
}
.small-link:hover {
  color: white;
}
.card .tech {
  font-size: 0.5rem;
  color: #e1e1e1;
  text-align: left;
}
.card .description {
  text-align: left;
}
.card .action i {
  font-size: 1.5rem;
  color: gray;
  margin-left: 5px;
  transition: color 0.3s;
}
.card .description.center, .card .tech.center {
  text-align: center;
}
.spacer {
  height: 1rem;
}
.card .action i:hover {
  color: white;
}
input {
  height: 25px;
}
input,
textarea {
  width: 300px;
  min-height: 50px;
  border: 1px solid #aaa;
  background: #fff;
  border-radius: 1px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #333;
}
input:focus label {
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
.fl_send {
  border-radius: 7px;
  display: inline-block;
  height: 80px;
  width: 300px;
  text-align: center;
  font-size: 25px;
  line-height: 50px;
  vertical-align: middle;
  overflow: hidden;
  background-color: white;
  cursor: pointer;
}

.fl_send .fa-twitter {
  text-shadow: 2px 2px 0px #4287d6;
  font-size: 30px;
}

.fl_send span {
  display: inline-block;
  transition: 0.5s;
}
.bar {
  width: 100vw;
  background-color: #bbdefb;
  height: 30px;
}
a {
  color: #7cabd1;
  text-decoration: none;
}

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1, user-scalable=yes">
    <meta property="og:title" content="Cutls" />
    <meta property="og:image" content="https://cutls.com/img/thedesk.png" />
    <meta property="og:image:width" content="512" />
    <meta property="og:image:height" content="512" />
    <title>Cutls</title>
    <meta name="theme-color" content="green">
    <link rel="preload" as="style"
        href="https://fonts.googleapis.com/icon?family=Material+Icons|Montserrat|Open+Sans:300"
        onload="this.rel='stylesheet'">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
        integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link rel="preload" as="style" href="./css/index.css" onload="this.rel='stylesheet'">
</head>

<body>
    <div id="start">
        <h1>Cutls</h1>
    </div>
    <div id="next"><br>
        <h2 class="center">Contact</h2>
        <div class="flex-ct">
            <div class="card">
                <p class="title"><a href="https://cutls.com/@Cutls" target="_blank" class="white-text">Mastodon</a></p>
                <a href="https://cutls.com/@Cutls" target="_blank"><img src="./img/thedesk.png" class="appeal"></a>
                <p class="description center"><a href="https://cutls.com/@Cutls" target="_blank"
                        class="white-text">Cutls <span class="tech">(Cutls@cutls.com)</span></a></p>
                <div class="action">
                    <a href="https://cutls.com/@Cutls" target="_blank"><i class="fab fa-mastodon"></i></a>
                </div>
                <p class="spacer"></p>
                <p class="title">Mail</p>
                <div class="action">
                    <a href="mailto:web-pro@cutls.com"><i class="fas fa-envelope"></i></a>
                </div>
                <p class="spacer"></p>
                <p class="description center">or <a href="https://github.com/cutls" target="_blank"
                        class="small-link"><i class="fab fa-github"></i>cutls</a></p>
            </div>
            <div class="card">
                <p class="title">ログイン</p>
                <p class="description">cutls.com(当ドメイン)でMastodonを運営しています。</p>
                <p class="description">新規登録は受け付けていません。</p>
                <p class="description center"><a href="/auth/sign_in" class="login">ログイン</a></p>
                <p class="spacer"></p>
                <p class="tech center">または<a href="/about/more">詳しく</a></p>
                <p class="spacer"></p>
                <p class="tech">本来のaboutのページとはNginxのconfで分岐処理をしています。</p>
            </div>
        </div>
        <h2 class="center">Works</h2>
        <div class="flex-lp">
            <div class="card">
                <img src="./img/thedesk.png" class="appeal">
                <p class="title">TheDesk</p>
                <p class="description">Mastodonクライアント。</p>
                <p class="description">基本的に全てを担当。</p>
                <p class="tech">JavaScript, Node.js, CSS, HTML, WebSocket, PHP, MySQL</p>
                <p class="tech">Electron: Windows (.exe, Microsoft Store appx), Linux (snap), macOS, electron-builder
                </p>
                <p class="tech">Landing Page, Microsoft Store, Open Source (GPL 3.0), Travis CI</p>
                <p class="tech">Under reconstruction with Vue.js, TypeScript, PostCSS, NeDB</p>
                <div class="action">
                    <a href="https://thedesk.top" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                    <a href="https://github.com/cutls/TheDesk" target="_blank"><i class="fab fa-github"></i></a>
                    <a href="https://www.microsoft.com/ja-jp/p/thedesk/9p2ndnz0gwzf" target="_blank"><i
                            class="fab fa-microsoft"></i></a>
                </div>
            </div>
            <div class="card">
                <p class="title">TheDesk Docs</p>
                <p class="description">TheDeskのWebドキュメント。GitHubとリアルタイム連携。</p>
                <p class="tech">PHP, JavaScript, CSS, HTML, webhook (GitHub API)</p>
                <p class="tech">Web</p>
                <div class="action">
                    <a href="https://docs.thedesk.top" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                </div>
            </div>
            <div class="card">
                <p class="title">votedon.</p>
                <p class="description">Mastodonで簡単アンケート</p>
                <p class="tech">PHP, MySQL, JavaScript (Vue.js), CSS, HTML, Pjax</p>
                <p class="tech">Web</p>
                <br>
                <p class="tech">掲載:<a href="http://www.itmedia.co.jp/news/articles/1804/03/news147.html"
                        target="_blank">マストドンで使えるアンケートツール「votedon.」 - ITmedia NEWS<i
                            class="fas fa-external-link-alt"></i></a></p>
                <div class="action">
                    <a href="https://vote.thedesk.top" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                    <a href="https://mstdn.jp/tags/votedon" target="_blank"><i class="fab fa-mastodon"></i></a>
                </div>
            </div>
            <div class="card">
                <p class="title">アスタルテ暇人ランキング</p>
                <p class="description">アスタルテ(kirishima.cloud)のトゥート数ランキング</p>
                <p class="tech">PHP, MySQL, JS, CSS, HTML</p>
                <p class="tech">Web, bot (Mastodon)</p>
                <div class="action">
                    <a href="https://hima.run" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                    <a href="https://kirishima.cloud/@AstarteBot" target="_blank"><i class="fab fa-mastodon"></i></a>
                </div>
            </div>
            <div class="card">
                <p class="title">Mastodon bot</p>
                <p class="description">強震モニタbot</p>
                <p class="tech">緊急地震速報(最終報)に応じて強震モニタのGIFアニメを投稿するbot</p>
                <p class="tech">国立研究開発法人防災科学技術研究所のK-NET(強震観測網)を使用しています。</p>
                <div class="action">
                    <a href="https://cutls.com/@rem_bot" target="_blank"><i class="fab fa-mastodon"></i></a>
                </div>
                <p class="description">コロムビアアイマスニュースbot</p>
                <p class="tech">毎週更新されるコロムビアのアイマスニュースを監視するbot。臨時報にも対応。10分毎(金曜18:00-59は1分毎)チェック。</p>
                <p class="tech">PHP, A3RT Text Summarization API</p>
                <p class="tech">bot (Mastodon)</p>
                <div class="action">
                    <a href="https://imastodon.net/@cibot" target="_blank"><i class="fab fa-mastodon"></i></a>
                </div>
            </div>
            <div class="card">
                <p class="title">Quesdon<br>(toot.app)</p>
                <p class="description">rinsuki氏のQuesdonのフォーク。独自機能をいくつか追加。</p>
                <p class="tech">TypeScript, React, Webpack, MongoDB, JavaScript</p>
                <p class="tech">Web, bookmarklet</p>
                <div class="action">
                    <a href="https://quesdon.toot.app" target="_blank"><i class="fas fa-external-link-alt"></i></a>
                    <a href="https://github.com/cutls/quesdon" target="_blank"><i class="fab fa-github"></i></a>
                </div>
            </div>
            <div class="card">
                <p class="title">その他</p>
                <p class="description">フォローレコメンデーションチェッカー (Mastodon)
                    <a href="https://github.com/cutls/Mastodon-Follow-Recommendation-Checker" target="_blank"
                        class="small-link">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="https://frc.toot.app" target="_blank" class="small-link">
                        <i class="fas fa-external-link-alt"></i>
                    </a>
                </p>
                <p class="spacer"></p>
                <p class="description">インスタンス絵文字カテゴライズ支援ツール (Mastodon)
                    <a href="https://github.com/cutls/emojiCat" target="_blank" class="small-link">
                        <i class="fab fa-github"></i>
                    </a>
                </p>
                <p class="spacer"></p>
                <p class="description">被災地支援のためのマストドン研究会 (Mastodon)
                    <a href="https://donken.org/forum" target="_blank" class="small-link">
                        <i class="fas fa-external-link-alt"></i>
                    </a>
                </p>
                <p class="tech">マストドン連携ログイン機能を設計</p>
                <p class="spacer"></p>
                <p class="description">MinimumStatus
                    <a href="https://github.com/cutls/MinimumStatus" target="_blank" class="small-link">
                        <i class="fab fa-github"></i>
                    </a>
                </p>
                <p class="tech">データベースも要らないレンサバに置けるステータスページ。Discord通知機能アリ。</p>
            </div>
            <div class="card">
                <p class="title">外部提供</p>
                <p class="description">WordPress:1件</p>
                <p class="description">静的ページ+PHP管理ツール:1件</p>
                <p class="description">簡易パスワードロック付きPDFビューア:1件</p>
            </div>
            <div class="card">
                <p class="title">終了済</p>
                <p class="description">乃木坂46BISS</p>
                <p class="description">JR西日本駅名標風画像作成サービス</p>
                <p class="description center">他</p>
            </div>
            <div class="card">
                <p class="title">Chrome拡張</p>
                <p class="description">FastestMastodonShare
                    <a href="https://github.com/cutls/FastestMastodonShare" target="_blank" class="small-link">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="https://chrome.google.com/webstore/detail/fastestmastodonshare/gfndaijdpkalbldphbofbjpjmpfibgji"
                        target="_blank" class="small-link">
                        <i class="fab fa-chrome"></i>
                    </a>
                </p>
                <p class="tech">Mastodonへの見ているページのシェアをするための最速手段</p>
                <p class="spacer"></p>
                <p class="description">Mastodon no more 中華フォント
                    <a href="https://chrome.google.com/webstore/detail/mastodon-no-more-%E4%B8%AD%E8%8F%AF%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/ckgelamoagdenmpnkllickjnepaccalf"
                        target="_blank" class="small-link">
                        <i class="fab fa-chrome"></i>
                    </a>
                </p>
                <p class="tech">Mastodonの中華フォントになっちゃうやつを防ぐやつ(未完成)</p>
            </div>
            <div class="card">
                <p class="title">コントリビューション</p>
                <p class="tech">ちょっとだけ</p>
                <p class="description">Cukoo.Plus
                    <a href="https://github.com/NanaMorse/Cuckoo.Plus" target="_blank" class="small-link">
                        <i class="fab fa-github"></i>
                    </a>
                </p>
                <p class="description">whalebird-desktop
                    <a href="https://github.com/h3poteto/whalebird-desktop" target="_blank" class="small-link">
                        <i class="fab fa-github"></i>
                    </a>
                </p>
                <p class="title">翻訳</p>
                <p class="tech">ちょっとだけ</p>
                <p class="description">Liberapay(英語→日本語)</p>
                <p class="description">Misskey(標準語→関西弁)</p>
            </div>
        </div><br>
    </div>
    <div id="copyright" class="white-text">Copyright &copy; 2015 Cutls.com All rights reserved.</div>
</body>

</html>