How To Build A Blog Using Rails 5

you welcome to open labs in this tutorial we're going to build a portfolio using rails 5 and bootstrap the theme we're going to use is a start bootstrap theme called freelancer and you can download it for free online I'll include a link in the description you can see here it's a nice theme it's got a nice area for a header image and your name portfolio section and about section and a contact me form so let's get started the first thing we'll do is we will open up our terminal and we will create our new rails app I'll CD into the desktop and I'll create the new app by rails new portfolio once that's complete I'll CD into the new application okay so the first thing I'm going to do is I'm going to set up our post controller so I'll create the controller with rails generate controller posts next I'll set up our route so do this I'll open up sublime text and I will navigate to our route so that's under config routes dot RB I'll take out these comments and I'll add resources posts and I'll set up our home page with route post index ok cool so now I will create our index and our show views for posts so under app views Post I'll create a new file I'll save this as index.html ARB I will also create a file for the show page save this as show dot HTML ARB and we will also use some partials in our application to do this I will create a new folder i'll name it shared and within this folder i'll create a header HTML BRB and a footer cool so the first thing we're going to do in our rails application is set up our template so we're going to go to start bootstrap and find your way to themes portfolios select start bootstrap and you can download it files once that completes we'll open up the zip file it should unzip and open up a folder perfect inside this folder we have the CSS the images JavaScript files and other files that make this theme run so for our rails application we'll need to move over the CSS files the images and the JavaScript so let's open up our application I have mine saved on my desktop cool perfect so I will navigate to app assets stylesheets and I will copy the CSS that is in the CSS folder and paste that here I will also copy the images into app a sets images and I will also copy the JavaScript files so JavaScript a copy freelancer that is and bootstrap validation I won't copy the contact me JavaScript because I'm going to change that section to make it a bit simpler to set up and to use alright cool so now if we go back to our application we should add bootstrap to our header and add jQuery to our header as well so I'm going to search for bootstrap CDN select this and I'm going to copy this first section under bootstrap CDN navigate to sublime text open app views layouts application HTML that ARB and I will paste the bootstrap in here now I will look for font awesome and search font awesome CDN will select the first link and I'll copy this HTML and I will paste this under the header as well awesome so now we can run our rails app and see oh not quite yet so now we still need to import the actual theme pages into our application so in the start bootstrap freelancer download files select the index.html file and I'll drag that into sublime text and I'm just going to copy everything and I'm going to paste this all into our post index this is our home page so I'll paste everything into here and then I'll start removing things as we go so the first section I'm going to remove is the head because we have that in our application HTML you are be also can remove the body so the navigation I'm going to copy this and move it into our shared header save that return back to index.html and now I'm going to copy the footer and I'm going to move this into the shared footer HTML you are be perfect so we won't be using portfolio modal's so we can get rid of all of these look all the way down and we can get rid of body don't need this don't need the contact you don't need the bootstrap we added that to the header and jQuery we don't need that we'll add that to our header as well so we can save this now and let's go to our application dot HTML DRB so now we want to make sure we include our header in our footer partials so under application not HTML at our IB will write render shared slash header close that off and then below the yield will render shared slash footer and we can save this return to the index let's just make sure everything looks cool awesome so let's run our rails server and see what things are looking like so we can type rails s to start the rails server and if we return to our web browser and go to localhost 3000 things are coming together you see the images aren't showing it because we haven't fixed those links but we'll get to that next so since we've imported our theme let's initialize our get and save what we've done so far so type get an it get Ad git commit ash am and imported bootstrap theme awesome alright the next thing we're going to do is we are going to set up our post model so if we go to the terminal and let's create our post models rails generate Model post and our post is going to have a title and that's going to be a string it's going to have a body and that's going to be a text execute that and you can see it created a migration file you'd like to view the migration file you can go to app DB migrate and you can see here it's creating a table called post and it has a title that's a string and the body that's text so can go back to the terminal we can run rake DB migrate to create this table awesome so now if we view our schema you can see that we have a table called post with a column title and column body perfect so now we can let's close some of these files and let's set up our routes we already have the route set up awesome okay so the next thing we're going to do is we're going to add active admin so to add active admin we first need to set up devise so let's go to our gem file and let's clean this up a bit okay so we need to add the device gems so let's go back to our web browser and let's search for devise gem I'm going to go to github to get the latest gem okay let's copy to clipboard and we can paste that in here so now we return to our terminal we type in bundle install and now rails generate devise install nice so let's follow these instructions the first one is telling us to copy this line and to paste it in config environments development RB so let's go to config environments development RB and let's go all the way to the bottom and paste that line in here and save we also need to make sure that we have our home page setup in our routes we have done that perfect so we also need to set up alerts for our application so let's copy this and under app views shared let's create a new file save this as alerts dot HTML yarby and we can paste this in here and now if we go to application not HTML ARB let's render the alerts under the header so it shows up perfect now we can set up devise for users so we will type rails generate devise user created the migration file for the users we can check that out under App DB migrate and the latest migration file so we can run write DB migrate awesome the next step is we're going to add the active admin gem so I'm going to do a search for active admin and I'm going to go to github for this one because with rails 5 it's going to require us to use the master branch so let's copy this go to sublime text paste this into our gem file if we go back to the documentation we can see that for rails 5 we also need to add a couple of these other gems so for mine I found that I just needed to add this inherited resources and that solve it for me if you run into any errors you might want to try adding the rest of these gems and see how that works for you so right under active admin I'll paste in gem inherited resources save that open up our terminal and a run bundle install the next step we're going to do is run rails generate active admin install we're going to use active admin to manage our portfolio by the way so if you want to create a new project and you want to add that to your website you sign in through active admin and you can create new posts edit posts add images and just manage your application through that it's kind of like WordPress but for your custom website ok perfect so those files have been generated now you want to run rails DB migrate and now we want to run rake but we don't need to use to break anymore in rails 5 it's changed so you can run rails instead of rake so I think before we just ran I know you're in a rails before so now we can run rails DB seed and this will create an admin at example.com with the password of password so we can sign in to active admin with that example account so we'll run rails DB seed and now we can go back to our terminal you can restart our rails server and if we go to our application and go to localhost 3000 slash admin we should see the active admin interface nice so admin at example.com and the password will be password all lowercase nice so you can see we have a very basic dashboard we can manage admin users comments we haven't set this up yet so this won't work but you can see the interfaces here the first thing we want to do is create a new admin user so you'll want to use your real email here I'll just create this to show you how to do it so create the new admin user and once you do that you can log out and then sign in with that new account and then you can delete the admin an example this will just make the application more secure nice ok so the next thing we're going to do is we're going to setup active admin so we can edit post so let's go back to our terminal and we will type let's clear this out and we will type rails generate active admin resource user this will allow us to edit users and then we'll do the same thing for posts so it'd be refresh active admin we should see users and posts at the top perfect so you can see the interface it's nice that we have a back-end but let's improve the look of this a little bit so to do that we will use a gem called active admin first let's save our progress so get status get ad git commit - am added active admin ok so now we're going to add a theme to active admin to do this we're going to use a gem called active skin so gem active skin let's see if there's a ruby gem for it okay there's not this should be fine then in our gem file we'll add this right below inherited resources and it will run bundle install so this should have created a file for us oops you go to app admin go to app assets stylesheets active admin is CSS we can delete all these comments this is where you can edit your active admin interface so we will make some changes here initially when you add this theme it'll have a logo in the top left but I don't want that logo so I'm going to type skin logo none and then I'm going to import our active theme using at import active skin save that and let's restart our rail server and let's check out the new theme on our admin interface so if we refresh this oops so you have a typo so save this and refresh nice see that theme is much better now post users awesome so let's save our progress again get status get add git commit added active skin theme okay so if you go to post now and you try to create a new post you will see we have a title and the body but if you go to the template you'll see we'll probably want to include images as well so to include images we'll need to install a gem called paperclip so go back to our terminal to use paperclip you'll need to have image magic installed on your computer so if you do a quick search for image magic you can find the various ways to install it I'm on a Macbook so if you're on Mac you can run brew install image magic if you're on Windows there are various other ways to install it you can go to this website and follow the instructions here but I'll show you how to do it for Mac so open up terminal and type brew install image magic so I already have it installed if you don't it may take a minute to download all the files but once that's complete you can add the paperclip gem so let's add paperclip so I'll do a quick search for paperclip gem oops and I'll scroll down and I will copy this and now in the gem file I'll paste this right below active skin and save that and now I will run bundle install so for paperclip we need to add the image to our posts so to do this we'll run rails generate paper clip post and then image create that migration file to add the image column to our post table so now we'll run rake DB migrate to add this to our schema very nice so let's go to app models post dot RB and inside of here we will go back to get started and you can see in the QuickStart section it has this information right here that we need to add to our model that will be using paperclip so we can copy this example and we can paste it into our post RB so instead of Avatar we're calling our as image you won't be using this default image we can remove that and we can save what we have here okay so now we can go into our post controller let's make some changes to this so we have an index page and we have a show page and on these pages we'll want to display posts so I'll quickly paste in the code that I have and then I'll explain it afterwards all right so on the index page we want the post to be all post and we want it to be ordered in descending order so the most recent posts will be shown first also on our show page we want the post to be equal to the ID and we want at the bottom of our show page we're going to have other projects that we've worked on so for this we want our post displayed in the most recent order so we can save this and now if we go back to our post RB model you can paste in validates title presence true so when we create a new post we need to make sure that we have a title and we also need to make sure that we have a body so we can save this we can save this and if we go back to our terminal and if we restart our rails server and we go look at new posts if we refresh this page we will see that we now have an image file name image content type and the file size and some other information for the image this is nice but we want it to be so there is a link or a button that we click on and we can select a image file from our desktop or a laptop or USB so to do this we'll need to add a form to our post that our be model so in sublime text we will go to app admin so we go to post RB and we get rid of all this comments in between and here I'll paste some code I generated previously so this will add the button to our new post so that when we add a new post we'll have a button to select an image from our laptop or a computer and we'll be able to add it to our website so if we save this and we return to admin new posts and we refresh this we should see the button link perfect so let's create a post post one post one content and let's go with JavaScript create post awesome so the post has been generated so now's a good place to save again so get ad get commit am add image upload with paperclip cool so the next thing we'll do is we'll edit our application so that our posts are loaded dynamically into our view and so that when you click one of our projects it goes to a custom show page and it has links to other projects at the bottom of that show page so for our show page we will be using another theme from start bootstrap if you go to portfolios we scroll down and select portfolio item you can download this open up the zip file and then you can open up your application just like last time so here let's see the CSS that's included we have portfolio item CSS let's add that to at assets stylesheets portfolio item CSS and that's all we'll need from this one since it's just one page so we'll take the index.html let's open this in sublime text select everything again copy that this time we will paste it into our app views post show dot HTML ARB and like last time we'll start getting rid of information we don't need we don't need body don't need navigation just need page content so you don't need the footer don't need this okay very cool so we can save this and you know let's close some of these other files and now we can begin to edit our controllers so in the index.html DRB i've edited this page so that instead of having a row and all these columns and etc we're just going to have one and within that for each post we're going to create a column that's small that's four and for each post we're going to have a portfolio item and inside a div we're going to have a link to the image etc so I'm just going to select everything delete it and then paste in the code that I generated I also change the contact form so that instead of having a whole section where you type in your name your email all this and have to set that up on the back end to make this as simple as possible it's just going to have a link on the contact me button and when you click this it'll open up the mail client on your local computer and will automatically address it to the email address that you choose and we'll set up the subject line with custom text so you can see that here I have mail too this is the email address that I chose you can change this with whatever you like the link text will show contact me the subject will say hi please include your name and email address so if we save this now we can edit our show page I also already edited this show page a bit so that it's dynamic in the page header instead of portfolio item we'll link to our rails post title and instead of the project description instead of this lorem ipsum text we will have some Ruby code that shows the post dot body and then at the bottom here for related projects we will cycle through the four other projects that we've created so it makes it browsing around your website just a bit more user-friendly so I'll select everything delete it and then paste in the new code so you can see here the post title will load from the post with that ID it will load that title it will also load the image and project description and the related projects for each post it's going to have a link to that post and also an image that's part of the class responsive and portfolio item so if we save this and we restart our rails server and we go to localhost 3000 oh sweet so you can see the post that we created earlier and when you click on this it opens up the custom show page with the post title the post content and related projects below so let's create a few more post so you can see how it looks ok cool so we created two more posts if we go to localhost 3000 you can see on the home page now we have some more images that have loaded up and if you select one it goes to this custom page and it has the project description I make dope as this project is also definitely gonna hire me and you can just add to this and change it around as you want but you have a good starting point for your custom portfolio so we're at a good place to save again so get status get add git commit added custom post to pages cool awesome so with that you've created your portfolio using rails 5 latest rails version and bootstrap and now you have the knowledge to create more Rails applications using these free themes that you can download online if you'd like to learn how to push your new portfolio to Heroku and add paperclip with Amazon Web Services so you can store your images online you can check out my course on open labs dot IO and there I'll walk you through how to do all that thanks for checking this video out and if you enjoyed it please give me an upvote and subscribe thank you

Channel: open-labs

Views: 27,069

Keywords: how to build a blog, rails 4, rails 5, rails, ruby on rails, ryan blakely, bootstrap, how to code, active admin, paperclip, ruby, ruby gems, learn to code, rails tutorials, rails screencasts, railscasts, ruby on rails tutorial, ruby programming tutorial, how to build a website, how to use rails, sql, git, heroku, ruby on rails (software), web application (industry), reddit clone, custom blog, mackenzie child, how to build a blog in rails 5

Id: i2x995hm8r8

Length: 36min 12sec (2172 seconds)

Published: Thu Aug 11 2016