쉐도잉 연습: I Rebuilt My Entire Website in Astro… Was It Worth It? - 영상으로 영어 말하기 배우기

This was one of the biggest conversions I've ever done in my life.

This website, christidus.com, has been active for over 20 years.

It's gone all the way from like IAS.

It was hosted on at one time in a closet, you know, with a server running and exposing my external IP back in the 2000s,

all the way to using WordPress in the 2010s and I think like a VPS.

And then obviously for the past five, six years, It's been Hugo using Cloudflare pages as a static site.

I think actually I started it off with Netlify and then I moved to Cloudflare.

But regardless, it's been fantastic.

But Hugo's kind of bursting at the seam.

I still absolutely adore Hugo.

It's a fantastic minimal site generator, so I highly recommend it.

But I did move to Astro, mainly because there was some settings that I needed to change.

There was an extra functionality

and I was doing a lot with the site to where I was really bastardizing

or Frankensteining Hugo to something that it didn't need to be.

But before we get into that, here's a word from our sponsor, Blacksmith, a replacement for GitHub runners.

This made my runs more than 2x faster and cheaper.

My standard GitHub run was about five minutes, switching over three minutes here, and then I enabled cache, bringing it down to two minutes in a run.

So this more than 2x my speed.

And as you're reading more on these GitHub reviews and CI is running more, BlackSith not only saves you time, but money as well.

Check it out at link.christinus.com forward slash Blacksmith.

Now, other than a better look that we got with this, I would say I really enjoyed a couple things about Hugo,

and I wanted to bring that over to Astro.

So the old way was Markdown into a Direct Hugo new post,

and then it would grab the archetype and then create the page outline for me, and then I could type it all in.

Pretty much works the same way now, but I had to build that out in Astro.

So now the new one kind of follows the same publishing path.

So I really like that static site philosophy and the generator of it.

So I went ahead and kind of kept that as I redid the code.

Overall, the whole contract itself was done in one PR.

Over 2,000 something generated files, 813 pages, and then a ton of aliases I need to retain.

So I went ahead and did all that.

And believe it or not, it worked on the cutover.

So no issues that I have found so far.

Not to say, knock on wood there.

Not to say something hadn't come up.

There's certain things I would like to change with this like when I look at the search, still going to do a better search.

But for now, it's functional and it's fine for a placeholder.

And the integration with downloads, I really wanted to improve.

A lot of people would send me emails going, hey, Titus, I need to access my purchases.

And I'd be like, all right, go to the site, click the little man, use the thing.

But now you can just go ChrisTitus.com downloads, click access purchases, put your email in, boom, shows your orders, you can click on your order and download done.

So that really helped me out.

I wanted to include forms and do a little bit tighter integration with forms and discord.

So I've kind of started to put this on the website as well,

which has really helped as it kind of drives a little bit more traffic for people needing support.

And then for live streams, I know I haven't live streamed since June, but I'll probably get back to live streaming like maybe at least once a month, I would say.

I just didn't want people to put, I mean, PR bomb me.

I got to the point where a lot of people were watching the live streams and then making bad PRs.

And it was kind of making my projects worse.

And I was spending a lot of time reading others code that simply wasn't good.

And it was not great.

So I was kind of in a bad spot.

And I was like, I need to take a step back.

And that was a great, wise decision on my part.

But I still miss talking to the community.

So I'm going to strike a good balance with live streams.

I always have this back and forth if you follow me for any number of years.

But I always liked having this.

And I put this in Hugo this past year, and it was a way to rewatch my live streams, have a chat replay and kind of just see,

hey, Titus did this or that on the stream if you missed it.

And you could just access it from ChrisTitus.com, which is great.

And then the rest is pretty much the same.

But having these advanced features is why I moved away from Hugo.

I really, really love Hugo.

But when you're starting to use it more like a creator hub, Hugo just doesn't fit the bill.

So what did I do?

I created a giant PR and there's about 50,000 lines of code here with 7,400 deletions.

And then what I did was what's called a review loop.

And that's when you plan it out, you go ahead and do the cutover, but then you sit there and have multiple AI agents go back and forth,

back and forth, back and forth, critiquing the code as best as they can and getting it to a really good functional state.

Now it's not perfect.

This is not meant to be perfect.

However, it did use probably a hundred percent of my hundred dollar plan for a whole week.

So it's not, it's definitely not a cost effective solution for many people, especially if you're using API rates.

But as you can see, yeah, it's like 80 or 90 comments deep.

And I got it to a spot where I was like, okay, that looks pretty good.

Let's go ahead and merge that over and we'll do the cutover and then I'm going to clean up stuff.

And that's essentially what I've done.

Uh, when I got back here, there are certain things AI does that I just hate.

Um, one, they like to put rounded corners on everything.

If it's like GPT, it, it's just terrible design.

And this isn't great design, mind you, I'm not a front end designer at all, but I just like, just give me some square.

And I cleaned up, uh, some of the spacing, like it had this massive space everywhere

and I was like nah

but the cool thing about Astro is I went from having

a whole bunch of CSS partials everywhere to one master CSS

so it was much easier for me to hand edit

and go in and actually change and fix a lot of the flow

so it looks good now I could actually probably pay a developer

or have a developer look at it

and go oh well yeah I'd probably change this make this

look a little bit prettier maybe do some slight background for texture you know whatever you want.

It's just a lot easier to work with and add features to.

Then there's actual lighthouse

results which is great so this is pretty much all been hundreds for about a past year or so

hugo was working great for me obviously on this side i

think for best practices we're missing i think we have a couple console errors for cloudflare analytics

so i could fix that up but I don't care.

100

I'm missing probably a few hundred thousand visits because of Cloudflare analytics issues.

101

But I'll probably fix that up at some time.

102

I don't really care about tracking users though.

103

So maybe in the future when I want a perfect hundred.

104

But overall, Lighthouse is great.

105

And I added CI directly into my repo.

106

So if you look at my workflow runs, we could actually monitor and say, okay, here's a monitor for my live streams.

107

I also wanted to add QX, code QL, which wasn't enabled on Hugo because it was a static site generator,

108

meaning it's much more minimal.

109

And now that we're using Astro, you have NPN and all the fixings that I have to worry about packages and security vulnerabilities.

110

So adding some type of workflow to check for those is also important because Hugo is, or Astro is a little bit heavier,

111

and I wanted to make sure that that gets addressed.

112

And then also just looking at other things in my CEI

113

and checking that Lighthouse score as I add and change things with the website is important.

114

So this is a good way of kind of expanding out my workflow, something you don't see on the front end, but you need to think about on the back end, especially if you do any kind of conversion,

115

like I'm talking about here.

116

Or if you just use Astro in general, I highly recommend obviously having security and quality checks.

117

And frankly, you should do it on every website, even a Hugo one.

118

But Hugo, obviously you just have static pages most of the time.

119

Sometimes I think you could probably say some of my bootstrap

120

or some of my JS that I added to it to do certain things could probably be exploited.

121

But even still, there's no like database.

122

It's not like WordPress where it just gets hacked every week.

123

This is still way better than anything that most modern businesses use, I guess.

124

I don't know.

125

You let me know if you're a developer and you actually still use WordPress.

126

I'll say a prayer for you, thoughts and prayers for you because God, that would be, that'd be awful.

127

I can't believe anybody would use WordPress in the year 2026, but I digress.

128

I don't want to go on a rant, but I just wanted to kind of say this, that it didn't magically make the site fast by doing this kind of deployment, going from Hugo to Astro.

129

I think is challenging and it does require a lot of changes.

130

And it's not something I'd ever recommend for anybody, really.

131

But I mainly did it just as a good challenge.

132

And a lot of people don't realize my website, ChrisDotis.com, gets about 1.5 million visits per month.

133

And that does equate to some good AdSense.

134

And by doing this, I would say the revenue did drop a little bit.

135

Obviously, it was right in here where I did the conversion, and you can actually see it.

136

I think it was in the page views.

137

It doesn't recognize it as well.

138

Because how Astro works, instead of it loading that ad directly on first render,

139

what Astro likes to do is it waits for the request to come in and then it like rehydrates that code.

140

So not all your script is loaded all in the front end.

141

It is as needed.

142

And I think that's better user experience, but you're going to probably end up paying a little bit

143

or you're probably going to get a little less in ad revenue.

144

and you might be thinking, Titus, you just said 1.6 million viewers or page views per month, but this is showing 352,000.

145

What's the deal?

146

Adblock.

147

And I'm not going to tell you not to use Adblock.

148

I mean, heck, if you want to visit my site without Adblock, that's on you.

149

And I appreciate the extra couple pennies I get from that.

150

But yeah, Adblock, a lot of my viewers use ad block.

151

And hey, man, I use it too.

152

I don't even want to watch those ads on my site.

153

So I have brave up here using the ad block.

154

But I just wanted to say AdSense, you will take a little bit of a penalty when you are doing it through Astro,

155

because a lot of times it will wait for that request to come through and then display an ad.

156

And sometimes someone might click away before that ad is shown.

157

So a little bit probably from what I'm seeing from the past week that this has been live,

158

probably about a 20, 30% cut out of,

159

I think I was making about a little over a thousand dollars in just AdSense through the website.

160

So I might end up taking a two or $300 haircut on that, but the website looks so much better.

161

It's worth it.

162

It's worth it.

163

I just, ah, the aesthetic of it, the functionality, it's worth, it's worth a little bit of money.

164

And if you kind of want to see the entire code, the PR, everything, it's public.

165

So this is on GitHub, Chris Titus Tech forward slash website is the repo.

166

And I've you can see all the different iterations.

167

I've had over 1000 different commits.

168

And I've loved this.

169

And I still I think I'm going to make some extra scripts for like to make it exactly like Hugo.

170

Like I always liked doing Hugo new post.

171

And then having that architect, I created it, but it's kind of a long command right now.

172

So I might add like a couple bash scripts in the root of the drive, be looking for that in the future to where I'll just be like new post space

173

and then the name of the post and I'll pull in that variable and just create it all for me.

174

So it'll be even easier than Hugo at the end of the day.

175

But I just wanted to take the best of both worlds, kind of give some new ideas to folks for websites.

176

And I just really love it.

177

And big shout out to like Astro.

178

I know that's kind of a newer framework for folks, but is absolutely chef's kiss, so much capability, and I love it to death.

179

And I also love Hugo.

180

I don't want you to ditch Hugo.

181

I want you to know this is a hell of a lot of work, and if you don't need the things I've talked about, and you're just doing a blog with a picture and some text,

182

Hugo's what you want.

183

It's so simple, minimal, love it.

184

But, and we all evolve over time.

185

And I'm always trying something new.

186

Hell, next year might be something.

187

I'm not migrating this next year, though.

188

Absolutely not.

189

All right, y'all.

190

Have a good one.

191

I'll see you in the next one.

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법

쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.

쉐도잉 연습: I Rebuilt My Entire Website in Astro… Was It Worth It? - 영상으로 영어 말하기 배우기

이 레슨에 대해

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법