How Do I Add a WordPress Blog to My Rails App?

I wanted to have a robust blog for my Rails app, but I didn’t want to spend too much time on it. Initially I created a simple model (Articles) and added TinyMCE in it, but I ran into some challenges in how photos were displaying, and other styling aspects. I could’ve spent more time on it, but it was starting into eating into the time I was spending on developing enhancements to the app itself.

You can easily create a WordPress instance and map it to a subdomain. For example, blog.foo.com.

The problem with that, as discussed by SEO experts, Moz.com, is that it can hurt your search engine optimization efforts (SEO). Instead, it’s better to use a subdirectory like: foo.com/blog.

I was able to set-up my blog this way with the help of Dipesh Batheja’s article.

Here’s the exact steps I took:

(1) Added the domain (foo.com) to a WordPress hosting account on Siteground (my host)

(2) Using cPanel on Siteground, I created a subdomain, ‘blog’ for my domain (so I now could use blog.foo.com)

(3) In cPanel, I used “Let’s Encrypt” to add an SSL certificate to my subdomain (now I could use httpS://blog.foo.com)

(4) Installed WordPress (in cPanel) to my subdomain

(5) I went to my DNS records and added two A records – http://www.blog.foo.com, and blog.foo.com, each pointing to the IP address of my domain on Siteground. After the DNS propagated, I could go to the URL https://blog.foo.com and see my WordPress instance.

(6) In my Rails app, I added the Rack Reverse Proxy gem to my gemfile:

gem "rack-reverse-proxy", require: "rack/reverse_proxy"

(7) ‘bundle update’ to get the gem installed

(8) In config/application.rb, I added this:

config.middleware.use Rack::Affiliates config.middleware.insert(0, Rack::ReverseProxy) do 
  reverse_proxy_options force_ssl: true, replace_response_host: true

   reverse_proxy(/^\/blog(\/.*)$/, 'https://blog.foo.com$1', opts = { preserve_host: true })
end

(9) In routes.rb, I added this route:

get "/blog", to: redirect('https://www.foo.com/blog/', status: 301)

Now, every time someone goes to foo.com/blog, they’re redirected to my WordPress blog, and my SEO isn’t hurt.

Skipping to the End of Data in Rails Console

I used to get stuck in the Rails console when I had a query that returned a lot of data. I would just keep hitting the button to go to the next page which took a long time depending on the data returned.

I finally learned that if I just enter q, then I can skip past all of that.

Such a time saver, I should’ve figured this out much sooner.

Upgrading Ruby on Windows with Chocolatey

I need to add an updated version of Ruby so I could use Ruby on Rails 6. I found an easy way to do this using Chocolatey. Chocolatey offers a free version for personal use.

I’ve used Railinstaller in the past to help, but it seemed that their stacks were a little outdated when I looked (and they didn’t have anything beyond Ruby 2.3).

That’s OK because using Chocolatey was super simple.

  1. Install Chocolatey
  2. You should now be able to run ‘choco install ruby’ or ‘choco upgrade ruby’ depending on what you want to do (Ruby chocolatey page)

Since I’m running URU, I just needed to add the bin path to it, and now I can switch between Ruby versions easily.

Using Lists in TinyMCE

I’m using TinyMCE in one of my Rails apps and I had trouble today pasting in text with bullets.  TinyMCE injects paragraphs <p> in the code, so the HTML ended up looking this.

ScreenHunter 212

That ended up with the text for the bullet point being on a different line (above) the text for that bullet point.

This probably isn’t the proper way to do it, but I ended up going to the second item in the list and clicking enter.  This created a new line that wasn’t preceded with the <p>.  After that I clicked enter and created new lines in the code for each of the bullet points.

On my toolbar I don’t have the option to add lists which made it more difficult.  In the future, I may try to add plugins to handle this to see if it makes it easier.

Password Protect Staging

I wanted to password protect my staging environment on Heroku.  Here’s a simple way to do it.

In your application controller, enter:

if Rails.application.secrets.auth
  http_basic_authenticate_with \
  name: Rails.application.secrets.auth_name,
  password: Rails.application.secrets.auth_pass
end
Then in your environment variables in Heroku (for your staging app), enter these variables:
AUTH = true
AUTH_NAME = <user name you want to use>
AUTH_PASS = <password you want to use>

Free Quick Start Tools When Building Websites

When I’m creating a site there’s certain things that I need to create each time.

Here’s a list of some of my favorite tools – each free:

Name Generator

Namelix – enter a term (or terms) and this AI powered tool gives you name suggestions.  I usually add additional search criteria to only suggest to names with available domains

Privacy Policy

Shopify Privacy Policy Generator – create a privacy policy for your site

 

Terms of Use

Shopify Terms and Conditions Generator – creates terms geared more towards sites that sell products or services

Termly – can create terms geared towards SaaS products (paid and free options)

 

Cookie Warning/GDPR

Cookie Consent by Insites – makes it easy to create a warning to all site visitors that you use cookies

Design

BEE Free – use their tool to create responsive email designs

 

Customize Form for Mailchimp

I bought a HTML template that had an email subscription form and I wanted to make it work with Mailchimp.  I wanted to keep the style of the template and not use a Mailchimp styled one.

It took some work, and I didn’t find documentation to do it, so here’s what I did:

(1) I went to my email list in Mailchimp and then Form Builder (Signup forms > Form Builder)

(2) Go to the URL provided for the form

(3) On the page that the URL takes you to (with the form), view the page source

(4) Copy these pieces of code from the source into your code:

(a) where your form should post to:

<form action="https://yoursite.us19.list-manage.com/subscribe/post" method="POST">  

    <input type="hidden" name="u" value="foo">
    <input type="hidden" name="id" value="bar">

(b) for each field that you want to capture, find the name of the field and paste it as the name into the matching fields on the form you’re updating:

<input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="">

(c) form submission details:

<input type="hidden" name="ht" value="foobar"> <input type="hidden" name="mc_signupsource" value="hosted">

If you submit the form and it redirects you to the web form instead of subscribing you to the list, it probably means that you have a name attribute wrong on one of your fields (and when you submitted, Mailchimp didn’t know what to do with that field).