Skip to content

vicky-sunshine/my-blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rails Girls Notes

Environment

install homebrew

$ xcode-select --install
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

install rvm

$ brew install autoconf automake libtool libyaml readline libksba openssl
$ \curl -sSL https://get.rvm.io | bash -s stable

利用 rvm 裝 ruby

$ rvm install ruby-head
$ rvm use ruby-head

裝 bundler 和 rake

$ gem install bundler
$ gem install rake
$ gem install rails --no-ri --no-rdoc

Ruby Basic

可以去 TryRubycodecademy

Rails - Build a Blog!

參考資料

Rails Girl - 第一個 app

Rails Girl - App 上線至 Heroku

Step1. 創新專案

$ rails new blog
$ cd blog
$ bundle install
$ rails server

Step2. 新增文章

$ rails generate scaffold Article title:string content:text picture:string
# title 文章標題 string 字串
# content 文章內容 text 一大段的文字
# picture 文章圖片 string 之後會用其它套件讓它支援圖片
$ rake db:migrate # 在 database 裡創表格
$ rails server # 把網站跑起來

Step3. 加入圖片

加入套件

Gemfile 裡面加入

gem 'carrierwave'

在終端裡,執行:

$ bundle install

處理上傳圖片的相關程式

$ rails generate uploader Picture

打開 app/models/article.rb 並在這行下面

class Article < ActiveRecord::Base

加入

  mount_uploader :picture, PictureUploader

打開 app/views/articles/_form.html.erb 並將這行

<%= f.text_field :picture %>

改成

<%= f.file_field :picture %>

可以再次開啟 rails server 看看

顯示圖片

打開 app/views/articles/show.html.erb 並將這兩行

<strong>Picture:</strong>
<%= @idea.picture %>

改成

<%= image_tag(@article.picture_url, width: 600) if @article.picture.present? %>