DEV Community: Kaleigh Scruggs

Create a Blog with WordPress and Gatsby - Part 3

Kaleigh Scruggs — Mon, 17 Aug 2020 12:13:56 +0000

Alright! So you've made it through part 1 and part 2, now for the final chapter in the series!

Part 3 - The Real Deal

Now that we've pulled in posts from our WordPress blog into our Gatsby app successfully, let's configure Netlify, so we look more official with our domain name. Instead of using kaleigh-tech-tutorial.netlify.appwe'll be using kaleigh.tech as the domain name.

Domain Management

Head over to Netlify and open up your site's settings and scroll down to "Domain Management."

Click on the button "Add Custom Domain", type in your domain name, and verify that you are indeed the owner.

Once it took me back to my settings, I saw this error...don't worry, we'll fix it:

Scroll back up to custom domains and click on your domain name's dropdown:

We need to set up the Netlify DNS, so click that option.

Click on Continue and then you'll be given a list of nameservers.

You'll have to go to wherever your domain was purchased to modify the domain names. Netlify has some good docs in case you get stuck. This article is also helpful.

I have NameCheap, and it was easy to set mine:

Once you do this, you must wait until everything switches over. Sometimes it's quick, sometimes it's not. Mine ended up taking around 20 minutes. So go make some tea or coffee and come back!

If you see that...then you should see this:

Woo! It's all working! Worried about the HTTPS? Scroll down back on your Netlify Domain settings and click the button to verify the configs:

Now you should be good to go (in a few minutes). This part of the process takes some time, so the earlier you do this, the better if you're trying to deliver a website or show it off.

Hopefully, you've enjoyed my series creating a blog with WordPress and Gatsby! Let me know if you did by letting me know, sharing it with a friend, and sharing on Twitter, Dev.to, Medium, or wherever else you like to share!

Create a Blog with WordPress and Gatsby - Part 2

Kaleigh Scruggs — Wed, 12 Aug 2020 11:34:37 +0000

Part 2 - The Connection

Now let’s go back to our Gatsby site and get it hooked up to our WordPress site, and pull in some blog posts!

Gatsby Plugins

Open up gatsby-config.js in your text editor.

First I’m going to edit the siteMetadata from the defaults to make the site my own:

There are so many great Gatsby plugins, but for the sake of this tutorial, we’ll only install what we need to connect WordPress.

Normally I’d install the gatsby-source-wordpress plugin, but since it is going to be updated soon, let’s try out the new one.

Run:

npm install gatsby-source-wordpress-experimental

Next, we’ll go back and edit our gatsby-config.js file and add a .env file to the project. It will be ignored by gitignore.

This is what mine looks like, minus my login info for my WordPress site.

Here’s what we’ll add to gatsby-config:

Make sure you add your WordPress site’s graphql link: https://wp.kaleigh.tech/graphql

Next, we’ll need to edit the gatsby-node.js file. I followed what was in the docs and used:

Now our site is hooked up to our WordPress site, but there’s no real way to verify and view anything. So we’ll need to create a blog post template so we can pull in the information.

Blog Post Template

Next, we’ll need to set up a new folder called “templates” under src and add blog-post.js
Here are the contents of blog-post.js:

So with these new changes, we’re able to pull in the blog posts from our WordPress site and display them. Run gatsby develop to check it out.

When the site loads we won’t see any differences on the home page. We haven’t set up our routes yet. If you go to a URL like this: http://localhost:8000/oops you’ll see a list of all the pages, and should see some of your posts from WordPress:

See those “fake” posts? Those are coming from WordPress!

Click on them to make sure they’re working. Here’s what mine looks like:

It’s just pulling in the Title and Content, which we set up in our blog-post.js file.

Let’s add the date to our posts. If you go to your GraphQL locally, http://localhost:8000/___graphql you can see all the options of what we can pull in from a WordPress blog post:

Check the date box, and you’ll see this:

I added in the “MMMM DD, YYYY” and now I see this:

Let’s add that to our site and see what happens:

You may need to restart your server to see the results:

Awesome! Next, we’ll create a page that will list out all of our blog posts.

Blog Post Page

Under your pages folder, create a new file called blog.js. For now we’ll just pull in the Blog Title, Date and create a link to the post using the slug.
Here’s what the graphql query will look like:

This will be a list of published posts, to do this we’ll use a map function so we don’t have to worry about updating the page whenever future posts are published.

With these few lines, take a look at http://localhost:8000/blog/ and see what is there:

Click on the links to make sure they’re working. Now lets clean this up a little and get rid of the bullets.
For simplicity sake, we’ll create a new CSS file in the component folder named style.css and add:
ul { list-style-type: none; }

We’ll also need to import the stylesheet in our layout.js file:

And now it should look a lot better:

Finally, let's add a link to this page on the home page. I just added this line:
<Link to="/blog">Like this blog</Link>

And now we’re in business!

Hopefully, yours looks the same, if not please let me know! You can also take a look at my GitHub repo for this series as well.

Create a Blog with WordPress and Gatsby - Part 1

Kaleigh Scruggs — Mon, 10 Aug 2020 11:49:32 +0000

I love Gatsby. I love WordPress. I love Gatsby and WordPress together. Earlier this year I set up a couple of sites using existing WordPress sites that I managed and created all-new designs and front-end experiences for both. In this series, I’m going to walk you through the whole thing- we’ll set up a new site that uses WordPress as the headless CMS with Gatsby. I’ll start from the very beginning so if you don’t know anything about Gatsby or WordPress, this will hopefully get you up and running with ease. If not, let me know what I can help you with!

Part 1 – The Foundation

Let’s say you’ve decided you want to build this sort of site either for yourself or a client. All new everything. A domain name, hosting, a fresh start. If you’re not starting out fresh, you can jump in wherever it makes sense.

Assumptions

You’ve purchased a domain name (I like to use NameCheap)

You have a place to host the WordPress Site (ideally wherever you purchased the domain name), and it’s already installed.

The website we’re creating will be kaleigh.tech and the WordPress site will be hosted at wp.kaleigh.tech. Wherever your WordPress site lives does not matter, it can be a subdomain or top level.

WordPress Site

No matter if you have a lot of content or nothing at all, you’ll want to install 3 plugins to your WordPress site. We’re not going to hook them up right now since we don’t have anything to point them towards, but let's get it set up ahead of time.

Install Plugins

wp-trigger-netlify-build

wp-graphql

wp-gatsby

Install these three plugins, and you can go ahead and activate them.

Since I’m creating this site for this tutorial, I filled in some dummy pages and posts on my WordPress site.

Get Gatsby Up & Running (Locally)

Now let's switch gears and get Gatsby up and running! Gatsby has great docs, and if you haven’t checked them out yet, open a new tab and take a look at their Step 0 page to make sure your environment is ready to go. Once you get to “Using the Gatsby CLI”, come back here.

Let’s create our Gatsby site! There are many starters to choose from, but let's go with gatsby-starter-default. I’m going to name my repo kaleigh-tech-tutorial, but you can name yours anything you want!

gatsby new kaleigh-tech-tutorial https://github.com/gatsbyjs/gatsby-starter-default

Once the site is installed, let’s jump into the directory and run the site to make sure it’s working.

cd kaleigh-tech-tutorial

gatsby develop

If all is well, you should see the following:

Woo, your local site is up and running!

Let’s make it LIVE! I personally like to use GitHub Desktop to manage my repos locally since I can see everything easily.

You can also go to GitHub and create a new repo, and follow the steps there. My repo is now here.

Let's check out how awesome Netlify is!

Set Up Netlify

Head over to Netlify and if you don’t have an account, sign up (it’s free). If you do, sign in, and make sure GitHub is connected.

Since we’re using a GitHub repo, click on GitHub:

Find the repo you just created and click on it:

We’ll just go with the defaults:

Now my site is building!

As you’ll see, you’ll have a different named repo. Don’t worry, you can change it (if you want) later. Sometimes the names are funny!

It shouldn’t take too long to build your site. Now you can check it out. My website is here: https://loving-ride-e53f6d.netlify.app/

Let’s change some things within Netlify. First, I’ll change my app’s name to the same one as my GitHub repo to keep things consistent.

Netlify Build

At the top of the page on Netlify, click on Settings and then “Change Site Name.”

Now my site is running at https://kaleigh-tech-tutorial.netlify.app/

A neat thing about Netlify is that you can add a badge to your README to display your site’s status. We can also add this to our WordPress site. Remember the Netlify plugin we installed?

On the same Settings page, scroll down to the Status Badge section:

Click on “copy to clipboard” and head to your text editor so we can edit your README.

I pasted it on Line 11 of my README:

Now let’s head over to our WordPress Dashboard. On the left-hand side click on “Netlify Build”, it will be towards the bottom of the menu items.

You’ll see we need to add 3 links.

The first one is our build hook. Back in Netlify, go to settings, then on the left click “Build & Deploy” and find Build Hooks. Create a new hook and use the link from that one to paste into WordPress.

The second is the status image. That link should be the green text from my screenshot above: https://api.netlify.com/api/v1/badges/0149b059-a599-4da2-b595-acc319446746/deploy-status

The third is the status link. That link will be the red text from the screenshot above: https://app.netlify.com/sites/kaleigh-tech-tutorial/deploys

Now you should have all 3 links

Click on Save Changes. This will allow you to create a new deploy when you update content on WordPress.

Alright, that's it for now, stay tuned for Part 2 - The Connection, coming soon!

Remote Work Tips

Kaleigh Scruggs — Mon, 16 Mar 2020 14:19:56 +0000

As someone who can do their job from anywhere and is very used to working from home, here are some things I like to share with friends when they ask me for any tips:

Don't sleep in - wake up with enough time to start your day, as if you're going into work. Brush your teeth, if anything for your dog!
No PJs! Change into something else. It doesn't have to be business casual, just something that you wouldn't want to nap in.
Have a dedicated space to work, and start your day there. Since most of us have laptops I will move around the house as I work, but the majority of my hours are spent in my home office, not on the couch. Bonus points if you sit outside!
Do take breaks, just be smart about it. Make some more tea, grab a quick snack, let your dogs out. Set reminders or alarms if you need to.
Take an actual break for lunch! Maybe even go for a quick walk around the neighborhood.
If it is too quiet, play some background music or even a podcast. It might sound like you're back in the office!
Find a quiet spot for meetings. My dogs somehow know when I'm in a meeting -and unmute- and that's when they decide to bark at squirrels. Be ready for that.
Know when to end your day.
Make sure your laptop is plugged in.
Keep in contact! With not only your coworkers but the humans in your house as well. Especially now. Reach out, say hey, share a fun fact, or even a picture of what your dog has been up to.

Nevertheless, Kaleigh Coded

Kaleigh Scruggs — Thu, 05 Mar 2020 22:50:55 +0000

I wanted to share how I got started in tech, despite being the only girl in MOST situations

Early Beginnings🐣

I think the very first time I coded, I was making a website for my Girl Scout troop. I can't remember when this was exactly but I was probably in 5th grade or so. This was in 2000. I remember being frustrated that no one was visiting my site (thanks to visitor counters on every website). But also, it was the year 2000, everyone was still on dial-up, and that's IF you had a computer and IF you had internet.

I've been into computers since I was in diapers. My mom's side of the family has deep roots in IBM so we'd always had a computer. I loved playing games, writing, changing settings, and just being on the computer.

College🎓

Fast forward to college. I started out as a Music Performance major (violin and piano). I knew very well that not only was it something I didn't see myself working in 10 years, but I wouldn't be able to support myself. But my parents encouraged me to start out college in music since I knew it was something at that time that I loved to do and I'd figure it out.
Well...the music school was undergoing renovations at Georgia Southern when I started so all my classes were in random buildings throughout campus.

My piano class was in the IT Building.
Whenever I'd go to piano class, I would always wonder what the IT majors were learning and thought how cool it would be to be one myself. I wanted to be on the computer all day too! After a full year as a music major, I decided it was time to switch. I met with the dean of IT, as well as some other majors as well. I knew in the back of my mind I wanted to do IT but also wanted to check out other options as well. I felt so 'jazzed' after my meeting in the IT building and knew that was it. I did do some research on what of the 3 options (CS, IS, IT) had the least amount of math and then went with Information Technology.

Only Girl🤷‍♀️

My first classes were awesome, but I did notice that I would be either the only girl or one of a few. I didn't let that deter me. It did make finding study buddies, or people to be in my group projects with harder because it seemed like the guys were scared of me, or didn't think I knew what I was doing. But nevertheless, I coded.

After I got my undergrad degree, I went straight into my master's program. I knew at the time I would thank myself later, and boy, do I ever. I'm so glad I got it out of the way!

In my cohort for my master's in Internet Technology (now Business Technology), there were only 4 girls, including myself. At times it was intimidating, but we all came from different backgrounds and were all different ages, so gender was just one of the many differences between everyone.

Work Life👩‍💻

I received my masters in 2014, and ever since I've worked in all sorts of environments. Small start-ups, large corporations, mid-sized companies, and they all have their differences in the struggles of being one of the odd ones out in terms of gender. But nevertheless, I coded.

At both my previous and my current job, I've started and led our internal Women in Technology groups. I don't start these groups because I'm trying to separate us from the men but to form a community that doesn't necessarily have to rely on friendships in a cliquey sort of way. I love these groups because we can not only support each other in multiple ways but also influence the next generation of women in tech. Holding events where we show school-aged girls what exactly a web developer does is so fun for me! If I had that when I was their age, I might have dived deeper into tech earlier (not to say I didn't enjoy playing violin and piano - I still love to play, and it gave me SO MANY amazing opportunities). But as the world becomes more tech-focused, I want to make sure we all have the same opportunities, and that there's a community out there that will welcome anyone and everyone with open arms.

Thanks for reading! If you liked this, give me a shout on Twitter and/or Instagram!

My experience at Refactr.Tech 2019

Kaleigh Scruggs — Thu, 18 Jul 2019 13:57:12 +0000

Last month I attended REFACTR.TECH in Atlanta. REFACTR is all about diversity & inclusion in tech. It was amazing to see all the companies who attended that have huge D&I initiatives looking to hire attendees.

I applied for and received a free ticket, which included a workshop, from Women Who Code. I'm so thankful they offer free tickets to events and conferences, I've been able to attend a few now with the help of Women Who Code. 👩‍💻

Day 1 - Gatsby Workshop

REFACTR had 6 different workshop options, and I was very excited to see that there would one on Gatsby since I've been looking for a new CMS to manage my website projects. A few months ago I stumbled upon Gatsby, but I didn't have time to learn it so this was perfect. From the Gatsby website, it's explained: "Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps". Sounds pretty nice!

This was a full day workshop where Brandon Kearns taught us all about Gatsby from the ground up. We did the tutorials on the Gatsby site as well as one with Contentful as our headless CMS. Once we did that I was completely sold. Manage the site with Gatsby/React and still have a CMS that would be easy for others to update? Take my money (jk it's all open source).

Day 2

This was the first full day of sessions, things kicked off a little after 9am with an opening keynote by Tracy Lee about inclusion and creating a better culture in tech.

The first session I attended was with Chloe Condon "IoT for the Introvert". She showed us how she programmed a Flic device to get herself out of social situations. I definitely want to do this!

Next up, I attended "Build Accessible UI with React!" with Taelur Alexis. She spoke about her journey into accessibility and best practices.

Before lunch, I learned about how Alicia Barrett rewrote the REFACTR.TECH website with Gatsby in "Diving into GatsbyJS". As if I wasn't already obsessed with Gatsby, I learned even more about how fast and mobile friendly it makes websites.

Once everyone settled in with lunch, there was a panel "Forging a Path Through Inclusive Entrepreneurship" with Jamie Harrell,
Alex Castillo, Lynnette McKissic, Dr. Kortney Ziegler, Stefanie Jewett, and Nael Alismail.

After lunch, I attended a session called "DevOps: A Love Story" with Valarie Regas. I haven't gotten into DevOps too much yet, so I was really interested in this one. Valarie was not only hilarious, but she explained all the steps and why each part of DevOps matters.

"Don't Be Afraid of the JavaScript Stack Trace" was awesome with Jennifer Bland. She taught us a bunch of different ways to troubleshoot your project with the stack trace, including one with a table that was really cool.

And then that was it for the first day! After the sessions finished, there was a happy hour and game night in the ballroom. Each table had different kinds of games to play, there were food and drinks, and those awesome looking cupcakes!

Day 3

The final day of REFACTR started out with a keynote with Dr. Kortney Ziegler, "Finding Purpose Through The Things We Build". He spoke about his journey in tech and why he's doing what he's doing.

For my first session of the day, I attended "Refactor Your Body For Better Performance" with J.C. Hiatt, founder of DevLifts. He highly encourages developers to stay active since we work in a job where if you're on a roll, it could be hours before you get up from your desk.

"Visual Studio Code Sparks Joy" with Craig Rodrigues was next. I was excited about this session because I recently (within the past year) have gotten into VSCode and haven't looked back. He shared a bunch of tips and favorite extensions.

Next, I attended "WebAssembly: Your Browser is the new OS" with Jeremy Likness since I didn't really know much about WebAssembly, but I've heard it talked about a ton. He showed a bunch of examples of high performing web apps.

After lunch, there were only 2 sessions left (so sad!). I learned about
Reconfiguring Our Mindset from “Self-taught” to “Community-taught” with Ray Gesualdo. I really enjoyed this one because he really stressed how we all come from different backgrounds with how we got to where we are, and we need to support each other with what we've learned and help each other out.

"The challenges in building a social app" was with the amazing Alicia Carr, who built the Pevo app that helps victims of domestic violence. She spoke about her journey in tech and with building the app. It was one of my favorite sessions!

Finally, there was the closing with Alex Castillo about Empowering the Mind and what his company, Neurosity is doing. It was some really cool stuff!

After some giveaways, the conference was over. But not before we all marked our calendars for next year! Refactr.tech will be back April 22 - 24, 2020!

Friday Favs!

Kaleigh Scruggs — Fri, 21 Jun 2019 14:03:02 +0000

Hey and Happy Friday!

So back in the day (ok, like 7 years ago but I can't belive it's been that long) when I started my Masters degree, it was required that we had a blog for one of our classes. I named mine "Kaleigh's Keynotes" and would blog more than was required for my class. #teacherspet

No, but I would do this thing on Thursdays where I would share my favorite links and news in tech for the week. It was fun for me because not only did I require myself to keep up, but I liked being a part of the tech comminity. Throw in some life and exhausting jobs and I stopped all that.

But now, I'm back!

The past few months at my new job have been so refreshing. I feel like I'm finally doing what I want to, and have the energy and fire to get more involved again.

In my attempt to write again and blog more I want to bring back my old "Tech Link Thursdays" (or whatever I called it, I can't remember, I'm old now 👵). But on Fridays, because who doesn't love Fridays? And usually on Friday mornings I'm extra excited to sit down in front of the computer with my tea and read about what's going on in the world.

So, here are my favorite links from this past week! And of course, please share with me YOUR favorite links as well!

⭐️ Tech Job Interviews 101: 15 Remote Job Interview Questions Explained via SkillCrush

⭐️ this tweet by Amanda Rosenberg

⭐️ a collection of awesome react links from Nick Raienko on GitHub

⭐️ Free online testing tools for your website by Adam Greenough

⭐️ Dr. Mario is in (on iOS and Android) July 10 (super excited for this!) via techcrunch

⭐️ Up your Git game and clean up your history by Christopher Kade right here on dev.to

Connect with me on Instagram and Twitter!

Nevertheless, kaleigh continues to code

Kaleigh Scruggs — Fri, 08 Mar 2019 16:41:55 +0000

I continue to code in 2019 because...

I've been doing so for over 11 years (and then some. Hi Myspace...and GeoCities!) I changed my major from music performance to IT in 2008. I went from a major where it was a majority of women to one that was a majority of men. It's been amazing to see the changes in tech since then and to see the growth and interest of women in tech. It's 2019 and things are only getting better. I'm learning more, and finally in a position where I CAN learn more and am better supported.

keep up with me

on twitter and insta

Hi, I'm kaleigh

Kaleigh Scruggs — Wed, 08 Mar 2017 18:32:18 +0000

I have been coding for 10+ years.

You can find me on Twitter as @kaleighscruggs and Instagram as @klgh.js.

I live and work in Atlanta.

I am a front-end web developer!