カラクリスタ・ブックマーク(今はこの the.kalaclista.com に統合されています)
これは何?
オンラインブックマークサイトです。
まぁ古い呼び方をすれば、ただのリンク集ですね。
何故作ったのか
私は以前から、
自分が貯めたブックマーク、どこかで共有できたら良いんだけどなー
と考えていたのですが、いかんせん SNS ライクなモノは使いたくなかったのと、 あと共有する前提でブックマークを公開するのであれば、ある程度は見た目とか触りたい、 というのもあって、自分で DIY する事にしました。
……と言いつつも、実際には、
hugo
とnetlify-cms
を使えば、オンラインブックマークぐらい出来るじゃろ
みたいな雑な発想で作る作業を始めたのはここだけの話。
どうやって作ったか
基本的には、
- StaticSiteGen として
hugo
を使いつつ - Gitlab CI で aws s3 + cloudfront で良い感じな自動デプロイを出来る様にした後
netlify-cms
で Gitlab アカウントで編集できる様にした
という感じで構成されています。
まぁリポジトリ自体の公開設定をプライベートにしてあるんでソースは公開していないんですが、 Gitlab CI の設定ファイルは、
で紹介されている設定ファイルを参考にしつつ、下記の様な感じで自動デプロイをやっています:
stages:
- build
- deploy
variables:
AWS_DEFAULT_REGON: XXXXXXX
BUCKET_NAME: favs.nyarla.net
CLOUDFRONT_DIST_ID: XXXXXXX
build-by-hugo:
stage: build
image: monachus/hugo
script:
- hugo
- rm -rf public/2019
- rm -rf public/2018
- rm -rf public/bookmark
artifacts:
paths:
- public
only:
- master
deploy-to-s3:
stage: deploy
image: garland/aws-cli-docker
dependencies:
- build-by-hugo
script:
- aws configure set preview.cloudfront true
- aws s3 sync ./public s3://$BUCKET_NAME --delete;
- aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DIST_ID --paths "/*";
only:
- master
また netlify-cms
の設定ファイルは下記の様な感じです:
backend:
name: gitlab
repo: nyarla/online-bookmark
auth_type: implicit
app_id: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
#publish_mode: editorial_workflow
media_folder: static/uploads
public_folder: /uploads
site_url: https://favs.nyarla.net
display_url: https://favs.nyarla.net
logo_url: https://nyarla.net/assets/avatar.svg
show_preview_links: false
slug:
encoding: "ascii"
clean_accents: true
sanitize_replacement: "-"
editor:
preview: true
collections:
- label: "Bookmark"
name: "bookmark"
folder: "content/bookmark"
create: true
delete: true
extension: "md"
format: "frontmatter"
slug: "{{year}}-{{month}}-{{day}}T{{hour}}-{{minute}}-{{second}}"
fields:
- { name: "title", label: "Title", required: true, widget: "string" }
- {
name: "link",
label: "Link",
required: true,
widget: "string",
pattern: ["^https?://", "http or https URI"],
}
- { name: "tags", label: "Tags", required: true, widget: "list" }
- {
name: "date",
label: "Date",
required: true,
widget: "datetime",
format: "YYYY-MM-DDTHH:mm:ss+09:00",
}
- {
name: "body",
label: "Comment",
required: false,
widget: "markdown",
buttons: [],
}
作ってみた感想など
まぁ Web サイトの HTML 自体は割と雑だし、AWS での設定などを手作業でやっていて色々とハマった所もあったものの、 とりあえずオンラインブックマークサイト(と言う名のリンク集)は手軽に作れる様になったんだなーという感じでした。
あと、今回はファイル配信を S3 から Cloudfront 経由のみで公開しているのですが、
Apache などで言う所の Directory Index で
index.html
が表示されない問題
という罠を踏み、一時作業の手が止まったんですが、これは最終的には Lambda@Edge で下記のスクリプトを食わせる事によって解決させました:
"use strict";
exports.handler = (event, context, done) => {
var request = event.Records[0].cf.request;
var destURI = request.uri;
var destLen = destURI.length;
if (destURI[destLen - 1] === "/") {
destURI = destURI + "index.html";
}
request.uri = destURI;
return done(null, request);
};
まー本当、色々とザックリと作ったワリにはしっかりとモノが動いているので、 今のインターネットは便利になったんだなーと思った次第です。はい。
以上
ちなみに今回作ったオンラインブックマークサイトである カラクリスタ・ブックマーク ですが、 ブックマークの移植が未だ全然出来てなくて中身スッカスカやんけって言う問題もあるのと、あと細かい調整も詰めてないので、
あ、お察しクオリティーですね。これは。
と言う感じではある、と自分でも思ってます。
とは言え、インターネットサービスをピタゴラスイッチして作った仕組みとしては上手く行った感はあるので、 あとはもうちょっと情報とか細かい所を詰めて、また調整して良いオンラインブックマークサイトに出来たらな良いなぁ、 と今のところは考えています。はい。
と言う事で今日の話は以上です。終わります。