Head in the clouds…

January 10, 2021

Let’s kick things off by building this blog itself. Here is how it was done.

The plan

Build this blog, but do it in the clouds.

Github

First, we create a new GitHub project. You can do this right in the Github web UI. We’ll go from nothing to a live blog and never touch our local disk.

Mine is (https://github.com/omnifroodle/froodles), the result of these instructions is at this commit (https://github.com/omnifroodle/froodles/tree/eacc93f5e5a5a521584df04eeaa10aa54051fbda).

Gitpod

Once you have your Github repo, we’ll need a place to work on it. Go join Gitpod. Then open the blog there.

You can open a dev environment in Gitpod by just taking gitpod.io\# onto the front of your github url. You can steal mine here: (gitpod.io#https://github.com/omnifroodle/froodles)

First, lets keep our git repo from bloating up with a decent gitignore, this one comes from the default Gatsby starter here: gatsby-starter-default/.gitignore at master · gatsbyjs/gatsby-starter-default · GitHub

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# dotenv environment variable files
.env*

# gatsby files
.cache/
public

# Mac files
.DS_Store

# Yarn
yarn-error.log
.pnp/
.pnp.js
# Yarn Integrity file
.yarn-integrity

Next we’ll need a gitpod.yml on the root of our project. This one should be good for starters:

ports:
  - port: 8000
tasks:
  - init: yarn install
    command: yarn develop

Gatsby

Time to bring in the bits. This is a pretty standard Gatsby install with one flourish. I’ll explain in a minute.

gatsby new froodles https://github.com/gatsbyjs/gatsby-starter-blog

Here is our catch though, we are already in our “project” directory. Since gatsby new wants to build in a subdirectory, we let it. Now lets grab the result and move it back up one level to our project directory.

gitpod /workspace/froodles $ cp -rf froodles/* .
gitpod /workspace/froodles $ rm -rf froodles/

Netlify

Now, sprinkle in some Netlify (for hosting, and later for easy Lambda goodness):

npm install --save netlify-cms-app gatsby-plugin-netlify-cms

Create a config.yml file in the directory structure you see below:

├── static
│   ├── admin
│   │   ├── config.yml

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: ‘blog’
    label: ‘Blog’
    folder: ‘content/blog’
    create: true
    slug: ‘index’
    media_folder: ‘’
    public_folder: ‘’
    path: ‘{{title}}/index’
    editor:
      preview: false
    fields:
      - { label: ‘Title’, name: ‘title’, widget: ‘string’ }
      - { label: ‘Publish Date’, name: ‘date’, widget: ‘datetime’ }
      - { label: ‘Description’, name: ‘description’, widget: ‘string’ }
      - { label: ‘Body’, name: ‘body’, widget: ‘markdown’ }

Add the netify plugin to the gatsby-config.js (all these files are available in my shared repo):

plugins: [`gatsby-plugin-netlify-cms`]

Check it all back into Github and you are ready to pass it to Netlify for hosting. Follow the steps here: (https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/)

Gitpod, one more thing…

To run your blog on gitpod.io while you develop, just hit the terminal and run: yarn develop