StaticWeb

Jekyll Blogging お試し

https://jekyllrb.com/ Ruby製の静的ウェブサイト生成ツール（Static Site Generator）。なんかMarkdownとかで書いたサイトをいい感じにHTMLにしてくれるやつ。 Dockerイメージの準備 Ruby, RubyGems, gcc, makeが入っていれば動くらしい。公式Dockerイメージもあるみたいだけど、あえてスルーしてrubyイメージからやってみる。ふだんRubyは使わないので試行錯誤。 https://hub.docker.com/_/ruby まずはイメージをビルド。 FROM ruby:2 WORKDIR /code RUN gem install jekyll bundler ここでgem installしてもいいのか、という問題がありそうだけどよくわからない..（キャッシュについてはいいとして） sudo docker build . -t myjekyll ひとまずこれでイメージの準備はできた。 sudo docker run --rm -v `pwd`/myblog:/code -e BUNDLE_PATH=vendor/bundle myjekyll jekyll new ./ これで./myblog（/code）に新しいJekyllプロジェクトが生成される（合わせて依存ライブラリがmyblog/vendor/bundleにインストールされる）。 vendorを除いたフォルダ構成はこんな感じ。 myblog/ ├── 404.html ├── about.markdown ├── _config.yml ├── Gemfile ├── Gemfile.lock ├── index.markdown └── _posts └── 2020-05-31-welcome-to-jekyll.markdown もし既存のプロジェクトを使う場合、bundle installでライブラリを取得する（Gemfileに書かれた依存ライブラリがmyblog/vendor/bundleにインストールされる）。 sudo docker run --rm -v `pwd`/myblog:/code -e BUNDLE_PATH=vendor/bundle myjekyll bundle install bundler、bundle execについて　※自分用メモ - Qiita 環境変数 BUNDLE_PATH の怪 - Qiita 最後に開発用サーバを立てる。 ...

Vue 入門

Node.js（npm+Browserifyなど）でパッケージ管理したり、サーバサイドで事前処理（.vueファイル、vue-cli）して配信ファイルを生成したりしてややこしいけれど、基本的にVue（Vue.js）はブラウザ上で動作するBootstrap++みたいなクライアントサイドフレームワークという理解。参考はじめに — Vue.js この「はじめに」をベースにサンプルを並べていく。何もしないHTML <!DOCTYPE html> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <h2>Hello Vue!</h2> <p> This is not Vue! CDNから開発用のVue.jsを持ってくるだけ。これをベースにいじっていく（SRIは略）。テストするときはpython3 -m http.server --bind 127.0.0.1とか、php -S 127.0.0.1:8000とか、静的コンテンツを開ければなんでもよし。テンプレート的用法適当に使ってみる <!DOCTYPE html> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <h2>Hello Vue!</h2> <p id="body"> {{ body_content }} <script> (function() { var app = new Vue({ el: '#body', data: { body_content: 'This is BODY!', }, }); })(); </script> Django/Jinjaのように{{ variable }}の形式で埋め込み位置を指定。Vueオブジェクトを作って初期値を与える。 ...

github.io

URL：USERNAME.github.io リポジトリ：USERNAME.github.io ブランチ：master 通常のGitHub Pagesと違ってmasterブランチが使われる https://qiita.com/ryokosuge/items/f929821ba5ae9ba2c32b