My First Blog Built From Scratch...Sort Of


Show Notes

Everyone loves a good origin story, right? Well, this episode is all about the origins of She Builds With Code, a coding project I wanted to build, and the custom made blog I built from scratch...well, mostly. Listen to find out!

Links to my sites & Projects mentioned
She Builds With Code (Current Website)
She Builds With Code (Original Website)
She Builds with Code (Original Github Repo)
She Builds With Code (New Site Mobile Design!)
Frizzcast (My fun project)


Other Mentions
Treehouse
Bootswatch
Bootstrap
Static Site Generators
Pelican
Markdown
Python
Jekyll
Hugo
Jinja2
TailwindCSS
Nodejs
npm

Transcript

Hello, everybody, and welcome to another episode of The She Builds With Code podcast, the podcast helping you to get out of tutorial hell. Thank you so much for joining me for another episode of The She Builds With Code podcast. I’m your host, Noelle Anderson. And in today’s podcast, we are going to talk about the first project that I built completely from scratch that I really learned from. And that, ironically, was the very first iteration of the She Builds With Code website. So brief pause to talk about the current state of She Builds With Code.com. Right now if you go there, you’re gonna find a MailChimp designed website. So it’s my temporary website to kind of get things up and get them going. And it’s gonna show you links to current episodes that are available. As well as ways to get in contact with me, you can send me an email, you can send me voicemail, if you have questions, just want to reach out want to share a story, as well as a way to sign up for email updates. So if you have this, subscribe to any of your favorite podcast listeners, you’ll be able to see new episodes when they drop, which again, is every first and third Tuesday. But if you want to keep up with making sure you don’t miss an episode, plus every other Tuesday, so non podcast Tuesdays, I plan to email out kind of a curated list of information and articles that I found that I think are pretty useful that I’d love to share with you. So again, if you have an ellipses, please go on over to She Builds With Code.com go ahead and sign up for the newsletter. And that way we can stay in touch. So let’s talk about She Builds With Code.com. I bought this domain I think going on three years ago, it was one of my many ups and downs in trying to learn how to code. And I was on an up I was on a very, very op, I was thinking the middle of treehouse lessons, things were finally starting to make a little sense. And in addition to you know, the experts telling you that the best way to learn to code is to build projects, they also highly recommend writing a blog. So I decided that I wanted to, you know, get my hand at writing what I was learning. And so I bought the domain I had great, you know, plans for it. And then I’m pretty sure I let it sit for about six months. The truth of the matter is, I am not a writer. And I found myself kind of struggling to figure out what to write, when I would take the time to sit down to try to write. And I wanted to have content before I focus too much on just the website. So it took me a while to get it up. It wasn’t until about two years ago, when I just decided you know what, how about I just build this thing entirely from scratch. And then that gives me something very specific to talk about, instead of trying to come up with the larger lessons that I learned that day. You know, either in treehouse, or whatever course I was taking at the time, I thought this was a good idea. I knew it would be hard, but I felt dedicated to it because it was something that I was going to own when I tell you that I built my site from scratch. I mean, I literally built my site from scratch, I decided I was going to, you know, download bootstrap for my styling. But I was going to open up my my text editor and just start writing from the beginning. And I did I basically the first version of this site was 100%. Static, I wrote all of the HTML by hand, I wrote the CSS, while using bootstrap, and then also a few custom styles. I threw that in. And I put the site up as just a standard HTML static site. Now you may be thinking to yourself, okay, but you just said that you had built a blog. So if you built a blog, how was it a static site? And I would say you are very astute, and thank you for listening so closely.

So yeah,

um, what I actually did is

I had

all of my separate pages, like I wrote this thing, like it was 1997. And the CMS just didn’t exist

I,

I created a template for what blog pages look like. And every time I would write a new blog post, I would simply do a Save as on that template. And then I would write my post directly in the text editor. And then when I was done, I would go back to my home page, I would manually link the new post that I created. to the homepage, and then I’d re upload everything to my host. A lot of frickin work right? saying it out loud, it sounds a little crazy. But here’s what was fun about that. It forced me to be engaged in the process a lot more, I think then, you know, just putting up a WordPress site, and just writing about my lessons for the day. And it goes back to everything that I feel about the way that I’ve learned how to code, it has to mean something, in order for it to really stick. And while these lessons I was taking were great, and they gave me clarity, I didn’t have them applied to anything I cared about. And I really cared about being able to put this site up. So yeah, I did it the absolute hard way, I did it completely on purpose. And I did it just to be able to say I built

this

from scratch. And I knew that if I focus just on making it as simple as possible, that I would stick with it, there is a link to the site in the show notes. So if you want to go and take a look at She Builds With Code version one, it’s not pretty. As, as I will continue to mention throughout this podcast design is not my passion or top skill or anything, I am learning enough to be dangerous, and I’m learning enough to be effective. But I am not a designer. So in my first iteration of the site, the design is based on a color scheme from boots watch, which is a website that offers these themes. For bootstrap websites, you basically just download their code, and then you replace it with whatever your standard bootstrap is. And that is where you get your colors. So you get to still use all of the regular bootstrap classes and apply those to your elements. But you get a whole new color palette without having to write any custom CSS. And without having to change anything in you know, you don’t have to override styles, they’ve already done that work for you. So you know, but I wouldn’t say the color scheme is awful by any means. But my application of it was,

well

go over, take a look. And then do me a favor and send me an email or send me a voicemail, and give me your thoughts just lay into it. I can’t wait to hear. But what was really fun about this loan manual process was how invested I got to be. And what I mean by that is, you know, I I by keeping it simple and writing HTML, I was able to focus on what I did remember, now, it wasn’t necessarily a lot and I did find myself googling sometimes some of the silliest things like contact forms, contact forms are such a pain side note. I really wish they weren’t. But there’s just something about trying to style a contact form that is just infuriating. So anytime I can find a plugin or a template or something, I can just copy and paste and slap. That is one lesson I don’t really care too much about learning is how to be a more efficient contact form styler. I hate them.

Anyway,

um,

what was great about that whole process, as I mentioned, is having extreme ownership over the whole thing, getting a better understanding of you know, like how to properly use Flex CSS, when I was trying to organize and style my homepage, really getting a visual understanding of how pages linked to each other, and making sure that I understood how relative links work, making sure that all of the inner links worked. And honestly, there was something a little magical, about, you know, being able to manually create a create, you know, one page of the site, and then have it linked to another page, you know, you click on one page, you go over to the next page. And you know, it’s something you get to learn in early HTML. But when you do it in something that you have built with your own hands, there’s just I don’t know, it’s magical. It really, really is. And so while it was, you know, an extremely long, difficult and just lengthy process, I did find myself looking forward to writing another post about the things that I’d screwed up previously in trying to build this entire project.

Now after a while, and I knew I would going into it, I figured what I would do is that was going to be my version one, I was going to build it completely. Manually all of my posts were going to be manual until I got tired of it. Because I figured once I got tired of it, I would be far more invested in learning a better way to do it. Than you know if I just tried to take a course and I was right, you know by about few posts and I’m like, okay, God, I have got to find another way to do this. This is awful. And I really wanted to kind of step my way in into a custom blog. That was ultimately the goal was for me to be able to create my own custom blog. But I wanted to kind of step my way through it to understand all of the pieces. So version two of She Builds With Code was built with a static site generator called Pelican Brief pause for those that may not be familiar with static site generators. They basically are the script version of what I was doing with version one. So you get to write your content, you’re still writing your content in the text editor. But instead of writing it directly in an HTML document, where you have to worry about your paragraph tags, and you know, your strong tags, your tags and all other kinds of things, you get to just write it in markdown, which is basically, you know, basic text with, you know, some small syntax to make your text bold, or to add a link or things like that. But it’s very, very, very user friendly, if you just want to quickly write some stuff up, you write your content and markup. And then you also have your templates for how you want your site to look satisfied in different way. And typically, there’s some kind of a templating language that a static site generator will use to basically interpret some of your placeholders and replace that with your content. And then basically, that once you’re done writing, you run the script, it takes that content, it plugs it into your template, and then it just generates a bunch of HTML pages. You upload that to your site, and then you have a blog. So it’s essentially everything that I was doing, but automated and so much faster, because it was a script, and not me manually doing

Unknown Speaker 11:40
it.

Noelle Anderson 11:40
I picked Pelican, because at the time, I was pretty big into the programming language, Python. And Pelican is a Python based static site generator, and it was the most popular of the Python based ssgs. Now, that said, it wasn’t a popular static site generator, by any stretch of the imagination, you more likely heard of things like Jekyll, or Hugo, those are a lot more popular. And I’m sure by now there are a bunch more I honestly haven’t dived back into the world of ssgs in a while. But I wanted to stick with the language that I knew, not really understanding that there wasn’t going to be

too much that I

was going to be doing in the actual language. And in fact, I spent a lot more time learning the templating language, which I believe, if I remember correctly, was Jinja. Two, if I’m saying that right. And what a templating language is, is it allows you to put placeholder text and code inside a template. So you remember how I mentioned in my first version of my site, my static site, I had saved an HTML template. But you know, in place of where my content would go, it was just a paragraph type this type here your post, that’s basically the script version of this. So there was a new language that I kind of had to learn to get familiar with. And in that event, it I honestly could have gone with any SSG, but it was it was quite a learning experience, to use Pelican. If you ever decide to embark on a newer technology, or a less popular technology, because it’s in a language you like, or someone’s recommended it or whatever, there are a few things that you want to make sure you look for the biggest thing is look over the documentation first. Documentation can be extremely overwhelming. And I’ve learned that the more that you just kind of force yourself to try to read it, the easier it can get. If it’s written Well, if you’ve got something that has a lot of gaps, or you know, uses a lot of technical language without really explaining what it is that they’re trying to describe, it can be extremely difficult, because you don’t have a huge community to fall back on. So you know, if you’re using something that’s a little bit more popular, and you start doing a Google search for what you’re looking for, what you’ll find is a lot of you know, articles over at Stack Overflow, or someone’s written a blog post about it, or somebody has written a tutorial, or you’ll find, you know, YouTube videos where people are walking you through how to use the technology. In the case of Pelican. It was not an extremely popular SSG. And so I found the resources a little lacking when I needed to try to figure something out. So it took a lot of searching and I mean a lot of searching because this was such an obscure technology compared to all of the other popular ones. There were a few gaps in the documentation that made it a little difficult. times, or the documentation was a little unclear. For example, I remember really trying to struggle with creating pages for my homepage, I wanted to imagine that I was going to get up to a lot of posts. And I didn’t want 20 blog posts to be on there, I wasn’t really trying to figure out endless scroll. And honestly, I wanted to be able to, you know, page through my posts. But it was extremely difficult to figure out. And I remember finding myself googling constantly and looking around. And I think I finally found a few random people that really liked Pelican. And so they wrote a lot of information on it and was really, really awesome.

I did want to get away from the SSG because the ultimate goal, again, was to build a custom blog, I wanted to be able to say that I built this from scratch. As it turned out, the more went on, the less interested I became in writing. As I mentioned, I am not a writer at heart, it’s not my preferred medium, I find that using my actual voice, I feel I communicate a little bit better, at least I hope

so

feel free to let me know if you don’t understand these communications.

But

I kind of fell off, and the blog kind of fell apart. And I let the domain lie dormant for a while where again, I was kind of back in my up and down of trying to figure out what I wanted to do. Let’s fast forward then to last year, the pandemic of 2020, as you know, gave a lot of the world paws, many of us forced into it, I personally had hours produced and spent a lot of time working from home for the majority of the year last year. And in that time, I decided to double back down and get a little more serious about actually being the programmer that I claim that I wanted to be. So I started building a few small projects. There’s one online called frizz cast that I was pretty proud of it’s a well go check it out to see especially for any of my curly-haired ladies listening to the podcast, please check it out, send me a note, give me your thoughts, your feedback, how I can improve it. So fun little thing that I decided to do. At that time, I remembered that I still had this domain that I just refuse to let go of. It just, felt too good. I just like the way it sounded. And there was no way I was gonna let it expire. And I decided I really needed to do something with it. And I’d been playing around with the idea of a podcast for a while. And finally, I decided to bite the bullet and do it. This podcast, of course, is as much of a learning experience as the projects that I’ll be talking about as we move further along in the series. But I realized that she builds with code just sounded like the perfect name for a podcast. And so maybe, you know, it was a long-range subconscious goal that when I got the domain, that this was going to be its final home. That said, I have not given up on my idea of building a custom blog. So back to the website back to She Builds With Code.com, I plan to kind of go through similar steps as I rebuild the new ci builds with code.com. As I mentioned at the beginning, right now, it’s just a MailChimp site, because I wanted to get this podcast up and going first and foremost. And then I wanted to be able to go ahead and build the site along with being able to record it as we went in these episodes. The first thing I’m going to do well, the first thing I have done, actually, is I have downloaded Adobe XD. And I’m using that to design the new version. And if you check in the show notes, there’s actually a link that you can see the comp of the design I have right now. Now the design I’m working on right now is just mobile, I have found that I do better. If I start with mobile. These constraints really kind of helped me focus on what I’m trying to do. And so I think that’s all I’m going to do in XD for now, as I get into coding the static site, if I find that I need to see something before I need to keep messing with the code, then I will probably go ahead and go back and maybe re sketch something out. But feel free. Please take a look at that. As I’d mentioned design is not my strong suit, but it’s not bad for a starting point. I don’t think any of it. So that’s step one. I have a comp design. And I’m going to start building a static site to begin with something to just kind of get things up. And since this podcast launches every first and third Tuesday for now, that gives me a little bit more time, if I wanted to continue with the manual posting, as I moved towards my ultimate goal, again, of building this from scratch. So for the new versions of She Builds With Code, the website, we will be using HTML, obviously, and I’ll be writing that from scratch. And then I’m also going to be using Tailwind CSS for all of my stylings. And now I have to do a brief gush about tailwind CSS. So here’s the secret, guys. I am not a fan of CSS, and it is literally only because I am not good at CSS. And I’m not good at CSS because I don’t practice CSS. And I don’t practice CSS because I am just not fascinated enough by design. There are people out there that can build like whole paintings and, you know, animations, and they can do these amazing things with CSS, like they’re artists, when it comes to the way they use CSS. And I am forever impressed. And

I commend them, but that will never ever be me. So whenever I can find a few shortcuts, I do look for them. That’s that I do recommend everybody at least you got to have the basics of understanding CSS in order to use any shortcut properly, right. So you know, don’t skip it. I don’t know if this is an endorsement to you know, bash CSS, it’s just simply not something I do particularly well. In any event, tailwind CSS is a utility first framework. So unlike bootstrap, where you might have some stylized components, like you know, you have a class called card, and that adds a whole series of stylings and makes it look a certain way. tailwind, just has a million just regular classes of everything, so that you can write your entire site just in your HTML, you don’t have to write any CSS. And if you do have a few small things that you want to override in the basic system, or add your own classes, it’s super easy to do, you just add it to the settings file, and then you run this script to build it. And then it just shoots out this CSS that just allows you to be able to write your entire site, right there in your HTML. And you got to get used to it. I will warn you. So if you go to tailwind site, you know, you’ll see some examples. And basically, like every element on your page is going to have a million classes. So it is not the prettiest. They do admit that but a once you start to understand what the syntax is, it’s really easy to figure out, you know, what you need to change if something doesn’t look quite right. Be it is just so freeing to not have to remember what I named something when I’m switching back and forth between my CSS document and my HTML. That’s honestly one of my least favorite things is trying to create class names and then remember what the heck they were when I go to anyway, tailwind CSS, absolutely fantastic. I highly recommend it. Check it out. If anybody from tailwind CSS is listening and wants to give me a call and get me on the sponsorship, I won’t say no.

Shameless plug.

Anyway. Um, so that’s how I’ll be starting the site, I’m going to start static. And I’m going to move my way through that. My thoughts are that, you know, this podcast will be kind of the content of the blog, I’m not necessarily trying to restart a blog per se, but I do want a website where I can host links to all of my episodes, as well as any other material that I want to share. You know, like I said, in my email newsletter, I fully intend to curate the articles and, you know, means or whatever that I find that I think is useful or might brighten your day. And so I might fill the site with that between podcast episodes. But since I’m posting every first and third Tuesday, right now, my hope is that it’ll be plenty of time to, you know, post a new episode onto the website, while I’m also working on moving it along at the same pace. So as far as the backend is concerned, you know, that’s, that’s the real meat of it, right? Like I’m talking about building my own back end. And for that, I am being a little ambitious, and I’m going to write my back end entirely in Node without the use of any outside components or libraries. I know I know, it’s ambitious, but I’m going to be using this educational site called purple, spelled p er p le. link for that will also be in the show notes. This site, guys is amazing. It is a series of video courses on a lot of intermediate coding topics intermediate to advanced, there are, you know, they do have a couple of beginners, there’s a you know, like, I think there’s a front end, one that focuses on HTML and CSS and kind of getting you up to speed if you’re just starting out. But there’s just a lot of material in there, edit is wonderful. And the guy that does the videos, he everything is very clear, it’s it’s, it’s very clear that he enjoys teaching, and has a really great handle on the material. So it’s been really fun. And he has a class that he teaches about building with node and talking about the power of Node JS. In this course, he talks a lot about how most JavaScript node developers don’t really use the full power of node to build their projects. That instead node is just basically what you install to make sure that you can run all of the NPM packages that you’re installing. So obviously, this is an ambitious project, I’m trying to build absolutely every element by hand, as much as possible, I think there will definitely be some things that I’m not going to try to build from scratch. You know, for example, email is extremely complicated when it comes to, you know, having it on a website and being able to receive emails. So likely, I’ll continue to use the solution that I excuse me use now, which is a static email provider called bases that basically kind of handles all of the emails, and all I have to do is just plug it into my contact form. So you know, I’m not trying to completely reinvent the wheel when it just becomes ridiculous. But I am definitely going to do more than I think I would do for a standard project, just for the educational experience of it. So since this project is pretty ambitious, this isn’t something that I’m probably going to have a full report on by the next podcast. So this will kind of be an ongoing thing. I honestly don’t know how long it’ll take me. For this project, I’m not going to try to put a time limit on it. I’m going to just keep moving along steadily. I will post updates in my email newsletter. So again, please make sure that you subscribe, so you can keep up to date on that. And the last thing is I do plan to video all of the coding that I’m going to be doing. I don’t know how I’m going to be releasing it yet. But I do know that my email newsletter folks are going to be the first ones to know so again, please make sure you head on over to She Builds With Code.com sign up for the newsletter so that you don’t miss out on that.

Thank you for listening to today’s episode of She Builds With Code. If you enjoy today’s episode, I’d really love to hear from you. Please go to SheBuildsWithCode.com to subscribe to our updates, leave me a review or send me a message. I’ll see you next time.

Transcribed by https://otter.ai