CircleCI is cool and all, but let’s just roll w/ GH pages

By patrickg,

I cant spend a TON of time playing with new stuff, not as much as I would like. I got to try out circle CI to the point of getting to work and getting to understand HOW it works, which is the most important take away really.

The upsides are that I am not familiar with another weapon in the development arsenal. I believe, however, that it is overkill for my meager purposes of simple deployment. I have decided to just stick with pushing directly to GH pages and serving the content from there.

 

 

Testing a CircleCI deployment

By patrickg,

I’m gonna get this damn thing going eventually.

 

Run this maf wide open for processing and export and see if it goes a little bit faster.

Site Updates

By patrickg,

Lots of new features added this time around.

Added breadcrumbs for interior non-home pages. Also added a fun nugget to auto-create side column menus for subpages when they exist. So I will setup my about page with some subpages, check it out. Still trying to tweak it to show sibling pages. right now it is just showing children of the parent. I’ll get to it. Calm down.

Update

Fixed the subpages menu dealy. Also added some logic to only display breadcrumbs when there are breadcrumbs. So no empty container for top level pages.

Ditched reactjs and netlify, went back to WordPress.

By patrickg,

I know I know. I had spent a good month or two learning react + netlifycms + bulma + react-bootstrap and more. Attempting to get better with it and build as I learn. But god damn, I guess I am just impatient, or something. React is really cool. Don’t get me wrong, but as my desires shifted toward wanting to create content and less toward wanting to solve a technical problem to create new content, I decided to just say fuck it, and go back to what I know.

WordPress sucks. This post was written in WordPress. But you are not reading this post on WordPress. You are reading a optimized, minified, git-versioned static generated deployment of my site. WordPress without letting the public touch WordPress is really cool. Despite all I learned with react and netlify, which to their credit is a really cool service and really cool interface, I just really prefer this environment for writing.

 

Updates to the site

By patrickg,
I have had to re-do the navigation, found a react-bootstrap port, and searched out, and utilized my first npm plugin, gatsby-plugin-favicon, to automatically generate my favicon stuff.
Learning curve aside, I have to say, this has been a very rewarding and fun experience. I look forward to continuing to learn here.

Building a new site with Gatsby and NetlifyCMS

By patrickg,

This is not fun. Just kidding. Well, sort of.

 

 

Coming from what I will call WordPress-Privilege, it’s been stupid easy to point, click, mash some buttons, and have a full site up and running in minutes. So it’s a bit of a jump for me to switch to using not just a non-php based blogging system, but it’s also using a static site generator called Gatsby, which is also using NetlifyCMS to manage the posts/pages, deploying and building from github commits, and I have very little experience using react. So, to say I am out of my element is an understatement. However, some hunting around, fiddling with the code, and several failed builds later, I think I get it.

 

First Thing I Did

 

So the first thing I wanted to do, was mimic a feature of my WordPress static site, which was a “repo” for snippets, or ideas, or whatever. Basically a site-contained twitter that could be blurbs, ideas, or code to use later. In WordPress, this was simple as using custom post types, and advanced custom fields to setup the meta interface and like that, you are off to the races.

 

Well in Gatsby and NetlifyCMS, it is a little more complicated. Editing the config.yml (for NetlifyCMS) in the demo project I started with, yielded some clues. Instead of “post-types”, we have collections. Which is a more universal name for the idea of a grouping or _collection_ of data (read: posts), but I’m still drawing the analog to WordPress here so bear with me. So I copied that whole block of settings, duplicated it, and change the names. In doing so I discovered the folder path, which didn’t exist yet. So That was clue #2, had to create a folder. Since my collection would mimic the blog, I needed to mimic it’s layout. Unfortunately the template came with initial blog posts, but no dedicated “blog index” (more on this later), so I was unsure how to display a page with just my custom collection.

 

Second Thing I Did

 

Look at the site, look at the code, look at the CMS, now look back at me. The blog posts were being displayed on the index page, so naturally I should be able to copy that page and use the code (albeit modified) to display my collection elsewhere. Bunch of stuff here, lots of react specific features that I had no clue what I was looking at. I went carefully, block by block, read it, try to gather a context of what was going on, and change what needed to be changed based on my custom collection naming scheme.

 

Third Thing I Did

 

So after I broke the build a few times trying to load two collections on one page, I decided to go about this another way. I don’t know enough about react to try an advanced GraphQL query and parsing those results, but I can just mimic the page into a second, stand alone page, and get that working. Trial and error later, I’ve learned that even on two different pages, you cant have two GraphQL queries named the same thing. Outside of that, it’s pretty simple. I mean, _simple_ as in, easy to glean what you need to know to get it to work from the context.

 

Conclusion

 

As it stands right now, Ive changed the logo, added a collection, a page, changed the sass variables, and familiarized myself with the directory structure. I’m still a ways off from being able to build a whole site from scratch, but I don’t think I am far off from ripping the guts out of this template and replacing it with my own design/layout, which will be my next challenge. I see lots of image variables going on and am curious to learn more about that and how layouts work with react.