今日はhtmlとcssを使ったブログの基本レイアウトの設定です。

とは言え、ディザインはシンプルです。

まずはコードです。

app.jsです。

先日問題になった$portは、とりあえず消してみました。

他はほぼ同じですが、404エラーの処理ができるようになりました。

ｃｓｓのファイルです。

それぞれの場合によるidどおりに使います。

基本的な機能だけで作りましたが、ミスっちゃって時間の表示が大きすぎです。

一番最初に見えるページです。

簡単です。

自己紹介のページです。

ブログのリストページです。

すべてのポストはblogフォルダーに入れて管理します。

一番関心を持ってるページです。

いろいろやってみる事が多いです。

機能の追加などはこのブログページを中心にする予定です。

ブログの初ポストです。

内容は単純しすぎるけど、個人的には気に入ります。

単純に見えるが、これ作るのも結構時間かかりました。。。

実行すると、こうなります。

時間の表記が大きすぎること以外は、おもった通りです。

これからはずっと、javascriptの練習をしたいところです。

では、また。

今日から少しずつ、しっかりとホームページを作ってみようと思っています。

初心者の自己記録の為の投稿なので、まだまだ足りない所が多いです。

まずはサーバーの決定。

私はVultr（https://www.vultr.com/）という会社で決定しました。

料金も安く（一か月に500円くらい）、サーバーが東京にあるので速度も早いです。

決済すると、こういうページが出ます。

右上のボタンを押すと、サーバーのコンソルのを見ることが可能。

ユーザーネームと暗証番号は左下に書いているどおりに。

リナックスを使ってみるのは初めてなので、CLIにはまだ慣れていません。

yumでnode.js（https://nodejs.org/ja/）をインストールした後、npmでexpress（http://expressjs.com/ja/）をインストール。

その次はexpressのホームページの説明を参考にして初期のコードを作成。

ファイルの作成はVIMというテキストエディターを利用します。

極めて単純なコードです。

htmlファイルは全部viewsというフォルダに入れて管理します。

Line 6は、最初に接続するページをindex.htmlにする為のコード。

ただ、経路の指定は相対経路ではなく、絶対経路で指定しなければなりません。

その為に、相対経路の前に__dirnameを付けます。

そしたら、index.htmlでviewsフォルダにある他のhtmlファイル(例えば、blog.htmlを開けられない問題ができました。

それを解決する為のコードが、Line 5です（http://expressjs.com/ja/starter/static-files.html参考）。

つまり、http://(サーバーのip)/blog.htmlに入ると、viewsフォルダにあるblog.htmlというファイルを開くことができるという話です。

Line 7は、expressのホームページに提供された例のどおりに書いたのですが、何故か80が出力されずに、${port}がそのまま出力されます。

これに対してはもっと探してみる必要があります。

この状態でhttp://(サーバーのip)/に入ったとしても、ホームページに入ることはできません。

とりあえずはサーバーのファイアウォールの設定で、ポートを開ける必要があります。

次をroot権限で入力します。

iptables -I INPUT -p tcp --dport 80 -j ACCEPT

基本ページであるindex.htmlのコード下記の様に。

とりあえずは簡単に、htmlだけで作ってみました。

基本的な技術の習得が目的である為、派手な効果などは最小限にして、できるだけ単純に作成するつもりです。

Line 9と10が問題になった為、上記のコードで静的ファイルに関する関数を使う様になりました。

メインページはこの様です。

ちなみにabout.hmtlとblog.htmlはまだ作成していません。

これからもどんどん成長していきたいな、と思います。