MENU

【スキルハックス】herokuで自己紹介サイトを公開するためにrailsで書いていく

今回はherokuで自己紹介サイトを公開していくために、自己紹介サイトを作っていきます。

profile-siteというフォルダを作成します。

profile-siteに入って、profileコントローラーを作成します。

profileコントローラーにindexアクションを書きます。

viewsのprofileフォルダにindex.html.erbファイルを作ります。index.html.erbにh1タグを作ります。

routes.rbに/profileにアクセスしたら、profileコントローラーのindexアクションを実行するようにします。

/profileにアクセスしたら、h1タグを表示することができました。

routes.rbをgetからrootに書き換えます。

.comのURLにh1タグを表示することができました。

viewsのlayoutsのapplication.html.erbが全体のhtmlを司っているので、変更していきます。

pplication.html.erbのタイトルを変更して、UTF-8を書きます。

htmlの復習を兼ねて上記のように書いていきます。画像に関しては、appのassetsのimagesの中に入れます。imgタグのところの画像の名前の前に/assets/とすることで画像の保存されているところを表すことができます。

imgタグの上に上記のように書いてみます。

画像が2つ表示されました。image_tagとimgタグの分の2つです。

imgタグを消して、image_tagにidを付けます。

application.cssでデザインを入れていきます。

復習も兼ねて。

デザインを加えていきます。

デザインを加えていきます。

デザインを入れることができました。

headerにprofileの画像と同様に、画像を入れます。

バックに画像をいれることができました。

image-urlに変更をして、application.cssをapplication.scssに変更します。ちなみに画像のimgタグを書き換えるのは、herokuにアップロードされた際に自動的に圧縮されて、画像が表示されないためです。

次回にherokuで公開をしていきます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次
閉じる