WEBVTT

1
00:00:00.160 --> 00:00:03.640
<v Speaker 1>For those of you who've maybe looked into building a website,

2
00:00:03.680 --> 00:00:06.599
<v Speaker 1>you know, navigated the complexities, or even just grappled with

3
00:00:06.639 --> 00:00:09.279
<v Speaker 1>the hosting costs, which can be surprising. What if we

4
00:00:09.359 --> 00:00:12.080
<v Speaker 1>told you there's a powerful, really elegant way to build

5
00:00:12.119 --> 00:00:15.919
<v Speaker 1>and host truly beautiful websites completely for free.

6
00:00:16.239 --> 00:00:18.960
<v Speaker 2>Yeah it sounds almost too good to be true, right, Yeah,

7
00:00:19.000 --> 00:00:21.800
<v Speaker 2>But today we're taking a deep dive into exactly that,

8
00:00:22.000 --> 00:00:26.160
<v Speaker 2>this remarkably accessible world of free web development. Our mission

9
00:00:26.199 --> 00:00:28.679
<v Speaker 2>really is to unpack how you can get a professional

10
00:00:28.719 --> 00:00:33.679
<v Speaker 2>online presence up and running using two surprisingly powerful tools,

11
00:00:34.000 --> 00:00:36.039
<v Speaker 2>public cms and GitHub pages.

12
00:00:36.159 --> 00:00:38.479
<v Speaker 1>Right, and we've been immersing ourselves in Brad Moore's book

13
00:00:38.880 --> 00:00:42.280
<v Speaker 1>Designing Websites with pub Land GitHub Pages create, maintain, and

14
00:00:42.320 --> 00:00:46.359
<v Speaker 1>host beautiful websites for free. It's a really comprehensive guide,

15
00:00:46.359 --> 00:00:48.759
<v Speaker 1>a bit of a treasure trove, actually, and our goal

16
00:00:48.840 --> 00:00:51.479
<v Speaker 1>for this deep dive is to distill the most impactful bits,

17
00:00:51.520 --> 00:00:54.119
<v Speaker 1>the key insights, to give you the clarity and maybe

18
00:00:54.200 --> 00:00:57.159
<v Speaker 1>the confidence to launch your own thing exactly.

19
00:00:57.280 --> 00:01:00.079
<v Speaker 2>Get ready for maybe some aha moments, because by the

20
00:01:00.119 --> 00:01:02.560
<v Speaker 2>end of this you should not only understand the core concepts,

21
00:01:02.560 --> 00:01:06.079
<v Speaker 2>but also grasp the practical steps, you know, the how

22
00:01:06.159 --> 00:01:09.519
<v Speaker 2>to to get your site live and all without breaking

23
00:01:09.560 --> 00:01:12.799
<v Speaker 2>the bank or getting lost in technical jargon.

24
00:01:12.840 --> 00:01:15.640
<v Speaker 1>Okay, so when we talk about building websites, I think

25
00:01:15.760 --> 00:01:19.280
<v Speaker 1>many of us our minds immediately jump to those complex, dynamic,

26
00:01:19.439 --> 00:01:24.040
<v Speaker 1>database driven sites, right, the ones constantly fetching content. So

27
00:01:24.159 --> 00:01:28.920
<v Speaker 1>what exactly is a static website and why should that simplicity?

28
00:01:29.000 --> 00:01:30.560
<v Speaker 1>Why should it genuinely interest you?

29
00:01:30.680 --> 00:01:33.040
<v Speaker 2>Well, the real revelation about stack sites, I think, isn't

30
00:01:33.079 --> 00:01:35.640
<v Speaker 2>just their speed or security. Those are huge, it's how

31
00:01:35.680 --> 00:01:40.439
<v Speaker 2>they fundamentally simplify the whole web infrastructure for you. I mean,

32
00:01:40.480 --> 00:01:43.840
<v Speaker 2>imagine building a solid online presence without constantly worrying about

33
00:01:44.040 --> 00:01:47.159
<v Speaker 2>server updates or database breaches or tricky backend debugging.

34
00:01:47.359 --> 00:01:49.319
<v Speaker 1>Yeah, that alone sounds appealing, right.

35
00:01:49.719 --> 00:01:51.519
<v Speaker 2>A static site is kind of like a maybe a

36
00:01:51.519 --> 00:01:54.239
<v Speaker 2>published book or a sculpture. Once it's made, it's fixed,

37
00:01:54.400 --> 00:01:56.959
<v Speaker 2>it stays the same until you decide to create and

38
00:01:57.000 --> 00:02:00.000
<v Speaker 2>publish a new version. Dynamic sites, on the other hand,

39
00:02:00.040 --> 00:02:03.120
<v Speaker 2>and they're more like a live TV show, maybe with

40
00:02:03.239 --> 00:02:06.719
<v Speaker 2>a server constantly assembling new scenes behind the curtains based

41
00:02:06.760 --> 00:02:07.560
<v Speaker 2>on every interaction.

42
00:02:07.959 --> 00:02:11.319
<v Speaker 1>Okay, so it's not constantly rebuilding itself with every single

43
00:02:11.439 --> 00:02:15.039
<v Speaker 1>user click. That sounds inherently more robust, definitely more efficient

44
00:02:15.080 --> 00:02:18.439
<v Speaker 1>to manage. But are their trade offs? What about interactivity?

45
00:02:18.479 --> 00:02:19.560
<v Speaker 1>Can they still feel modern?

46
00:02:19.840 --> 00:02:22.400
<v Speaker 2>You've hit on a key benefit there. Static sites load

47
00:02:22.479 --> 00:02:26.879
<v Speaker 2>incredibly fast, lightning fast sometimes, and they are significantly more secure,

48
00:02:27.000 --> 00:02:30.479
<v Speaker 2>precisely because there's no back end database for hackers to

49
00:02:30.520 --> 00:02:34.000
<v Speaker 2>target or exploit. And as for interactivity, that's where JavaScript

50
00:02:34.000 --> 00:02:37.199
<v Speaker 2>comes in. Modern static sites, you know, boosted with JavaScript,

51
00:02:37.199 --> 00:02:41.039
<v Speaker 2>can still deliver really dynamic like experiences, animations, interactive forms,

52
00:02:41.080 --> 00:02:44.199
<v Speaker 2>all that stuff. The core content is static, sure, but

53
00:02:44.280 --> 00:02:46.439
<v Speaker 2>the user experience can be anything but static.

54
00:02:46.800 --> 00:02:49.520
<v Speaker 1>That distinction is really important. I think so for you

55
00:02:49.599 --> 00:02:53.080
<v Speaker 1>the listener, this approach means your site is essentially always on,

56
00:02:53.360 --> 00:02:56.560
<v Speaker 1>accessible twenty four to seven. It offers high visibility, and

57
00:02:56.599 --> 00:02:59.840
<v Speaker 1>you have complete control over your content. It's pretty ideal

58
00:02:59.879 --> 00:03:03.319
<v Speaker 1>for small businesses, organizations, maybe individuals just looking to share

59
00:03:03.360 --> 00:03:05.360
<v Speaker 1>ideas or offerings.

60
00:03:04.680 --> 00:03:09.360
<v Speaker 2>Exactly, or fostering community through blogs, newsletters, contact forms. It

61
00:03:09.400 --> 00:03:13.599
<v Speaker 2>really does democratize powerful web development, makes it accessible.

62
00:03:13.759 --> 00:03:19.159
<v Speaker 1>Okay, so now we understand the elegant simplicity maybe of

63
00:03:19.240 --> 00:03:22.759
<v Speaker 1>static sites. The obvious next question is how do you

64
00:03:22.800 --> 00:03:25.039
<v Speaker 1>actually build one? And that's where, as you said, the

65
00:03:25.080 --> 00:03:27.439
<v Speaker 1>magic of public CMS and get up pages comes in

66
00:03:27.759 --> 00:03:29.560
<v Speaker 1>allowing us to get online for free.

67
00:03:29.680 --> 00:03:32.120
<v Speaker 2>Right, So our first star here is public cms. Think

68
00:03:32.159 --> 00:03:35.400
<v Speaker 2>of it like your personal website factory, but it runs

69
00:03:35.479 --> 00:03:38.199
<v Speaker 2>right on your desktop. It's a fantastic choice for pretty

70
00:03:38.240 --> 00:03:42.080
<v Speaker 2>much anyone, individuals, small businesses who wants to secure, fast

71
00:03:42.159 --> 00:03:46.159
<v Speaker 2>and really easy to maintain website without needing deep coding skills.

72
00:03:46.199 --> 00:03:47.439
<v Speaker 1>Ye, how does it actually work? Then?

73
00:03:47.680 --> 00:03:51.319
<v Speaker 2>Well? Publici works by compiling all your content, your text, images,

74
00:03:51.479 --> 00:03:55.280
<v Speaker 2>themes into fixed s HTML files right there on your computer.

75
00:03:55.759 --> 00:03:59.360
<v Speaker 2>And it's available pretty widely. Runs on Windows, macOS, both

76
00:03:59.400 --> 00:04:02.400
<v Speaker 2>Intel and the newer Apple chips, and several Linux versions too,

77
00:04:02.439 --> 00:04:05.520
<v Speaker 2>so it's very accessible. Plus, and this is a big

78
00:04:05.560 --> 00:04:08.039
<v Speaker 2>deal for many, it has built in tools for GDPR

79
00:04:08.120 --> 00:04:11.159
<v Speaker 2>and CCPA compliance that gives you significant peace of mind

80
00:04:11.159 --> 00:04:12.280
<v Speaker 2>on the data privacy front.

81
00:04:12.319 --> 00:04:15.520
<v Speaker 1>Okay, so publy I builds the site files on my computer.

82
00:04:16.279 --> 00:04:18.879
<v Speaker 1>Then what where do they actually live online so people

83
00:04:18.879 --> 00:04:19.399
<v Speaker 1>can see them?

84
00:04:19.480 --> 00:04:23.120
<v Speaker 2>Ah? That's role number two for gethub pages. It's essentially

85
00:04:23.199 --> 00:04:26.360
<v Speaker 2>a free cloud based hosting service specifically designed for these

86
00:04:26.399 --> 00:04:29.480
<v Speaker 2>static website files. What's really brilliant about it is you

87
00:04:29.480 --> 00:04:32.120
<v Speaker 2>don't need to get bogged down in complex web hosting stuff,

88
00:04:32.120 --> 00:04:34.920
<v Speaker 2>you know, configurations or even domain name setups right at

89
00:04:34.920 --> 00:04:38.199
<v Speaker 2>the start. GitHub handles all that for you initially, so

90
00:04:38.240 --> 00:04:42.000
<v Speaker 2>it simplifies that whole back end process massively. So the

91
00:04:42.079 --> 00:04:45.839
<v Speaker 2>workflow simplified looks like this. Number One, you create and

92
00:04:45.920 --> 00:04:49.040
<v Speaker 2>manage your site locally on your computer using public CMS.

93
00:04:49.439 --> 00:04:52.800
<v Speaker 2>Number two, Public compiles it and then pushes transfers those

94
00:04:52.800 --> 00:04:55.639
<v Speaker 2>site files up to GitHub Pages, which acts as your

95
00:04:55.639 --> 00:04:58.839
<v Speaker 2>remote server. And number three, finally, your website content gets

96
00:04:58.839 --> 00:05:01.360
<v Speaker 2>delivered from GitHub page straight to the end user in

97
00:05:01.399 --> 00:05:04.879
<v Speaker 2>their web browser. Honestly, seeing what you've created come alive

98
00:05:04.959 --> 00:05:07.560
<v Speaker 2>online for the first time. It's genuinely thrilling.

99
00:05:07.680 --> 00:05:10.279
<v Speaker 1>That does sound incredibly empowering taking control like that. So

100
00:05:10.720 --> 00:05:14.639
<v Speaker 1>what sort of practical tools and maybe smart habits will

101
00:05:14.639 --> 00:05:16.240
<v Speaker 1>you need to set yourself up for success here?

102
00:05:16.279 --> 00:05:19.040
<v Speaker 2>Okay, beyond your computer itself, you'll probably want a free

103
00:05:19.120 --> 00:05:22.079
<v Speaker 2>image viewer, something like earfun View for Windows or Nomacs

104
00:05:22.120 --> 00:05:24.639
<v Speaker 2>form Echos is great for basic image browsing, maybe some

105
00:05:24.680 --> 00:05:28.040
<v Speaker 2>simple resizing, and obviously a good web browser like crime

106
00:05:28.120 --> 00:05:31.959
<v Speaker 2>is essential. But the most and I mean most indispensable habit,

107
00:05:32.000 --> 00:05:35.519
<v Speaker 2>and I speak from a painful experience here is write

108
00:05:35.639 --> 00:05:36.439
<v Speaker 2>everything down.

109
00:05:36.560 --> 00:05:39.040
<v Speaker 1>Oh yes, the forgotten password nightmare.

110
00:05:39.319 --> 00:05:42.160
<v Speaker 2>Exactly. We've all been there right staring at a log

111
00:05:42.160 --> 00:05:45.160
<v Speaker 2>in screen, just racking our brains for that password. But

112
00:05:45.279 --> 00:05:49.800
<v Speaker 2>for your website's ecosystem, PUBLICI, GitHub, maybe your domain resure later.

113
00:05:49.839 --> 00:05:52.639
<v Speaker 2>A forgotten credential isn't just annoying, it can literally halt

114
00:05:52.720 --> 00:05:56.439
<v Speaker 2>your entire operation. So the simple habit, this little notebook,

115
00:05:56.519 --> 00:06:00.000
<v Speaker 2>it becomes your digital safety net. It prevents hours of lockout, frustrum.

116
00:06:00.639 --> 00:06:01.680
<v Speaker 2>Trust me on this one.

117
00:06:01.879 --> 00:06:05.000
<v Speaker 1>A very small investment for potentially huge savings in time

118
00:06:05.079 --> 00:06:08.480
<v Speaker 1>and stress. Okay, that notebook is key. What about creating

119
00:06:08.560 --> 00:06:11.639
<v Speaker 1>and managing those critical passwords themselves? Any best practices?

120
00:06:11.759 --> 00:06:16.600
<v Speaker 2>Oh, definitely excellent question. When you're creating passwords, first rule,

121
00:06:17.680 --> 00:06:20.560
<v Speaker 2>ditch the personal info, no names, pet names, birthday is

122
00:06:20.600 --> 00:06:23.959
<v Speaker 2>none of that. Instead, try embracing the power of multiple short,

123
00:06:24.079 --> 00:06:27.279
<v Speaker 2>unrelated words. Like four or five short words strung together.

124
00:06:27.639 --> 00:06:30.199
<v Speaker 2>It can be way stronger and surprisingly easier to remember

125
00:06:30.240 --> 00:06:32.879
<v Speaker 2>than just a random jumble of characters like x U

126
00:06:32.920 --> 00:06:34.560
<v Speaker 2>seven seven tags on fee right.

127
00:06:34.439 --> 00:06:36.480
<v Speaker 1>The correct hor's battery stable.

128
00:06:36.120 --> 00:06:39.360
<v Speaker 2>Idea exactly that concept. Yeah, though don't use that specific one.

129
00:06:39.360 --> 00:06:42.680
<v Speaker 2>Obviously capitalize maybe one or two of the words include

130
00:06:42.680 --> 00:06:46.480
<v Speaker 2>a number, but maybe not a significant date. Avoid spaces usually.

131
00:06:47.000 --> 00:06:49.680
<v Speaker 2>Special characters can add strength, sure, but they aren't always

132
00:06:49.680 --> 00:06:52.920
<v Speaker 2>necessary unless a site forces you. But the single most

133
00:06:52.959 --> 00:06:58.519
<v Speaker 2>crucial rule, do not reuse passwords ever across different systems.

134
00:06:58.560 --> 00:06:59.360
<v Speaker 1>That's the big one.

135
00:06:59.439 --> 00:07:03.279
<v Speaker 2>It is for ultimate security and just convenience. Really consider it.

136
00:07:03.399 --> 00:07:06.839
<v Speaker 2>Using a dedicated password safe something like keypass is a

137
00:07:06.839 --> 00:07:07.560
<v Speaker 2>good free option.

138
00:07:08.160 --> 00:07:08.519
<v Speaker 1>Okay.

139
00:07:08.639 --> 00:07:11.319
<v Speaker 2>So for the initial setup to actually get started building

140
00:07:11.319 --> 00:07:14.360
<v Speaker 2>your site, you'll need a dedicated email address. A new

141
00:07:14.360 --> 00:07:16.800
<v Speaker 2>outlook dot com address is often recommended. It adds a

142
00:07:16.879 --> 00:07:18.959
<v Speaker 2>layer of security and looks a bit more professional for

143
00:07:19.000 --> 00:07:21.959
<v Speaker 2>your website operations. And of course you need a GitHub account,

144
00:07:21.959 --> 00:07:25.360
<v Speaker 2>and within GitHub you'll create what's called a repository. Think

145
00:07:25.399 --> 00:07:27.720
<v Speaker 2>of it just as a dedicated project folder online for

146
00:07:27.839 --> 00:07:29.199
<v Speaker 2>all your website's files.

147
00:07:29.319 --> 00:07:34.759
<v Speaker 1>Okay, foundational setup is clear, email, GitHub account, password safety, net.

148
00:07:35.000 --> 00:07:37.199
<v Speaker 1>Let's move on to the fun part, making the site

149
00:07:37.240 --> 00:07:40.439
<v Speaker 1>actually look stunning and adding compelling content. How does public

150
00:07:40.439 --> 00:07:40.879
<v Speaker 1>handle that?

151
00:07:41.120 --> 00:07:44.399
<v Speaker 2>Right? Publicy really does shine here, especially with visual customization.

152
00:07:45.040 --> 00:07:48.160
<v Speaker 2>It uses themes to control the whole look and feel

153
00:07:48.240 --> 00:07:51.600
<v Speaker 2>of your site. Public itself offers I think it's twenty

154
00:07:51.680 --> 00:07:55.680
<v Speaker 2>nine official themes now. Thirteen are free, sixteen are premium,

155
00:07:55.959 --> 00:07:57.920
<v Speaker 2>and the great thing is they're all kept up to

156
00:07:58.000 --> 00:08:00.759
<v Speaker 2>date by the developers, so they stay compassed with new

157
00:08:00.759 --> 00:08:01.680
<v Speaker 2>Pubblelie releases.

158
00:08:01.839 --> 00:08:04.000
<v Speaker 1>That's good to know. How do you get and use

159
00:08:04.040 --> 00:08:04.399
<v Speaker 1>a theme?

160
00:08:04.639 --> 00:08:07.720
<v Speaker 2>It's a pretty simple three step process actually. First you

161
00:08:07.800 --> 00:08:09.680
<v Speaker 2>find and get a theme you like from the public

162
00:08:09.759 --> 00:08:13.839
<v Speaker 2>Marketplace online, Second, you install it globally within the public

163
00:08:13.839 --> 00:08:17.600
<v Speaker 2>CMS application on your computer, and then third you activate

164
00:08:17.600 --> 00:08:20.519
<v Speaker 2>it locally specifically for the website project you're working on.

165
00:08:20.839 --> 00:08:23.439
<v Speaker 2>And here's a crucial tip one I really can't stress enough.

166
00:08:24.199 --> 00:08:26.800
<v Speaker 2>Always back up your site before you activate a new theme.

167
00:08:27.279 --> 00:08:30.560
<v Speaker 2>Why's that because some theme changes, especially if they alter

168
00:08:30.680 --> 00:08:33.279
<v Speaker 2>content structures, can be irreversible. You really don't want to

169
00:08:33.279 --> 00:08:35.240
<v Speaker 2>lose hours of work just trying out a new look.

170
00:08:35.440 --> 00:08:37.440
<v Speaker 2>A quick backup saves potential tears.

171
00:08:37.600 --> 00:08:40.879
<v Speaker 1>Okay, noted? Why is warning? So once you have a

172
00:08:40.919 --> 00:08:43.159
<v Speaker 1>theme in place, how do you start making it your own?

173
00:08:43.440 --> 00:08:45.000
<v Speaker 1>You know, stamp your personal brand on it.

174
00:08:45.519 --> 00:08:47.679
<v Speaker 2>Yeah, you can easily apply a custom image as your

175
00:08:47.679 --> 00:08:50.960
<v Speaker 2>website logo. That's usually step one. Then there's the hero section.

176
00:08:51.320 --> 00:08:53.559
<v Speaker 2>You know that big graphic and text block off you

177
00:08:53.720 --> 00:08:54.120
<v Speaker 2>right at the.

178
00:08:54.039 --> 00:08:56.639
<v Speaker 1>Top mm hmm, the main banner area exactly.

179
00:08:57.080 --> 00:08:59.799
<v Speaker 2>That's perfect for making an immediate visual impact, and you

180
00:08:59.840 --> 00:09:03.039
<v Speaker 2>can customize that heavily. You also get full control over

181
00:09:03.039 --> 00:09:06.080
<v Speaker 2>adjusting the primary colors and the fonts used across the site.

182
00:09:06.200 --> 00:09:09.440
<v Speaker 2>For example, Railway is a popular clean choice for body text,

183
00:09:09.720 --> 00:09:13.200
<v Speaker 2>while maybe merriwether Sands works nicely for headings. Pubbly is

184
00:09:13.240 --> 00:09:16.559
<v Speaker 2>also pretty smart. It caches Google fonts locally, which helps

185
00:09:16.600 --> 00:09:19.919
<v Speaker 2>your site load faster. And don't forget the little things

186
00:09:20.000 --> 00:09:22.960
<v Speaker 2>like the faby con that tiny icon that shows up

187
00:09:22.960 --> 00:09:25.200
<v Speaker 2>in the browser tab next to your site name. It's

188
00:09:25.200 --> 00:09:28.279
<v Speaker 2>a small detail, but it adds that professional polish right.

189
00:09:28.679 --> 00:09:31.759
<v Speaker 1>What about personalizing the author's presence, say if it's a

190
00:09:31.799 --> 00:09:34.559
<v Speaker 1>blog or a portfolio site, and how do you structure

191
00:09:34.600 --> 00:09:35.200
<v Speaker 1>the navigation?

192
00:09:35.320 --> 00:09:38.360
<v Speaker 2>The men use Absolutely in Public's author settings, you can

193
00:09:38.399 --> 00:09:41.120
<v Speaker 2>really flesh things out. Add your bio in the description

194
00:09:41.200 --> 00:09:44.480
<v Speaker 2>field like the example Bobby's bio in the source, upload

195
00:09:44.519 --> 00:09:47.799
<v Speaker 2>an avatar image, even add a featured image specifically for

196
00:09:47.879 --> 00:09:51.320
<v Speaker 2>your author page, and always always remember to add a

197
00:09:51.360 --> 00:09:55.480
<v Speaker 2>keyword rich SEO meta description for that author page. It

198
00:09:55.559 --> 00:09:58.080
<v Speaker 2>helps search engines understand who you are and what your

199
00:09:58.080 --> 00:09:58.919
<v Speaker 2>profile is about.

200
00:09:59.039 --> 00:10:02.600
<v Speaker 1>Okay SEO even for the author page. Good tip and.

201
00:10:02.559 --> 00:10:06.200
<v Speaker 2>Menus menucreation is super easy. You can build your main

202
00:10:06.279 --> 00:10:11.240
<v Speaker 2>navigation menu and add individual menu items effortlessly. Public supports

203
00:10:11.279 --> 00:10:13.120
<v Speaker 2>different kinds of links too. You can link to your

204
00:10:13.159 --> 00:10:16.320
<v Speaker 2>homepage obviously, or to lists of posts with specific tags.

205
00:10:16.720 --> 00:10:19.039
<v Speaker 2>You can add external links, like for a contact dust

206
00:10:19.039 --> 00:10:21.360
<v Speaker 2>page that goes to an email address or another site.

207
00:10:21.759 --> 00:10:24.600
<v Speaker 2>A quick tip on external links, it's generally best practice

208
00:10:24.600 --> 00:10:26.879
<v Speaker 2>to make them open in a new browser tab, and

209
00:10:27.039 --> 00:10:29.159
<v Speaker 2>you might want to add a no follow attribute.

210
00:10:29.320 --> 00:10:30.240
<v Speaker 1>What does no follow do?

211
00:10:30.440 --> 00:10:33.000
<v Speaker 2>It basically tell search engines, hey, don't pass any of

212
00:10:33.000 --> 00:10:36.559
<v Speaker 2>my website's ranking authority or link juice to this external site.

213
00:10:36.799 --> 00:10:39.919
<v Speaker 2>It's a way to manage your site's SEO reputation, especially

214
00:10:39.919 --> 00:10:42.840
<v Speaker 2>if you link out a lot internal links. Though links

215
00:10:42.919 --> 00:10:46.279
<v Speaker 2>to other pages or posts within your own site, those

216
00:10:46.360 --> 00:10:49.200
<v Speaker 2>should usually open in the same window for a smoother

217
00:10:49.480 --> 00:10:53.000
<v Speaker 2>user experience, and rearranging menu items is just simple drag

218
00:10:53.039 --> 00:10:53.440
<v Speaker 2>and drop.

219
00:10:53.840 --> 00:10:57.240
<v Speaker 1>Very intuitive, that sounds flexible and as you start creating

220
00:10:57.240 --> 00:11:00.200
<v Speaker 1>more content, say blog, post or articles. How do you

221
00:11:00.279 --> 00:11:03.039
<v Speaker 1>keep it all organized? For yourself and for visitors?

222
00:11:03.159 --> 00:11:05.559
<v Speaker 2>Tags are definitely your best friend here. They're vital for

223
00:11:05.639 --> 00:11:09.639
<v Speaker 2>categorizing everything. You might have tags like news, musings, tutorials,

224
00:11:09.720 --> 00:11:12.600
<v Speaker 2>whatever fits your content. You create the tags, and you

225
00:11:12.639 --> 00:11:15.879
<v Speaker 2>can even add featured images and specific meta descriptions for

226
00:11:15.960 --> 00:11:19.159
<v Speaker 2>the tag pages themselves, which again gives you another little

227
00:11:19.200 --> 00:11:20.720
<v Speaker 2>boost for your site's SEO.

228
00:11:20.960 --> 00:11:24.440
<v Speaker 1>Okay, so tags help organize. Now actually adding the content,

229
00:11:24.519 --> 00:11:26.879
<v Speaker 1>the posts and pages, what's that experience like?

230
00:11:26.919 --> 00:11:30.039
<v Speaker 2>In Pobolheim, Publa offers a couple of main editors. There's

231
00:11:30.080 --> 00:11:33.279
<v Speaker 2>the ys wag editor that stands for what you see

232
00:11:33.360 --> 00:11:35.480
<v Speaker 2>is what you get. It feels a lot like using

233
00:11:35.519 --> 00:11:40.159
<v Speaker 2>a classic word processor, you know, with a toolbar for bold, italics, lists,

234
00:11:40.159 --> 00:11:43.080
<v Speaker 2>et cetera. You format as you type. Then there's the

235
00:11:43.080 --> 00:11:45.679
<v Speaker 2>block editor. This one's a bit different. You build your

236
00:11:45.679 --> 00:11:49.559
<v Speaker 2>content by assembling predefined blocks. A block for text, a

237
00:11:49.600 --> 00:11:51.840
<v Speaker 2>block for an image, a block for a heading. It's

238
00:11:51.919 --> 00:11:54.399
<v Speaker 2>kind of like building with digital legos. It offers maybe

239
00:11:54.399 --> 00:11:55.480
<v Speaker 2>more structured control.

240
00:11:55.840 --> 00:11:57.519
<v Speaker 1>Interesting. Is there another option?

241
00:11:57.840 --> 00:12:01.279
<v Speaker 2>Yes? For purely static content like a terms and conditions

242
00:12:01.320 --> 00:12:05.320
<v Speaker 2>page or a privacy policy. The markdown editor is also available.

243
00:12:05.600 --> 00:12:08.759
<v Speaker 2>Markdown uses really simple symbols, like a hash sign hashtag

244
00:12:08.799 --> 00:12:12.200
<v Speaker 2>for a header or double asterisks text for bold. It's

245
00:12:12.440 --> 00:12:15.600
<v Speaker 2>very clean and distraction free, and Pabla even includes a

246
00:12:15.600 --> 00:12:18.519
<v Speaker 2>little view help cheat sheet if you're new to it. Now,

247
00:12:18.519 --> 00:12:21.360
<v Speaker 2>here's a critical point to remember about the editors. Once

248
00:12:21.399 --> 00:12:23.799
<v Speaker 2>you create a post or a page using one editor,

249
00:12:23.919 --> 00:12:26.679
<v Speaker 2>say the Block editor, you must always edit that specific

250
00:12:26.679 --> 00:12:28.679
<v Speaker 2>piece of content using the same editor.

251
00:12:28.960 --> 00:12:31.759
<v Speaker 1>Ah. You can't switch back and forth between wysiweigi and

252
00:12:31.799 --> 00:12:33.759
<v Speaker 1>Block on the same post exactly.

253
00:12:34.279 --> 00:12:37.720
<v Speaker 2>Trying to switch can seriously mess up the formatting and structure.

254
00:12:38.200 --> 00:12:40.399
<v Speaker 2>So pick one editor for a piece of content and

255
00:12:40.440 --> 00:12:41.039
<v Speaker 2>stick with it.

256
00:12:41.159 --> 00:12:44.039
<v Speaker 1>Good to know. Okay, within those editors, what are the

257
00:12:44.080 --> 00:12:47.639
<v Speaker 1>fundamental building blocks when you're actually crafting your posts and pages.

258
00:12:47.720 --> 00:12:50.360
<v Speaker 2>Well, you'll start with a compelling title, obviously than your

259
00:12:50.399 --> 00:12:54.000
<v Speaker 2>main body text. The source actually uses some fun chat

260
00:12:54.000 --> 00:12:59.399
<v Speaker 2>GPT generated lorem ipsum examples like lunar lasagna just as placeholder.

261
00:12:58.879 --> 00:12:59.919
<v Speaker 1>Text viaser lasagna.

262
00:13:00.440 --> 00:13:03.679
<v Speaker 2>Huh yeah. You can easily embed images, of course, and

263
00:13:03.759 --> 00:13:07.039
<v Speaker 2>here adding alternative text or alt text for every image

264
00:13:07.080 --> 00:13:11.159
<v Speaker 2>is crucial, not just for accessibility, for visually impaired users

265
00:13:11.240 --> 00:13:15.039
<v Speaker 2>using screen readers, but also for SEO search engines, read

266
00:13:15.159 --> 00:13:18.600
<v Speaker 2>that alt text right describe the image precisely. You can

267
00:13:18.639 --> 00:13:23.360
<v Speaker 2>also create bulleted lists. Numbered lists adds stylish block quotes

268
00:13:23.360 --> 00:13:26.679
<v Speaker 2>for highlighting text, and obviously link to other internal pages

269
00:13:26.759 --> 00:13:29.440
<v Speaker 2>or external resources seamlessly. And I'll see it again. Because

270
00:13:29.480 --> 00:13:33.639
<v Speaker 2>it's important, always, always add a short, keyword focused meta

271
00:13:33.679 --> 00:13:35.759
<v Speaker 2>description for every single post and page.

272
00:13:35.799 --> 00:13:39.200
<v Speaker 1>Even though Google says it's not a direct ranking factor anymore.

273
00:13:38.919 --> 00:13:41.639
<v Speaker 2>Even so, think of it as your sales pitch in

274
00:13:41.679 --> 00:13:44.279
<v Speaker 2>the search results. It might not directly boost your rank,

275
00:13:44.320 --> 00:13:47.600
<v Speaker 2>but it heavily influences whether someone actually clicks on your

276
00:13:47.639 --> 00:13:50.960
<v Speaker 2>link versus someone else's, so it's crucial for click through rates.

277
00:13:51.960 --> 00:13:54.559
<v Speaker 2>You can also customize your homepage quite nicely. You can

278
00:13:54.559 --> 00:13:58.279
<v Speaker 2>set any existing page you've created as your site's main homepage,

279
00:13:58.840 --> 00:14:00.840
<v Speaker 2>and you can even optionally put your blog into a

280
00:14:00.879 --> 00:14:04.000
<v Speaker 2>subfolder like your side dot com forth loss blog by

281
00:14:04.120 --> 00:14:07.759
<v Speaker 2>using something called a post's prefix. This lets you create

282
00:14:07.799 --> 00:14:10.600
<v Speaker 2>a kind of hybrid site, maybe a main business site

283
00:14:10.679 --> 00:14:11.759
<v Speaker 2>with an attached blog.

284
00:14:11.840 --> 00:14:14.519
<v Speaker 1>Okay, that covers the core content, but what about adding

285
00:14:14.600 --> 00:14:17.720
<v Speaker 1>more dynamic features, things like say an image gallery or

286
00:14:17.759 --> 00:14:21.039
<v Speaker 1>a contact form seems tricky for a static site, and also,

287
00:14:21.120 --> 00:14:23.200
<v Speaker 1>how do we keep things compliant with all the privacy

288
00:14:23.240 --> 00:14:24.440
<v Speaker 1>regulations floating around?

289
00:14:24.600 --> 00:14:29.039
<v Speaker 2>Yeah, Public makes adding those kinds of interactive elements surprisingly straightforward. Actually.

290
00:14:29.639 --> 00:14:31.919
<v Speaker 2>For image galleries, it has built in support using a

291
00:14:31.919 --> 00:14:35.639
<v Speaker 2>popular library kind of photoswipe, it's really easy. You just

292
00:14:35.679 --> 00:14:38.960
<v Speaker 2>add multiple images to a page and you can customize

293
00:14:38.960 --> 00:14:41.879
<v Speaker 2>their layout, maybe use the wide option to make them

294
00:14:41.919 --> 00:14:45.600
<v Speaker 2>span the content area, and add descriptive captions below each image.

295
00:14:45.879 --> 00:14:49.240
<v Speaker 2>Just a small note, the specific gallery options and how

296
00:14:49.279 --> 00:14:51.960
<v Speaker 2>they look can vary slightly depending on the public theme

297
00:14:51.960 --> 00:14:52.440
<v Speaker 2>you're using.

298
00:14:52.600 --> 00:14:56.240
<v Speaker 1>Right, themes can influence features. Okay, gallery sound easy enough,

299
00:14:56.679 --> 00:15:00.440
<v Speaker 1>but a contact form that's crucial for so many sites.

300
00:15:01.279 --> 00:15:03.440
<v Speaker 1>How does that work without a back end server on

301
00:15:03.480 --> 00:15:05.639
<v Speaker 1>a static site to process the submission.

302
00:15:06.000 --> 00:15:08.440
<v Speaker 2>That's a great question, and you're right. Static sites inherently

303
00:15:08.480 --> 00:15:11.799
<v Speaker 2>can't process form data themselves, so that's where third party

304
00:15:11.840 --> 00:15:14.360
<v Speaker 2>services come into play. You'll need a service like jotform,

305
00:15:14.399 --> 00:15:17.240
<v Speaker 2>which was the one demonstrated in the source material. They

306
00:15:17.279 --> 00:15:19.840
<v Speaker 2>offer free plans, which are often enough to get started.

307
00:15:20.159 --> 00:15:23.200
<v Speaker 2>These services essentially handle the form submissions for you. The

308
00:15:23.200 --> 00:15:25.720
<v Speaker 2>way it works is you build your form on their platform,

309
00:15:25.879 --> 00:15:28.120
<v Speaker 2>and they give you a little snippet of JavaScript.

310
00:15:27.720 --> 00:15:29.679
<v Speaker 1>Code, and you put that code into PUBLICII.

311
00:15:29.960 --> 00:15:33.559
<v Speaker 2>Exactly, you embed that JavaScript snippet directly into a public

312
00:15:33.600 --> 00:15:37.080
<v Speaker 2>page using its HTML editor view. It sounds technical, but

313
00:15:37.120 --> 00:15:40.200
<v Speaker 2>it's usually just copy and paste. But and this is vital,

314
00:15:40.480 --> 00:15:44.320
<v Speaker 2>you absolutely must test those form submissions thoroughly after setting

315
00:15:44.360 --> 00:15:47.279
<v Speaker 2>it up. Send a test message, make sure you receive

316
00:15:47.279 --> 00:15:50.200
<v Speaker 2>it and sure the whole process works as expected.

317
00:15:49.919 --> 00:15:53.440
<v Speaker 1>Makes sense? Test test test? What about comments on blog posts?

318
00:15:53.559 --> 00:15:56.519
<v Speaker 2>Same idea, Pretty much the same principle. Yeah, for comments,

319
00:15:56.559 --> 00:15:59.759
<v Speaker 2>you typically use other third party plugins or services like

320
00:16:00.240 --> 00:16:03.759
<v Speaker 2>comment or cousins were mentioned as examples. The general process

321
00:16:03.799 --> 00:16:06.240
<v Speaker 2>is similar. You download and install the comments plug in

322
00:16:06.320 --> 00:16:09.639
<v Speaker 2>globally within public First, then you usually need to register

323
00:16:09.679 --> 00:16:12.120
<v Speaker 2>an account with the external comment service provider to get

324
00:16:12.120 --> 00:16:15.240
<v Speaker 2>a unique ID for your site. Finally, you activate and

325
00:16:15.279 --> 00:16:18.200
<v Speaker 2>configure that plug in locally within public CMS, putting in

326
00:16:18.200 --> 00:16:21.960
<v Speaker 2>your unique ID. One crucial thing about comments, Though they

327
00:16:22.000 --> 00:16:25.039
<v Speaker 2>are disabled by default in public CMS, you have to

328
00:16:25.120 --> 00:16:28.000
<v Speaker 2>explicitly turn them on, either in your main theme settings

329
00:16:28.080 --> 00:16:30.639
<v Speaker 2>or on a purpose or per page basis. If you

330
00:16:30.679 --> 00:16:32.360
<v Speaker 2>only want comments on specific content.

331
00:16:32.720 --> 00:16:36.759
<v Speaker 1>Suck good default setting for privacy. Okay, speaking of privacy,

332
00:16:37.000 --> 00:16:41.159
<v Speaker 1>what about the really important legal stuff like privacy policies,

333
00:16:41.279 --> 00:16:46.120
<v Speaker 1>terms and conditions cookie banners, especially with GDPR and CCPA rules.

334
00:16:46.279 --> 00:16:48.960
<v Speaker 2>Yeah, you absolutely need to address that. It's really best

335
00:16:48.960 --> 00:16:52.240
<v Speaker 2>practice for every website, static or dynamic, to have a

336
00:16:52.320 --> 00:16:55.559
<v Speaker 2>comprehensive privacy policy and probably terms and conditions too. The

337
00:16:55.600 --> 00:16:58.679
<v Speaker 2>policy needs to be transparent. It should clearly outline what

338
00:16:58.759 --> 00:17:02.919
<v Speaker 2>personal information you collect, maybe through forms, cookies, tracking scripts,

339
00:17:02.960 --> 00:17:04.359
<v Speaker 2>how you use it and if you share it with

340
00:17:04.400 --> 00:17:07.119
<v Speaker 2>any third parties. It also needs to detail how you

341
00:17:07.200 --> 00:17:10.480
<v Speaker 2>protect that data, what rights users have regarding their data,

342
00:17:10.640 --> 00:17:13.759
<v Speaker 2>like accessing it, correcting it, deleting it, and how you

343
00:17:13.759 --> 00:17:17.680
<v Speaker 2>comply with laws like GDPR and CCPA. The source material

344
00:17:17.720 --> 00:17:21.160
<v Speaker 2>actually provides a starting point, a file called privacy dot airtf,

345
00:17:21.240 --> 00:17:23.359
<v Speaker 2>which can be a really helpful template to adapt.

346
00:17:23.440 --> 00:17:25.920
<v Speaker 1>That's useful in cookie banners. Does Publy help with that?

347
00:17:26.200 --> 00:17:29.880
<v Speaker 2>It does? Public CMS integrates a cookie banner featured directly

348
00:17:29.960 --> 00:17:33.559
<v Speaker 2>into its privacy settings. Now it's interesting the official public

349
00:17:33.559 --> 00:17:37.599
<v Speaker 2>themes themselves generally don't generate cookies, but as we just discussed,

350
00:17:37.640 --> 00:17:41.160
<v Speaker 2>third party plugins for things like comments or analytics often

351
00:17:41.200 --> 00:17:44.720
<v Speaker 2>do use cookies, so you can enable a basic cookie

352
00:17:44.759 --> 00:17:48.240
<v Speaker 2>banner in publicy just to inform users. You can customize

353
00:17:48.279 --> 00:17:51.240
<v Speaker 2>the message the example given with something like this website

354
00:17:51.359 --> 00:17:54.680
<v Speaker 2>uses limited cookies for basic functionality. These are not optional.

355
00:17:55.119 --> 00:17:58.559
<v Speaker 2>Third party providers may use cookies as well. You can

356
00:17:58.640 --> 00:18:01.799
<v Speaker 2>choose how it's displayed as a dismissable banner, just a

357
00:18:01.839 --> 00:18:04.759
<v Speaker 2>little badge, or maybe open by clicking a custom link

358
00:18:04.799 --> 00:18:07.079
<v Speaker 2>in your footter. And speaking of the futter, you can

359
00:18:07.119 --> 00:18:09.640
<v Speaker 2>easily modify your footter menus in public to add a

360
00:18:09.680 --> 00:18:12.720
<v Speaker 2>direct link to your privacy policy page, making it readily

361
00:18:12.759 --> 00:18:13.880
<v Speaker 2>accessible for visitors.

362
00:18:14.039 --> 00:18:17.599
<v Speaker 1>Okay, so we've built the site, added content, galleries, forms,

363
00:18:17.599 --> 00:18:21.039
<v Speaker 1>handley compliance bits. We're almost there, But what about making

364
00:18:21.079 --> 00:18:24.759
<v Speaker 1>it truly professional? The GitHub dot io address is functional,

365
00:18:25.039 --> 00:18:27.480
<v Speaker 1>but maybe not ideal for business or brand. What does

366
00:18:27.480 --> 00:18:29.839
<v Speaker 1>it all mean when you want an online presence that's

367
00:18:29.880 --> 00:18:32.440
<v Speaker 1>easy for people to remember and really reflects your identity.

368
00:18:32.759 --> 00:18:34.960
<v Speaker 2>Yeah, this is where we talk about moving beyond that

369
00:18:35.039 --> 00:18:39.119
<v Speaker 2>free GitHub pages url, you know, the https dot your

370
00:18:39.160 --> 00:18:43.440
<v Speaker 2>username dot GitHub refo kind of thing. While functional, something

371
00:18:43.519 --> 00:18:46.519
<v Speaker 2>like my cool brand dot com or space dash b

372
00:18:46.759 --> 00:18:49.960
<v Speaker 2>dot net from the source example just feels different. A

373
00:18:50.039 --> 00:18:53.960
<v Speaker 2>custom domain provides that immediate sense of professionalism, credibility, and

374
00:18:54.000 --> 00:18:56.440
<v Speaker 2>it's just infinitely easier for people to remember and share.

375
00:18:56.599 --> 00:18:58.240
<v Speaker 1>So how does that work? What are domains?

376
00:18:58.519 --> 00:19:01.880
<v Speaker 2>Well, domain names are essentially unique digital addresses, your unique

377
00:19:01.880 --> 00:19:05.519
<v Speaker 2>property online. They typically end in what are called TLDs

378
00:19:05.640 --> 00:19:08.400
<v Speaker 2>or top level domains. You know, dot com, dot org,

379
00:19:08.440 --> 00:19:11.119
<v Speaker 2>dot net are the most common ones. To find an

380
00:19:11.160 --> 00:19:15.200
<v Speaker 2>available one, it's smart to use a reliable whois lookup

381
00:19:15.240 --> 00:19:18.279
<v Speaker 2>tool I can the main governing body has one. This

382
00:19:18.359 --> 00:19:22.319
<v Speaker 2>helps you check availability and avoid potentially predatory registrars. Then

383
00:19:22.599 --> 00:19:25.680
<v Speaker 2>you register your chosen domain name with a reputable domain registrar.

384
00:19:25.920 --> 00:19:28.160
<v Speaker 2>Squarespace was used as the example in the source, but

385
00:19:28.200 --> 00:19:31.279
<v Speaker 2>there are many others like name Cheap, go Daddy, Google Domains,

386
00:19:31.279 --> 00:19:34.519
<v Speaker 2>et cetera. A good registrarer typically offers crucial features like

387
00:19:34.559 --> 00:19:38.039
<v Speaker 2>auto renewal so you don't accidentally lose your domain, whis

388
00:19:38.119 --> 00:19:41.119
<v Speaker 2>privacy which hides your personal contact information from public view,

389
00:19:41.599 --> 00:19:44.720
<v Speaker 2>domain lock to prevent unauthorized transfers, and often they bundle

390
00:19:44.759 --> 00:19:48.000
<v Speaker 2>in SSL certificates for secure HTTPS dot connections.

391
00:19:48.200 --> 00:19:50.240
<v Speaker 1>Okay, so you register your domain name, you own my

392
00:19:50.359 --> 00:19:53.279
<v Speaker 1>cool brand dot com. Now how does the Internet actually

393
00:19:53.319 --> 00:19:55.440
<v Speaker 1>know that my cool brand dot com should point to

394
00:19:55.440 --> 00:19:58.000
<v Speaker 1>the website files sitting on GitHub Pages. AH.

395
00:19:58.079 --> 00:20:00.519
<v Speaker 2>That brings us to the magic of DNS, the Domain

396
00:20:00.559 --> 00:20:03.519
<v Speaker 2>name system. The classic analogy is that DNS is like

397
00:20:03.559 --> 00:20:06.920
<v Speaker 2>the Internet's phone book. It translates the human friendly domain

398
00:20:07.000 --> 00:20:09.960
<v Speaker 2>names we type into browsers like Google dot Com into

399
00:20:09.960 --> 00:20:13.359
<v Speaker 2>the numerical IP addresses that computers actually use to find

400
00:20:13.400 --> 00:20:15.279
<v Speaker 2>servers and resources on the Internet.

401
00:20:15.599 --> 00:20:17.640
<v Speaker 1>Got it, So you need to update this phone book

402
00:20:17.720 --> 00:20:19.359
<v Speaker 1>entry for your domain Precisely.

403
00:20:19.880 --> 00:20:23.279
<v Speaker 2>Configuring this involves two main steps. First, you go into

404
00:20:23.279 --> 00:20:25.880
<v Speaker 2>your GitHub pages settings for your repository and tell it

405
00:20:25.880 --> 00:20:28.680
<v Speaker 2>what your custom domain name is. Second, you need to

406
00:20:28.720 --> 00:20:31.119
<v Speaker 2>log into your domain registrar where you bought the domain

407
00:20:31.440 --> 00:20:35.359
<v Speaker 2>and configure its DNS records. This usually means deleting any

408
00:20:35.359 --> 00:20:38.599
<v Speaker 2>default DNS entries the registrar might have put there. Then

409
00:20:38.640 --> 00:20:42.759
<v Speaker 2>you'll add specific records provided by GitHub. Typically this involves

410
00:20:42.759 --> 00:20:46.039
<v Speaker 2>adding four A records. These point the main domain like space,

411
00:20:46.160 --> 00:20:49.440
<v Speaker 2>dash b, dot net directly to four specific IP addresses

412
00:20:49.480 --> 00:20:52.400
<v Speaker 2>that GitHub Pages uses. The source gives examples like one

413
00:20:52.440 --> 00:20:54.680
<v Speaker 2>eighty five point one, nine, nine point one oh eight

414
00:20:54.680 --> 00:20:56.160
<v Speaker 2>point one, five, three.

415
00:20:56.200 --> 00:20:58.559
<v Speaker 1>And three others okay four A records.

416
00:20:58.160 --> 00:21:01.119
<v Speaker 2>And usually you also add a CNA means record. This

417
00:21:01.200 --> 00:21:04.559
<v Speaker 2>is typically used for the WWW version of your domain,

418
00:21:04.759 --> 00:21:08.119
<v Speaker 2>like www, dot space, dash dash b dot net, and

419
00:21:08.160 --> 00:21:10.720
<v Speaker 2>you point it to your main domain name, eg. Space

420
00:21:10.839 --> 00:21:13.640
<v Speaker 2>dash b dot net. One important thing to remember is

421
00:21:13.720 --> 00:21:17.640
<v Speaker 2>DNS changes aren't always instantaneous. They need to propagate across

422
00:21:17.640 --> 00:21:19.680
<v Speaker 2>the Internet's phone books, which can take anywhere from a

423
00:21:19.720 --> 00:21:22.240
<v Speaker 2>few minutes to in rare cases, up to forty eight

424
00:21:22.319 --> 00:21:25.559
<v Speaker 2>or even seventy two hours. Usually it's much faster, though.

425
00:21:25.400 --> 00:21:27.720
<v Speaker 1>Patience is needed. Then, what are the final steps?

426
00:21:28.000 --> 00:21:31.480
<v Speaker 2>Right after you've configured DNS and waited a bit for propagation,

427
00:21:32.000 --> 00:21:34.960
<v Speaker 2>Rigorously test your new custom domain in your browser. See

428
00:21:34.960 --> 00:21:37.519
<v Speaker 2>if it loads your GitHub page's site. If you happen

429
00:21:37.559 --> 00:21:40.160
<v Speaker 2>to see old content or maybe an error, try clearing

430
00:21:40.160 --> 00:21:43.079
<v Speaker 2>your browser cash first. Sometimes your browser holds onto the

431
00:21:43.119 --> 00:21:46.440
<v Speaker 2>old DNS information. Once it's working, the very final step

432
00:21:46.519 --> 00:21:49.039
<v Speaker 2>is to go back into your public CMS settings, specifically

433
00:21:49.079 --> 00:21:52.039
<v Speaker 2>the server settings, update the URL there to reflect your

434
00:21:52.039 --> 00:21:54.720
<v Speaker 2>new custom domain, and then synchronize your website one last

435
00:21:54.759 --> 00:21:57.240
<v Speaker 2>time to make sure all internal links use the new domain.

436
00:21:57.559 --> 00:22:01.279
<v Speaker 1>Fantastic, So now we've got the foundation, the the interactivity,

437
00:22:01.279 --> 00:22:04.480
<v Speaker 1>the compliance, and the professional custom domain. The site is

438
00:22:04.519 --> 00:22:07.039
<v Speaker 1>live and looking good, but how do you add that

439
00:22:07.160 --> 00:22:09.920
<v Speaker 1>extra layer of polish, you know, make your site really

440
00:22:09.960 --> 00:22:12.720
<v Speaker 1>pop and engage visitors from the very first second they arrive.

441
00:22:13.160 --> 00:22:15.759
<v Speaker 1>Let's talk about some maybe advanced styling techniques.

442
00:22:16.079 --> 00:22:18.640
<v Speaker 2>Yeah, this is where you can really start to differentiate

443
00:22:18.680 --> 00:22:21.279
<v Speaker 2>your site and add some wow factor. And the key

444
00:22:21.319 --> 00:22:24.799
<v Speaker 2>here is often custom CSS. Public CMS allows you to

445
00:22:24.839 --> 00:22:28.799
<v Speaker 2>add your own custom CSS rules directly within its interface.

446
00:22:29.400 --> 00:22:32.079
<v Speaker 2>This is powerful because it lets you override the default

447
00:22:32.119 --> 00:22:35.359
<v Speaker 2>styles provided by your theme or even add completely new

448
00:22:35.400 --> 00:22:39.119
<v Speaker 2>styles without ever needing to touch the themes underlying HTML

449
00:22:39.160 --> 00:22:42.400
<v Speaker 2>files directly. It keeps things clean and upgrade safe.

450
00:22:42.440 --> 00:22:44.799
<v Speaker 1>Okay, custom CSS. What's a cool example of what you

451
00:22:44.839 --> 00:22:45.440
<v Speaker 1>can do with it?

452
00:22:45.559 --> 00:22:47.839
<v Speaker 2>Well, one really neat trick shun in the source material

453
00:22:48.200 --> 00:22:52.319
<v Speaker 2>uses the standard HTML details and summary tags. These tags,

454
00:22:52.400 --> 00:22:55.880
<v Speaker 2>built right into HTML five, allow you to create interactive

455
00:22:56.079 --> 00:22:59.160
<v Speaker 2>FAQ sections. You put your question in the summary tag

456
00:22:59.359 --> 00:23:02.319
<v Speaker 2>and the answer inside the main details tag. By default,

457
00:23:02.319 --> 00:23:05.200
<v Speaker 2>the browser makes the summary clickable to reveal or hide

458
00:23:05.200 --> 00:23:05.640
<v Speaker 2>the answer.

459
00:23:05.759 --> 00:23:08.000
<v Speaker 1>Oh like those little drop down faqus you see.

460
00:23:07.839 --> 00:23:11.160
<v Speaker 2>Everywhere exactly, But you can take that basic functionality and

461
00:23:11.279 --> 00:23:14.680
<v Speaker 2>use custom CSS to make it look really polished and beautiful.

462
00:23:14.920 --> 00:23:18.559
<v Speaker 2>You can add padding, nice background colors, subtle box shadows

463
00:23:18.599 --> 00:23:22.000
<v Speaker 2>to the FAQ list items and the revealed detail sections.

464
00:23:22.279 --> 00:23:24.680
<v Speaker 2>You can change the little arrow icons style how it

465
00:23:24.720 --> 00:23:27.240
<v Speaker 2>looks when you hover over a question. Really make it

466
00:23:27.240 --> 00:23:30.240
<v Speaker 2>fit your site's design. It's a simple HTML structure made

467
00:23:30.319 --> 00:23:31.440
<v Speaker 2>elegant with CSS.

468
00:23:31.640 --> 00:23:34.839
<v Speaker 1>It's a great practical example. What about guiding users getting

469
00:23:34.880 --> 00:23:36.839
<v Speaker 1>them to take a specific action like signing up for

470
00:23:36.880 --> 00:23:38.960
<v Speaker 1>a newsletter or clicking a buy now button?

471
00:23:39.200 --> 00:23:42.519
<v Speaker 2>Ah? Yes, the call to action or CTA. This is

472
00:23:42.559 --> 00:23:45.799
<v Speaker 2>where styling simple text links to look like prominent buttons

473
00:23:45.839 --> 00:23:49.319
<v Speaker 2>really shines. You can use custom CSS to transform a

474
00:23:49.359 --> 00:23:53.400
<v Speaker 2>standard link into something that visually screams click me. This

475
00:23:53.519 --> 00:23:56.440
<v Speaker 2>often involves targeting a link based on its title attribute

476
00:23:56.440 --> 00:23:59.079
<v Speaker 2>in the HTML. For instance, if you have a link

477
00:23:59.160 --> 00:24:03.960
<v Speaker 2>like an h ref title book now book your CONSULTATIONA,

478
00:24:04.400 --> 00:24:07.839
<v Speaker 2>you can write CSS that specifically targets the title book

479
00:24:07.880 --> 00:24:10.160
<v Speaker 2>now and apply styles to make it look like a button,

480
00:24:10.279 --> 00:24:13.359
<v Speaker 2>background color, padding, rounded corners, hover effects, et cetera.

481
00:24:13.519 --> 00:24:15.559
<v Speaker 1>So you target the title attribute clever.

482
00:24:15.720 --> 00:24:17.920
<v Speaker 2>Yeah, it's a clean way to do it, and the

483
00:24:17.960 --> 00:24:21.119
<v Speaker 2>broader implication here, The really important takeaway for you, the listener,

484
00:24:21.359 --> 00:24:24.599
<v Speaker 2>is thinking about where you place these CTAs. You want

485
00:24:24.599 --> 00:24:27.319
<v Speaker 2>to put your most important call to action buttons above

486
00:24:27.359 --> 00:24:30.240
<v Speaker 2>the fold. That means in the top part of your homepage,

487
00:24:30.400 --> 00:24:32.960
<v Speaker 2>the area that's immediately visible when someone lands on your

488
00:24:33.000 --> 00:24:36.400
<v Speaker 2>site before they start scrolling. That's prime real estate. You

489
00:24:36.440 --> 00:24:39.079
<v Speaker 2>can reliably expect visitors to look there, so use it

490
00:24:39.119 --> 00:24:42.759
<v Speaker 2>strategically to capture their attention immediately and guide them towards

491
00:24:42.799 --> 00:24:43.880
<v Speaker 2>the action you want them to take.

492
00:24:44.200 --> 00:24:47.559
<v Speaker 1>Excellent advice. Okay, wow, we've really covered a lot of

493
00:24:47.559 --> 00:24:49.759
<v Speaker 1>ground here. We've taken you on quite a journey, I think,

494
00:24:50.240 --> 00:24:55.240
<v Speaker 1>from understanding the surprising benefits and simplicity static websites, through

495
00:24:55.240 --> 00:24:58.079
<v Speaker 1>the hands on setup with Publi and GitHub, deep into

496
00:24:58.119 --> 00:25:00.319
<v Speaker 1>customization with themes and content.

497
00:25:00.759 --> 00:25:04.039
<v Speaker 2>Adding interactive features like galleries and forms, making sure things

498
00:25:04.039 --> 00:25:06.079
<v Speaker 2>are compliant with privacy rules.

499
00:25:05.759 --> 00:25:08.960
<v Speaker 1>Right, and finally launching a truly professional looking site using

500
00:25:08.960 --> 00:25:11.960
<v Speaker 1>your own custom domain name. And the most remarkable part.

501
00:25:12.400 --> 00:25:15.519
<v Speaker 1>All of this is achievable using completely free tools like

502
00:25:15.519 --> 00:25:19.119
<v Speaker 1>publized CMS and GitHub pages. It really is quite something

503
00:25:19.319 --> 00:25:21.799
<v Speaker 1>to build and host a quality website for free in

504
00:25:21.799 --> 00:25:22.880
<v Speaker 1>today's digital world.

505
00:25:23.079 --> 00:25:24.880
<v Speaker 2>It really is, and if you've followed along with the

506
00:25:24.880 --> 00:25:28.640
<v Speaker 2>steep dive, hopefully you've seen firsthand just how accessible and

507
00:25:28.920 --> 00:25:31.880
<v Speaker 2>frankly powerful modern web development can be now, even if

508
00:25:31.920 --> 00:25:35.640
<v Speaker 2>you don't want to or need to, master complex coding languages.

509
00:25:36.160 --> 00:25:38.359
<v Speaker 2>So the question to leave you with is this, What

510
00:25:38.559 --> 00:25:41.119
<v Speaker 2>new idea, what project, what passion could you bring to

511
00:25:41.160 --> 00:25:44.319
<v Speaker 2>life online with these tools? Now that the barrier to entry,

512
00:25:44.359 --> 00:25:47.559
<v Speaker 2>the costs, the complexity is virtually gone, think about it.

513
00:25:47.559 --> 00:25:51.240
<v Speaker 2>The world is definitely waiting for your story, your unique contribution,