Open in app

Sign in

Write

Sign in

A Rails Blog In VS Code-Styling

How To Create A Blog in VS Code — Part II— RailsSeries#Episode 04

J3
Jungletronics
7 min readJul 12, 2023

--

Let’s Style the page.

In this post:

You will:

Learn how use Bootstrap in a simply way; 

Learn how to navigate page to page;

Learn git commands for development work flow 👌️
This post is a continuation of this one; This is a working code: 👉️rails_blog_v2
Proof of Concept: All 10 steps are executed from start to finish!

Let’s Get Starting:

0#step — Create a new branch:

git checkout -b styling

1#step — GoTo home.html.erb and type:

rails-blog-demo/app/views/pages/home.html.erb

<h1>Welcome to My Personal Web Blog!</h1>
<p>You can read more about me 👇️, or check out my blog 👋️ </p>
<br>

2#step — GoTo about.html.erb and type:

rails-blog-demo/app/views/pages/about.html.erb

<h1>Hi! I am Jaythree!</h1>
<p>That's right guys... o/ I am J3! I am just a hobby-dev, playing around with  </p>
<p> Python, Django, Ruby, Rails, Lego, Arduino, Raspy, PIC, AI… </p>
<p>Welcome! Join us!</p>
<hr>
<a href="https://medium.com/jungletronics">Visit Jungletronics</a><br>
<a href="https://medium.com/kidstronics">Visit Kidstronics</a><br>
<hr>

3#step — Add Bootstrap 5; GoTo CDN and paste CSS link code here:

rails-blog-demo/app/views/layouts/application.html.erb

head>

     ...

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
     
     ...

</head>

4#step —Create partials and paste Bootstrap 5 Navbar inside there:

rails-blog-demo/app/views/layouts/_navbar.html.erb

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/home">Rails Blog</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <%= link_to "Home", root_path, class: 'nav-link' %>
        </li>
        <li class="nav-item">
          <%= link_to "About", about_path, class: 'nav-link' %>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Here are 4 code adjustments:

1 — Change Brand link:

<a class="navbar-brand" href="/home">Rails Blog</a>

2 — Change Home link to:

<%= link_to "Home", root_path, class: 'nav-link' %>

3 — Change About link to:

<%= link_to "About", about_path, class: 'nav-link' %>

4— Put dropdown link inside ul tag:


<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

5#step — GoTo application.html.erb and type:

rails-blog-demo/app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>RailsBlogDemo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <%= render 'layouts/navbar' %>
    <main>
      <div class="container">
        <%= yield %>
      </div>
    </main>
  </body>
</html>

Let’s break down what each line does:

  • <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/...>: This includes the Bootstrap CSS framework from a CDN (Content Delivery Network) with a specific integrity hash for security purposes.
  • <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>: This includes the CSS file(s) specified in the "application" manifest and enables Turbo-Streams reloading for stylesheets.
  • <%= render 'layouts/navbar' %>: This renders the partial _navbar.html.erb located in the layouts directory.
  • <main>: This defines the main content of the webpage. It’s a good practice!
  • <div class="container">: This creates a container to hold the content in Bootstrap.
  • <%= yield %>: This is where the content for a specific view or template will be inserted.

6#step — Now let’s type some git commands:

git status
git add -A
git commit -m ":lipstick: feat: Add Styling"
git push --set-upstream origin styling

7#step — Open GitHub Repo and follow the sequence:

fig.1. Click Compare & pull request
fig.2. Click Create pull request. It will run checks (like unit tests)..
fig.3. Look for Files changed (4)…
fig.4. And that brings you to Reviewing changes…Looks Good To Me. Click Submit review…
fig.5. Click Merge pull request…
fig.6. Confirm merge…
fig.7. Now Delete branch…
fig.8. And there you go! 👌️

8#step — Goes back to you vscode editor:


git branch --list
git checkout master
git fetch
git status
git pull

Here’s an explanation of each of those Git commands:

  1. git branch --list: This command lists all the branches in your local repository. It's helpful to see what branches exist and which one you're currently on.
  2. git checkout master: This command switches your working directory to the master branch. It's used when you want to work on the master branch or just to view its contents.
  3. git fetch: This command retrieves the latest changes from a remote repository but doesn't apply them to your current working branch. It's useful for getting updates from a remote without merging them immediately.
  4. git status: This command shows the current state of your working directory and staging area again after the previous commands have been executed. It's good practice to frequently check the status to keep track of changes.
  5. git pull: This command fetches the latest changes from the remote repository and merges them into your current branch. It's a combination of git fetch followed by git merge.

09#step — Test your app

rails s
fig.9. Home Page and navbar.
fig.10. About page.

10#step — Upload to Heroku:

git push heroku master
heroku open
fig.11. On HEROKU 👉️ https://j3-rails-blog-demo-5a0a55d44e12.herokuapp.com/ And There you have it! 🫶️

That’s all folks!

In the next post, we will create posts…

Bye for now!

👉️ rails_blog_v2

For your convenience:

git checkout -b styling
rails s
cd rails-blog-demo/
rails s
cd rails-blog-demo/
rails s
cd rails-blog-demo/
rails s
clear
git status
git add -A
git commit -m ":lipstick: feat: Add Styling"
git push --set-ipstream origin styling
git status
git fetch
git status
rails s
git checkout master
git add -A
git commit -m ":lipstick: feat: Insert Emoji"
git checkout master
git pull
clear
git push heroku master
heroku open

Related Posts:

00# Episode — RailsSeries — Installing Ruby on Rails Using ASDF — Why ASDF is Better Than RBENV for Rails Bootstrap App?

01# Episode — RailsSeries — How To Send Email In Rails 7? — User Registration and Onboarding.

02# Episode — RailsSeries — 14 Ruby Extensions 4 Vs Code — Based On This Deanin’s video.

03# Episode — RailsSeries — A Rails Blog In VS Code — Quick Start — How To Create A Blog in VS Code — Part I

04# Episode — RailsSeries — A Rails Blog In VS Code — Styling — How To Create A Blog in VS Code — Part II (this one)

05# Episode — RailsSeries — A Rails Blog In VS Code — Create Posts — How To Create A Blog in VS Code — Part III

06# Episode — RailsSeries — A Rails Blog In VS Code — Posts Tips&Tricks — How To Create A Blog in VS Code — Part IV

07# Episode — RailsSeries — A Rails Blog In VS Code — Devise — How To Create A Blog in VS Code — Part V

08# Episode — RailsSeries — A Rails Blog In VS Code — Add Comments to Post — How To Create A Blog in VS Code — Part VI

09# Episode — RailsSeries — Rails Blog In VS Code — Using Stimulus — How To Create A Blog in VS Code — Part VII

10# Episode — RailsSeries — Rails Blog In VS Code — Noticed V1 — Notifications for your Ruby on Rails app — Part VIII

11# Episode — RailsSeries — Rails Blog In VS Code — Noticed V2 — Notifications for your Ruby on Rails app — Part IX

For v2 let’s Tag it all!

git tag -a rails_blog_v2 -m "Blog in Rails 7 - v1.0:  Go to  https://j3-rails-blog-demo-5a0a55d44e12.herokuapp.com/" -m "0- Creating a new feature branch: styling;" -m "1- Use Bootstrap 5 CDN & Navbar;" -m "2- Modify Home & About pages;" -m "3- Making adjustments on layout app - wrap around yield;" -m "4- Upload Rails 7 project to heroku." -m "Thank you for downloading this project 😍️" 
git push origin rails_blog_v2
Styling
Heroku Deployment
Rails 7
Ubuntu 23
Bootstrap 5

--

--

J3
Jungletronics

Written by J3

1.1K Followers

Hi, Guys o/ I am J3! I am just a hobby-dev, playing around with Python, Django, Ruby, Rails, Lego, Arduino, Raspy, PIC, AI… Welcome! Join us!

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams