Top header xs

Railsでブログを作ってみた

Railsでブログをつくってみました。

ブログを書きたいとずっと思っていたんだけど、わざわざrailsで自分で作った理由として、
ブログサービスだとモチベーションが上がらない(今まで試したもののほぼ3日坊主で終わる)、
Wordpressはなんかめんどくさそうだし使わない機能多そう。
そして自分で作ったブログなら更新も続けられそう、という安易な思いから自分で1から作ってみました。

Railsでブログを作りたい人の参考になれば、と思う。

環境

  • Rails5.1.6
  • heroku + cloudflare
  • AWS S3


機能

  • 記事の作成、編集、更新、削除、下書き
  • 記事に対してスラッグ(記事のURL)を割り当て
  • 画像投稿
  • カテゴリ作成
  • タグ付け
  • レスポンシブルなデザイン
  • admin機能
  • Markdownエディタ

主な機能はこれくらい。
機能自体は簡単に実装できて、時間がかかったのはやはり見た目の部分。
全くの0から自分でデザインを構想し、デスクトップ画面に加えてモバイル画面のマークアップをしたこと、admin画面のマークアップもある程度のこだわりを持って実装したからです。


gem

#Frontend
gem 'jquery-rails'
gem 'sass-rails'
gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'jquery-slick-rails' #slickjs
gem 'dropzonejs-rails' #dropzone.js
gem 'redcarpet' #マークダウン

#Backend
gem 'devise'
gem 'figaro' #環境変数
gem 'acts-as-taggable-on' #タグ付け
gem 'kaminari' #ページネーション
gem 'carrierwave' #画像アップロード
gem 'rmagick' #画像リサイズ
gem 'fog' #画像アップロード
gem 'meta-tags' #SEO対策
gem 'google-analytics-rails' #Google Analytics
gem 'google-api-client' #Google API

acts-as-taggable-on は初めて使ったけど、簡単にタグ付けできるのでおすすめ。ただ、タグ付けは自分で実装してみると勉強になるので実装したことない人はやってみるのもいいかも。


jsライブラリ

  • slick.js 画像スライダー
  • dropzone.js #画像アップロード
  • codemirror #Markdownエディタ
  • marked.js #Markdownエディタ
  • highlight.js #シンタックスハイライト

Markdownエディターは、UI KitのHTML Editorを使いました。
導入に関してはこちらで書きました。

3分でマークダウンエディターを作る【UIkit】 | hirozak

CSSのフレームワークであるUIkitを使用して簡単にマークダウンエディターを作成できます。 もちろんリアルタイムでマークダウンの記述ができるのでいちいち確認する必要はありません。

導入はすごい簡単だけどカスタマイズがめんどくさそうなのでデフォルトのまま使ってます。追加でhighlight.jsも入れています。

jsライブラリについては今はgemで入れたりscriptタグでcdnから読み込んだりとしてるので将来的にはwebpackでパッケージ管理したいところ。


実際の画面

まずはadminから
ダッシュボード、admin画面のトップ。メニューが少ないです。必要になったらまた機能追加していこうと思います。



記事一覧。ここから編集画面に飛べたり、記事が公開済みかどうか確認したり、削除もできる。



Markdownエディタ。marked.jsとcodemirrorでリアルタイムでMarkdownが反映される。



ドラッグ&ドロップ対応の画像アップロード画面。マウスホバーするとS3のURLが出現するのでそれをコピーしてMarkdownで表示させてます。クリックするとコピーするように今後実装したい。



レスポンシブデザイン。モバイル画面。




GitHubにてリポジトリを公開中

hirozak/hirozak.space

hirozak.space - my blog


まとめ

ブログはrailsアプリとしては簡単にできるので暇つぶし・勉強に作ってみてもいいかもしれないです。自分は見た目の部分に時間がかかったけど、2週間ほど、30時間程度で出来ました。マークアップ力が上がりました。これからも機能追加等こまめに改善していきたいところ。

About Me

Profile image

hirozak

エンジニア

音楽, 映画, 海外ドラマ, ガジェット, インテリア, お酒が好きです。

詳しく見る

This Blog

このブログはhirozakがRuby on Railsで開発しました。

GitHubにて、ソースコードを公開しています。