Harrison Malone - How I Built My Blog

Taking notes and writing posts on technical topics is important to me. I've tried many apps and found most of them having slight flaws. So I've gone for the classic developer approach and built my own tool. The result is this very site you're looking at! In the past few months I've enjoyed the way this writing system works.

It's a super basic approach but it does a few key things well. These things include:

Local files
Good syntax highlighting on the web
Some kind of backup solution that makes files accessible across multiple computers
Files ordered by modification date

The tech used is as follows:

Rails API with a connection to an S3 bucket to host text files
React client which connects to the Rails API
File transfer app installed on local machine, I use Transmit on macOS

If you wanted to create a blog with using the same implementation you'd need to do the following.

Create an AWS account
Create an S3 bucket, give it a name and leave all the defaults
Grab your AWS credentials, you'll need access_key_id and secret_access_key, ideally you'd set this up with an IAM user that only has programmatic privileges for S3
Clone down the backend and frontend repositories
Let's start with the backend, open your rails credentials file in VSCode
```
EDITOR="code --wait" rails credentials:edit
```

Add your credentials in this exact format, indentation matters

aws:
  access_key_id: <your access key>
  secret_access_key: <your secret key>
  bucket: <your bucket name>

Deploy the backend with Heroku, you need to install the Heroku CLI and git commit before running
```
git push heroku master
```
Copy the contents in your master.key file in config and add this to the Heroku config vars dashboard located under settings, the format of the variable should look like this
```
RAILS_MASTER_KEY | <your master key>
```
Let's shift our attention to the frontend, create an .env.production file in the root directory of the client folder

Add the following to this file

REACT_APP_BACKEND_URL=<your heroku backend url>

Install the Netlify CLI

Add a netlify.toml file to the root of your client directory

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Add this script to your package.json

"deploy": "yarn build && netlify deploy --prod --dir=build"

Run this command to deploy your client side
```
yarn run deploy
```
You'll get back a Netlify url that will be something like this:
```
https://brave-curie-671954.netlify.app
```

Add this url to your cors.rb file in your backend directory

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://brave-curie-671954.netlify.app'
    resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Redeploy to Heroku
```
git push heroku master
```

Tuesday, March 9, 2021

How I Built My Blog