この記事は東京高専spc同好会アドベントカレンダー22日目の記事です。
blogを作りたい
adventカレンダーを~~書くことを強制された~~書く必要があったのですが自分はblogを持ってないのでblogをつくろうと、そういう話です。
blogを作るのはいいのですが、無料ブログは細かくいじれない、レンタルサーバーはお金がかかる、ということでgithubpagesでblogを作ろうと思ったわけです。
github.io (githubpages)って何
ここに詳しく書いてありますが、githubリポジトリに公開したら簡単にwebページを公開できるサービスでhtml,css,javascriptなど静的なwebpageだったら無料でwebpageを作って公開することができます。
marked.js
流石に毎回htmlで書くのはだるいのでmarkedownで書けるようにします、marked.jsを読み込むとmarked({markdownの何か})でclient側でmarkdownをhtmlに変えることができます。
まだsyntax highlightがうまく表示されなかったりして別の何かで処理をする必要があるのですがまだ実装していません。
ディレクトリ構成
詳しくはgithub
/md/{日付}.mdにmarkdownで書いた記事、/post/{日付}/index.htmlにそれを読み込むhtmlファイルがおいてあります。
toppageではlistにかかれている最新の記事を5個表示するようにしています~~まだ5記事も投稿してないからundefindと表示されてしまったり~~
自動投稿(自動投稿)
ここで言う自動投稿はmdを書いただけでディレクトリを適当に作ったりgit push をしたりするものであって,ある時間になると投稿されるといったものではありません。
ブログを投稿するのにいちいちfileを加えたりするのがめんどくさいので自動投稿用のshellscriptを書きました。はじめはpythonで書こうと思ってたのですがpythonでgitをいじるのがあまりスマートではなかったのでshellで書くことにしました
mkdir "./post/${1}"
cp -r "./post/format/index.html" "./post/${1}/index.html"
sed -e "s/{title}/${2}/g" "./post/${1}/index.html" >> "./post/${1}/index.html"
sed -e "s#{url}#../../md/${1}.md#g" "./post/${1}/index.html" >> "./post/$1/index.html"
sed -i "1s#^#md/${1}.md\n#" "list"
git add "post/${1}/index.html"
git add list
git add "md/${1}.md"
git commit -m "[post] ${1}"
git push origin master
sed
commandで文字置換ができるやつです、今回はコピペコードですけど色々できそう
画像に関して
画像をgithubに上げると容量を圧迫しそうなので、googledriveにあげてそこからリンクを貼って表示しています。
Google Drive に保存した画像を直接呼び出せるURLの取得-qiita
これから実装したいこと
- 一般的な自動投稿
- syntaxhighlight
- 同じ環境で表示されるmarkdown editor
- イケてるui(?)
- 速度(ajaxで同期処理をしてたりしてる気が)
気づいたこと、感想
- shell だと ” と ’ で挙動が違う？
- イケてるデザインにするのって難しい(知識とセンスが必要)
- vpsほしい
追記
非常にイケてない
![非常にイケてない](http://drive.google.com/uc?export=view&id=1g9vAH6EwDT-v7Omm1jwkYM7FLMoN5Sy