AI Summary
The video is a live coding session where the creator customizes a Ghost blog theme (Crabby) using VS Code and Sublime Text. They walk through installing the theme, modifying the sidebar, typography, and layout, while troubleshooting issues with Git, Xcode, and custom homepage setup.
Chapters
The creator begins a live coding session, learning to use VS Code for the first time, and plans to install a new theme for their Ghost blog.
They purchase and download the Crabby theme, then upload it to Ghost via the admin panel, activating it successfully.
They remove the authors widget and other unwanted sidebar elements by editing the sidebar.hbs file, aiming for a cleaner layout with newsletter signup and social icons.
They temporarily disable the Ghost members feature to hide login/subscribe buttons, using handlebars comments to remove the header elements.
Attempting to set up Git for version control, they encounter problems with Xcode installation due to insufficient disk space, leading to a manual theme upload instead.
They delete old video files and deep dive content to free up space for Xcode installation, eventually succeeding after removing about 30 GB.
Using code injection, they modify font sizes, letter spacing, and line heights for navigation and body text to improve readability.
They adjust post card title font weight and text size, and remove the 'public' label from newsletter signup using CSS display none.
They enable featured posts in the sidebar by marking posts as featured in Ghost, which then appear automatically.
They switch the commenting system from Disqus to Commento by editing the post.hbs file and uploading the updated theme.
They adjust Commento's background color and padding using CSS injection to make it blend better with the theme.
They attempt to make Twitter embeds full width but discover Twitter's API limits max width to 550px, so they align the embed left instead.
They create a new page called 'Home' and set up a home.hbs template, but encounter 404 errors due to routes.yaml formatting issues.
After troubleshooting, they fix the routes.yaml by removing extra spaces and changing the data source from page.home to post.page.home, which resolves the issue.
They remove unwanted elements like related posts and tags from the homepage, and add a profile picture to fill empty space.
The stream ends with a functional but still-in-progress blog, with plans to restructure content and create landing pages. The creator thanks viewers and encourages following on Twitch for more frequent streams.
Clickbait Check
90% Legit"Title accurately describes a live coding session customizing a Ghost blog theme, though the stream is more about troubleshooting than a polished tutorial."
Mentioned in this Video
Study Flashcards (5)
What is the maximum width Twitter allows for embedded tweets?
easy
Click to reveal answer
What is the maximum width Twitter allows for embedded tweets?
Between 250 and 550 pixels.
40:00
How do you remove the 'public' label from a Ghost newsletter signup?
medium
Click to reveal answer
How do you remove the 'public' label from a Ghost newsletter signup?
Set the class to display: none using CSS.
25:00
What file do you edit to change the commenting system from Disqus to Commento in Ghost?
medium
Click to reveal answer
What file do you edit to change the commenting system from Disqus to Commento in Ghost?
post.hbs
35:00
What was the cause of the 404 error on the custom homepage?
hard
Click to reveal answer
What was the cause of the 404 error on the custom homepage?
Extra spaces in the routes.yaml file and incorrect data source (page.home instead of post.page.home).
55:00
How do you enable featured posts in the Ghost sidebar?
easy
Click to reveal answer
How do you enable featured posts in the Ghost sidebar?
Mark posts as featured in the Ghost admin panel.
30:00
💡 Key Takeaways
Xcode Installation Failure
Highlights common developer pain point of insufficient disk space for essential tools.
10:00Twitter Embed Width Limitation
Reveals a technical constraint of Twitter's API that affects web design.
40:00Routes.yaml Debugging
Demonstrates a real-world debugging process for Ghost custom routing issues.
55:00CSS Injection for Newsletter
Shows a quick CSS fix to remove unwanted UI elements without editing templates.
25:00Full Transcript
hello everyone hello hello hello let's make let's get this show on the road let's make this happen so i'm learning how to use a vs code for the first time evening sesh indeed evening sesh now the thing is what i want to do is how do you how do you show the terminal window no this thing terminal new terminal okay great and theory they should work go start hey everyone how we doing how are we doing
come on click um in theory they should work oh go away local host why do i care oh thank you for the super chat radovic you're a legend you are a legend this is actually a little bit annoying i don't want that i just want the website okay fine so the thing is one of the first thing i want to do is i want to install the relevant theme [Music] let me just put a little uh
message here so people on youtube i'm going to switch to twitch in a little bit um because i don't want to clog the main channel with pointless stuff like this code with me thing so please follow me on twitch oh rodwick love the podcast and youtube channel keep doing what you're doing oh thank you and i definitely will say hi to tamel that is very kind of you that'll fund my takeaway for this evening alrighty so
what we want to do is want a new theme actually the one i want is krabby this is the theme that i want why is this so hard to buy something on the internet my i really don't understand what's going on here i'm literally trying to buy the theme and nothing is working this is literally all i want to do is want to buy this theme please just let me buy the theme there we go all
right we're getting somewhere this is good this is actually good now so let's go downloads this crabby online ducks there we go okay okay so i want to upload the theme directly i feel like i should actually set up the localhost and live reload and all that kind of stuff first hmm what is up people right let's figure out what's going on here okay here we go i probably shouldn't just play in okay whoops design upload
a theme crabby okay let's hit activate and see what happens great i need an integration of custom integration okay content header sidebar menu okay so in theory this should work hmm okay there we go it's sort of working actually not bad actually not bad at all safety okay so this is a good start now i want to adjust things okay so okay i don't that's crabby preview okay interesting okay okay hmm settings actions interesting okay that's
interesting bless you okay so okay so actually what i want to do now is okay hypothesis yeah i've got my invisalign braces in right now so i've got a bit of a lisp a lisp okay so let's stick this within content memes crabby okay famed crabby krabby patty okay that's fine so the question is what are we doing now huh are we eating okay yes please this oh god this is so annoying oh there are a
lot of partials here okay let's keep things very simple very very simple firstly let's sort my footer out because i actually don't want that so we go design header secondary navigation think we can get rid of all of this stuff because actually we don't need significant footer navigation perfect that's fine okay so step one is we need to get rid of authors it's that customizing sidebar um oh thank you you're the best right guys i'm gonna
take off my braces be right back oh just glorious all right [Music] thank you customize images high thank you um fine so first thing i want to do is get rid of authors so sidebar authors i actually don't want any of this so in theory all i have to do is i have to figure out what i actually want in the sidebar all right guys what should be in the sidebar what are my call to actions
i want the newsletter i want my social icons and i want i guess i guess i'll have courses either way so let's get rid of the oh in fact what i could do i could do this in a non a non-destructive fashion so let's just see see widgets i want to get rid of the author's one altogether hmm it's a bit problematic i actually want to get rid of this completely okay all right the easiest way
to do this would just be to delete this right so actually if we go sidebar or hbs we don't need authors subscribe form social icon and okay great so subscribe form hmm a link to your popular blog post and link to your about me page yeah i mean that's fair enough i kind of want a custom home page but i wanted to be more simple and link to a specific call to action we need to also
be very specific about what tags we're using because actually we don't want tags first we actually want we want specific landing pages but let's keep this simple for now let's get rid of the subscribe thing how do i do that i want to disable the members i feel like i want to disable the members feature how do i do that labs enable members save but does that get rid of the news ah i think i can
forget that get that girl get sort of newsletter that's really annoying i want to enable members okay but i don't want to show the login subscribe buttons for now so in theory if i go navigation no not that i'm looking for header if members log out login subscribe etc okay so handle bars comments okay great so i'm saying bracket bracket exclamation mark dash dash and then dash dash backup bracket perfect so that should get rid of
that stuff from the thingy bar so given that i cba to figure out how to do the live readout thing for now sorry john i know you said that this was good should i set it up um maybe i should i actually should this would be a good idea yeah you're right i probably should okay so let's go github oh bloody hell come on why is my username password for this stuff always wrong okay all right
let's go dashlane github okay there we go verification code there we go okay so in theory i can create a new repository sephora slash earlier private um okay create okay all right i need a basic github basic tutorial you know what let me see get in it ah why so stupid i've created a repository create a branch don't care about the branches make incommit changes i want to do it from the freaking command line okay the
weird thing is that you would think that this should work why is the active what the hell xcode select reset okay so i can say xcode select install great install thank you please do that agree it just takes ages i'm going to be absolutely livid keelan oh god kaelin mate i don't know anything about windows laptops all right this is a bit stupid why is it not working and now we're stuck the vs code is stuck
i knew this was a bad idea doesn't the search function work on this website clone it using glitch get clone url and then you can sync with the normal pull ah yes you're right okay okay sweet that's a good idea so in theory if i are you saying if i clone the repo it's not going to it's not going to overwrite like my my existing files is that right people in the chat helping me out okay
oh my my vs code is dead now why is this happening i don't understand i can use get cloned okay fine cheers guys let's just force quit vs code because it's being stupid and not working all right four squids it's not working fine quit this is dumb there we go that should come on go away why go away go away see sublime text doesn't do this stuff this is my first time trying vs code you know
what bloody hell screw it switch back to sublime i don't care about running terminal commands if it's not going to work so i can just do this okay good now i can use item it won't overwrite on the cloning before okay guys so um so this is the so i want to so am i saying git clone this oh oh god okay oh honey i need to install xcode so i know i can open a terminal
vnvs code but vs code is currently crashing and it's not letting me quit it so i can't be bothered why is xcode not working block god damn it not that this oh god why isn't working unable to install xcode delay download oh this is so annoying all right screw this i cannot be asked with all this good stuff i'm just manually going to compress and upload this stupid file so from content themes crap okay delete this
crabby compress now i can upload it to my thingy in design upload a theme this one overwrite there we go it's a bit manual but xcode doesn't want install for me and git's not going to work without xcode you may be better off to use homebrew to install kit so that's a good idea um do i have home oh god why don't i have homebrew brew install kit there we go maybe that'll work it all needs
xcode it literally all needs code install the command line tools unless or do i need to update my mac os like what the hell is going on guys need to sign into app store is that is that all there is it i just need to sign to the app store i'm signing to the app store i mean i could just download xcode from oh not enough disk space you're actually me my god i paid for the
one terabyte freaking macbook and there's not enough disk space to install install stuff it's just so annoying right do i need to keep all these files a lot of these can go just install xcode from the app store okay main thing is i need i need to free up enough space for this to work so let's do some storage management oh god i hate this right i've gone up to 2020.916 so i can get rid of
that have i uploaded all the deep dives that i need to yeah i've never run into these issues either it's weird um okay let's see have i uploaded my deep dive stuff i've uploaded deep dives up to august bradley so osama thiago and kay can go good that will free up nearly 30 gigabytes try using atom yeah i should have just gone for the four terabytes tbh okay now do i have new videos uh september karma
medic video dump right we've got 140 do i have two lots of 140. oh that can't be right oh it's 144 and 140. so i've got one for four i've got one for zero i'm on one for six zapier i've got one for three in theory that should be fine okay good let's delete all of that stuff in the holding zone oh thank you whoever bought said that thank you iq man onward okay right that can
be deleted i can be deleted what is this delete those surely this is enough i think i've uploaded the august one as well surely this is enough no interviews i've gone up to august i can delete august okay good i can actually delete all this as well both these can go uh i can go benjamin hardy yeah that can go great okay we've freed up a lot of a large amount of space now in theory so
if i hit download on xcode it should just work great that will take apps absolutely ages to download in the meantime let's go back to my website in theory authors should now be gone there we go perfect and in theory wonderful so that's a good start um so okay um fine what's next save file file open recent okay i want to edit some typography now i can do all of that with css things and then i
can worry about them later upload the writes yaml file so i actually don't need all that stuff i don't want member signups and subscription flows although i don't want to check that this is working so if i say does this work please check your inbox guys by the way please sign up to my weekly email newsletter in theory this should have oh great confirm your email address fantastic you successfully subscribed perfect okay so at least that's
working cool now what we want to do is okay sweet so now there's a lot of tags here i need we need to think about okay i'll ask i can ask angus to think about kind of hierarchy and structure and stuff okay i'm not a huge fan of how this displays so firstly let's figure out how we solve the typography out here what's what's the main font that we're using in this oh god oh we're using
sass okay so what font are we looking at i want enter oh we're using enter perfect that's exactly what i want so actually what we'll do is with our design in general i'll do emojis with spaces okay so all these pages can be changed the main thing is actually we want contracts hunter gang so okay let's see what are we doing to these fonts font size 16 okay now that's being changed is it nerve item because
the classic doesn't have item no that's inherited from the body is it specifically the link that's been ah okay there we go font size right i'm not a fan of what's going on here this is being oh it's line height that i'm looking at not font size if i change that to 18 what happens 19 20. everything everything is all just a bit small i want everything to be a little less small but that's fine we
can okay so font size is 12 for now i think we can at least make it 16. i can say letter spacing minus three percent no that's not a valid thing minus three pixels okay no that's not what we want minus one minus zero point five okay that works um i want a little bit more font weight six hundred no i don't know yeah 600 is reasonable i guess variable color gray i don't know should we
333 yet um i i can live with variable color gray so what i want to do is yeah let's change font size so c nav link i'll just do some code injecting so style dot c nothing and there's an a class yeah class c now blank okay so let's say font size 16 pixels and letter spacing minus zero minus 0.5 px easy save refresh boom right that's a good start um we can up the spacing a
little bit so see nav item i want to say margin right no let's say 30 that's a bit more breathing room let's say 28 yeah sure copy all of that go straight in here great oh how's that has that actually updated no it hasn't and medium width 64. don't see now item not last child margin right 24. that's basically what i said right a medium and it was a good let's see oh maybe i have to
do some like that will that work yeah there we go yeah nylon gaming i don't think i was particularly sleep deprived i slept like seven hours most days sometimes less sometimes more so it's pretty good vibes okay i mean that's fine for now oh this search is really slow okay interesting i don't really like this display the single post display i like the header of this theme i like the sidebars okay let's let's just tweak stuff
we'll just tweak stuff and see what happens so for example um i was inheriting from there so can i say 700 i mean that's better 400 yeah i think 700. so i actually want to do that that doesn't seem to have updated though oh no it is updated cool that's fine and if i say yeah i i just don't i just hate the default letter spacing of enter why is it getting left spacing from it saying
body should we just say body letter spacing and just let it do its thing so if we go up if we say would that work okay there we go i actually do prefer that sort of letter spacing i don't like this display inspect show me where is the font weight being set so heavy yeah the display of that is a bit much where is it inheriting it's why is it just so why is letter spacing being
defined um no not notice spacing the font weight why is the font weight so ridiculously heavy look this is being this is being over oh there we go postcard title font weight 900 why the hell is that 900 why would you use such a stupid font weight i'd say 700 that would be a bit more reasonable 700 fine okay good okay and now the other thing i don't like is the smallness of this text where is
it making it so small font size 14 okay what are we up at 16 18 yeah that could work and let's say line height 28 ah much nicer much better oh beautiful let's go 28 30. yeah let's go 30. so we want to do this vibe okay cool now we want a bit more padding over here so we actually want to i think we want to up the line height of this or at least should we
say line height 44 oh 48 44 let's say 44. specifically that it's all very hacky right now the mobile displays yeah i need to i need to look at that that is a good idea should look at how it's just playing on mobile as well okay so moment of truth okay so this is let's see iphone 10. that's fine i can live with that for now okay i can live with this for now i think that's
reasonable newsletter newsletter deep dive newsletter okay because it's obvious yeah you're right it's public obviously it's a public article but um will this be helpful for when i have a members only post no i don't think it will you're right i should get rid of the public text so in that case public member paid members in public so i should say i should just get the class i should just set that to display none might be
reasonable easy easy mode good good shouts um whoever that was in the chat it was in the chat i can't find you anymore giovacho giovagio from twitch thank you for suggesting that change that's a good idea okay this is now going along my vibes it's also fairly obvious that i i will i will have written these things so do i need to show do i need to show the meta the date of publication and the newsletters
let's let's keep it in for now we will keep it in for now so i learned how to code when i was like 12 years old and for me absolutely like ages ago so like how i learned to code is not how i would recommend learning to code i also i have a post on my website that actually talks about this oh there we go why and how you should learn to code there we go everyone
everyone who's asking about this oh okay great we are making minor tweaks to this theme this is good this is what i like lucky for you that's what i like that's what i like tags right i want this to be a little bit bigger in font size but i suspect i suspect it's this is it this that has a tiny font size there we go see tags list item should we above that to 14 not 16.
i think 14 is reasonable i also don't want this stupid letter spacing oh hmm yeah maybe that's fine maybe 400 500 600 500 yeah i can live with that i'm going to do this so in theory that should work save reload good fine we're getting somewhere okay this is looking a bit better i'm not sure how i feel about these thumbnails and i also don't want to display author information on a single post so that means
oh let's just get rid of discuss why do we have discuss at all how do i get rid of discuss is it this no that's sumo where where are the discus comments being added i think it's here there's a ton of negative space on the right at the moment yes there is um it actually wouldn't it wouldn't actually be that that much negative space there is like a newsletter thingy that i need to tweak a little
bit and also this will show featured posts so in theory if i feature one of these posts if so if i say posts i don't know um why i skipped last week's email or something stupid like that and if i if i feature it feature this post in theory this should actually come up in the sidebar yeah featured posts there we go what about featured pages will that work if we say courses and feature this page
updates no featured pages isn't really a thing in this theme yeah specifically it's featured posts that we want so in theory if i go posts um i don't know 68 bits answers listed pieces of life advice let's feature that one as well ah okay so it does show it does show the thumbnail and let's feature another one like i think if i have three posts featured at any given time i don't know homework for life something
like that feature this post boom boom boom there we go get rid of the bottom line in link's title what do you mean what do you mean get rid of bottom line in the links title guys everyone who's asking i'm using ghost to create this website and you can find a link in the video description on youtube and on twitch i think okay now the other interesting main main interesting thing that i need to do is
actually i need to when you hover the title what title i like this one you don't want you don't want you don't want the underline on hover you meant the other line on hovering oh i don't i don't mind it so much it's a mine minor thing at the moment okay let's see what else can we do as like a quick fix i actually want to refresh the cache for this i should i should actually do
this in incognito this will look better okay so let's change this near the newsletter thing how do i change this newsletter text oh interesting um edit so you're saying i can edit the translation file so we say locales let's see disable discuss now let's keep discussing why not commento although although i want yeah i i do want to switch it to momento that would be interesting yeah let's let's actually use commenter rather than discuss so we
want poster hbs and replace line 40 with commento great that's fine i can live with that um so let's see what this looks like now if i delete and compress and go to my design upload a theme grab crabby oh upload a theme grab crabby overwrite i feel like i've definitely signed up to this before no i think i did let's use safari sorry tc waters mate i i do apologize that i didn't see your message
can you uh post it again please yeah i want this yeah you know what start my subscription why not okay oh wow stripe has a bidding thing man like within it now it's awesome perfect this is actually exactly what i want incredible okay so i mean does this actually work let's ignore to get help in good lab safe changes okay now in in theory this should just work so i hope that now if i look down
we should have a commenter comments ah powered by commenter testing add comment log in with something perfect okay i'm not a huge fan of the display of this but presumably okay i'm not a huge fan of this background color let's change the background color what should we change it to guys variable color white what the frick is variable color white um i feel like this is background gray oh hello what do we reckon how do you
guys feel about this gray kind of background yeah the second needs to be scrolled horizontally i think what we're going to do is we're just going to reduce the number of these categories and so we shouldn't have too many to to actually actually display this this gray is a little bit too gray it does have a tinge of blue to it but maybe hmm what do you guys reckon i like it i think we should make
it whiter what if we just fffed it no yeah i don't know i guess it's fine i think it's the the thing i just find a bit weird is that the text seems to be on a sort of very gray background any thoughts like normally you would expect like a blog post to have like yellow oh you're right i actually should turn up night shifts oh hello oh that's very blue that actually looks fine yeah okay
let's put light shift back on so there we go that's fine we won't worry about the colors too much because night shift um pastel background maybe no definitely not sorry finger ah little chowdery thank you for that f8feff let's try that oh that's interesting it's so this is our deal suggestion and this is the previous one i know mate i quite like your suggestion i do quite like your suggestion the thing is it looks basically identical
to yeah oh they'll mate we might go with that it looks a bit boring it needs to have a bit of contrast ammo yeah i mean the gray was nice so this is what the theme looks like with with the right sort of um live demo like this doesn't look too i think yeah it doesn't look too bad once kind of it's a bit more fleshed out looks pretty good yeah and you can always yeah that's
fine crabby navigation newsletters that's all right james kevin i was wondering if you do some kind of mentorship program for med students doctors wanting to do something not really um but if you have any suggestions for a mentorship program email me uh we can talk about it you okay lah all right what's giovaccio saying fff1e5 let's try that lol absolutely not mine is pain faded gradient now i love that um i think this is this is
fine for now now let's change up some accent colors changing colors with css variables use code injection okay so i could root color brand let's just yeah let's copy all these anyway to code injection just so i've i can change them if i want to will this work within will this work within cold code injection so if i say color brand is i don't know red surely that's not gonna work oh it does work fantastic okay
so guys what should the brand color be that's the question that is the question what about this this is sort of the color of my logo which is so i think brand color shows up on these quotes this sort of kind of blue or do you think it's a bit too desaturated what was it before thomas i'm live on youtube and twitch and twitter thanks to restream.io yeah and then we need to have like a decent
brand color and i currently don't know what that's going to be but at the moment i've said it i've just said it to the color of the logo go go down again so we see the lines um that would be like it doesn't really come on does it i mean it comes up occasionally like if if i've done a block quote yeah it's just not it doesn't appear that much oh god the twitter display of tweets
looks absolutely horrendous that is that this looks like copy paste off yeah it's awful commenting feature looks pretty awful because there's no basically just because of the padding you know what let's just add some padding to this and then it'll just look immediately better so let's find commenter main area and let's just say padding 20px there we go automatically much better 30px that's the padding just extra space around it yeah so there's no padding there's a
width padding just look as a quick fix to make it look slightly nicer yeah can you make the background not white anymore uh for this thing yeah so you wanted to to blend in you wanted to be the background to be transparent yeah um it would be a bit weird because like all of the it's like the post is sort of on the background and then everything else is like a sort of a widget or a
sort of a card on top of it uh the videos are part of the post okay because they're included in the post the tweet would look so much better if it did not have that white padding yeah i agree the tweet is a bit weird um where did the tweet go yeah this is a stupid display i don't know i don't know why this is so terrible uh tweet of the week it's because the embed card
for some reason yeah something like yeah that's much better that looks cool now here's the girl in the background that's my housemate sheen hello the brand color only seems to pop out against the blue it's really hard to tell okay yeah i'll think about brown color later i think okay let's see what else are the bits that i actually care about optimizing this is pretty cool i think is it i think it is kind of nice
to have thumbnails for this stuff okay i don't like the quote display i like this i like this i like this stuff i wonder if body text should be bigger also i feel like letter spacing and headers is not currently what i want where's my letter spacing oh no it is fine yeah i don't know man i'm not a hue i'm not hugely bullish on quotes are absolutely huge yeah the quotes need to get sorted out
let's sort the quotes out some block quotes for some reason has this ridiculously i mean i think that's fine 400 border top yeah i mean that's a brand color that's fine font size 32 32 is a bit excessive i think 24 sound looks just looks better and let's say line height 36 yeah that looks pretty good so let's inject some more code fine oh why did that not update media men with that block quote font size
line height on oh yeah that is pacing no no no no not a spacing font just generally block quotes font weight needs to be 400 and font size yeah block code 400. cool that's fine well done good let's see how this looks like on mobile what the hell that's all very weird that's fine yeah i feel like block code by default should be 18 18 and 26 28 anything 18 and 28 by default so should we
say there we go so now this should be fine and mobile good and it should be fine on big as well because it's updated make that twitter full width yeah you're right i should question how do i do that because this is like an embedded card it's like literally an embedded type like iframe ah tweet rendered why is the why is the width being constrained i think oh it's been constrained by kg embed card minimum with
100 i mean oh yes yeah guys help me out why just step on streams on a regular basis yes i am that's a plan that is the plan oh why the hell is this twitter got a max width 550 set like who is doing that twitter tweet rendered this this just doesn't make any sense unless you were going to create like a new card out of it no but this just like genuinely doesn't make any sense
why the hell is max with 550 how does it display on mobile okay so it looks absolutely fine on mobile so what's happening on mobile on mobile we still high display yeah we still got max weight 550 but obviously when it's on mobile that's fine no it says what this is stupid like why would you why would you hard code a max width into this so if i do a find partials uh okay where is this
being hard coded is the question so if i do find max with 550 pixels it's not in any of these files okay so if i change that to max with a thousand pixels will that work okay that does work but then um why does this stupid twitter iframe only go is this like a thing that twitter says twitter embed 550 ah damn okay embed twitter parameter reference the width the maximum width should be between 250 and
550 for twitter i see so you're not allowed to have a tweet that is full width this makes sense i'm actually not allowed to have a tweet that is for it that seems a bit silly um only if you use the api but that's a bit too much here i think the way this wants to display is just a bit stupid cajun bed card we've got the twitter thing which literally does have if we just say
a thousand pixels here and if we set this iframe to also be a thousand picks which we just say with 100 max or we'll just delete the max with property delete the with property document html bloody app god okay here we go i mean yeah okay so you have to actually change the contents of the twitter iframe so just place it left and move on yeah fine okay i'll just align it left and move on you're
right you guys are right yes that's twitter okay so how do i just align this thing left display flex box align left no that's not it align items left yay okay so i can say a line items left dot kg in bed oh does that is that gonna be annoying though will that screw other things up if i align items left doesn't look like it you can remove the twitter card border so it seems like a
full width i'm not sure what you mean what do you mean it should be justified content flex start just try line left and do something else for once fine all right then let me just get rid of this background behind this tweet because it's annoying me it's definitely figure claw oh god guys where the hell is the background color for this oh there it is you know what let's just do that oh but it's not that
i don't want the embed cards it's just oh it means you can move the gray line surrounding the tweet ah that would change things how the hell do we remove the gray line surrounding the tweet because that would be awesome yeah how do i remove the border remove the credit card but you have to insert a new code line what do you mean kg embed card and background kind of noun but i'm i'm worried that kg
embed card is being reused in a lot of other things as well okay let's forget about that the tweet thing is fairly fairly minor for now let's do some more major things so i think now we should actually start thinking about structure and stuff and oh of course yes you need to see my css properties but you see me instead why don't we put me over here that'll probably make me easier but the question is what
am i targeting like which property which class am i targeting to do move on okay let's move on um right next thing is that actually we want to make a custom homepage and so what i want to do is let's go sublime and let's say there's like a very specific simple thing here index.hbs home.hbs safety i swear there's an easy way to do this is it just home to hbs it's important to make note of page
url sent mine to home the novelty of this character was doing another page rather than being static html baked into the template file that's a very good idea follow the guidelines for custom home page you'll be making some changes add a home to hbs that combines index plus post copy all of index and a few sections from post here's what your template looks like you can tweak it to your liking custom routes labs ah okay got
it this makes sense so let's create a new page new page home and let's set that as home testing so if i publish template okay let's just publish this as a new page now what does it do is say there's a page.home template using template home sure let's do that so if i say uh oh so i need to edit my routes.yaml how the hell do uh download currentroads.yaml what does that say oh god that's a
bit annoying fine let's uh where's my one level further up i think i wanna oops nope not that i xcode isn't installing thank you that took a while the hell is the right gamma file settings oh there is okay so you're saying okay so let's get rid of that so what i want to do is ghost is free to use but you have to host it yourself or you can use ghost pro hosting i use ghost
pro hosting link in the video description if you want to check it out um but no it is free if you want to self-host it just if you don't want to self-hosted then you do pay for it so i think what is a default ghost default routes yaml file what does that look like collections that permalink slug template index oh okay i've got it what if i oh nice okay so i can do that i can
upload that to rods.yaml upload around start yemo so let's go to whoops now holding zone up code which i can add to my favorites content settings roots.yaml okay good now hopefully when i refresh my website stuff should break 404 page not found good that's what i want it's using data page it's using the template of home okay let's just add a home to hbs file so themes crabby index.hbs default loop and pagination if i just make
a home to hbs uh default okay what's the next stage here so it's default loop and pagination is a part is it partials loop through to posts okay so i actually don't need so if i make a new file um you file bang save home.hbs and just get rid of the loop no because actually that loop needs to show the page content for each post visibility uh will it will it show me okay let's just let's
just do that and then we'll take it from there so if we compress this uh design load crappy overwrite come on why not use wordpress because i hate wordpress it's just slow your squarespace much easier nah not about that squarespace life why is it still saying four or four page not found it shouldn't be doing that uh data patient home template home to the home page um hmm home okay that's clever collections i mean is it
still working with what the toast i've currently got this is all fine it's just that okay what's pagination if i just write nasty i don't understand it's saying page not found just happened occasionally why is it saying page not found i literally have a page called home which should be accessible oh why the hell is it not what the hell is going on this is stupid don't say the s word why is this not working it's
literally saying four or four page not found but okay so this page works it's just specifically the home page that doesn't that's are dumb dumb why you so dumb [Music] uh this data page.home template is home interesting let me slash blog what is not doing here's one let's say multiples it does have so what if i do slash blog template index filter tag by podcast and i get rid of things that are tagged podcasts and things
in a tag book book and podcast taxonomies tag author so maybe this is what i want that but that that changes the urls of everything maybe that's fine maybe i don't actually care hmm maybe it's a time right now the uk uh it's 10 41. training slash yeah i don't know how someone do this because this is actually quite fun oh okay will this be the thing that changes it that's a bit city no it's still
not found but in theory this is now slash block slash the value of delight okay i mean that's fine but four or four page not found this is absolutely did you accidentally like hashtag someone hashtag it as in i've been muted yeah i don't think so what if i just change it to home too as the slug will that work ah see so that works but specifically if the slug is slash home at that point it
comes up for a full page what did you accidentally change the url um no okay what if i get rid of this that and if this if this then works it would suggest that the issue is with the routes.yaml what is there some kind of weird redirection stuff going on okay good hex codes installed they do some redirects i shouldn't be doing anything uh interesting oh some oh i think it needs to have page.hbs because given
that homedate is the thing maybe it just needs to be this maybe that'll work so if i go to unturned content themes crabby delete compress settings design upload crabby overwrite come on please work please oh it didn't work i was so sure that was going to work oh i mean that does work maybe it's just a caching thing okay but now what's happening is that it's not recognizing that what the hell is going on here let's
look at okay so view page why do they immediately lead to four or four right it recognizes that this home page is a thing and yet when i wanted to show me it's coming up with a 404 i don't understand i actually don't understand what's going on right surely it's not the fact that i've got i might just be i've got too many blank spaces is that it surely not that can't be it that would be
ridiculous let's upload a new rants.yaml and see what happens template index oh you're kidding i think this was it i think this actually was it okay okay just had too many spaces in it mental all right fine okay cool so connie that's working now the thing that's not working is this so if i just replace it with this and go home boom finder crabby compress design upload theme crabby goes up overwrites this is absolutely absurd this
actually is ridiculous what the hell is going on i don't understand i just want to make a custom homepage why is it so hard underwriters do you need a double slash okay so you know this definitely does work let's try again oops no rename compress upload [Music] okay please work please work okay this is a good start it just means that stuff is happening so in theory focus home that brings me back to index fico incognito
why is it that it why is this some kind of weird ass redirect going on uh it's all based on spaces there's no excess fat here collections blog permalink template index template home filter blah blah blah blah data page. now my mouse isn't working the hell makes my mouse not working run out about there we go ctrl f5 ah elite is the person you have an issue with the post i have a page called home that
has testing testing one two three on it three four on it i have hit update on it it's at audible.com home and when i go to that url it just doesn't work why is this happening um there isn't any content on this freaking page let's all look for the plugins for the lull okay let's find this guy what if it's from post or hbs what about if we just do this [Music] force reader may be cached
yeah maybe you're right how do i force a reload in chrome guys is that command shift reef command shift r well according to someone coming from the post remove test post and code hold shift view force reload shift view force reload this page now force reloading doesn't do anything come on control command control r do you mean command shift r f5 isn't isn't a thing on mac shift plus reload button i mean i'm reloading my cache
nothing is happening sure inspect inspect element disable caching settings i'm trying to figure out why this isn't working the latest is empty no why this page is empty yeah uh are we saying disable cache no disable or disable cache or dev tools is open okay no it's still not working like literally every page works it's just that the home page doesn't yeah i'm on it and it's just that it's just like a blank page with boilerplate
trying safari okay let's try safari something's going on here something is a foot it must be to do with here so when you hit the page that's called home it uses template home and gets the data from page.home that's fine now home.hbs is a page oh interesting maybe it's this data post page.home maybe that's it that's what someone suggested on the internet so now if we re-upload rads.yaml no labs upload roots yes oh my goodness whoever
did this said this on the internet they were right okay now we're getting somewhere now we are freaking getting somewhere guys we've got this so i don't want related posts i don't want commento i don't want upgrade cta i don't want a horizontal rule at the bottom i don't want any of those labs member stuff i just want a standard home page i don't want the cards at all i don't even want tags i just want
the content post header and content okay great ah actually this should be page.hbs not post so in theory all of this should work great article post header sections okay this now in theory if i upload update upload this theme it should just work bismillah [Music] hallelujah glory to god okay now the question is how do we display this page without a sidebar oops duplicate default hbs close my eyes and i can see a world that's waiting
up for me that i call my own but it feels like home they can say they can say it all sounds crazy okay so i can i can actually just duplicate this i can say new file default wide to hps what because i don't care so i can say default wide now they should get rid of the sidebar and that should allow my home page to rest in peace provided i compress and upload again oops go
away comment it out all right all right fam nearly done boom great fantastic [Music] [Music] okay now the question is what do we want the content on our homepage to be because i don't care [Music] hmm ah who was it joel's digital garden let's have a look what's he doing [Music] [Music] actually do i want him to have a sidebar i actually think i do maybe i do maybe i think i've changed my mind on this
actually maybe what i could do is compress upload maybe what i could do is should i buy a macbook or an ipad buy a macbook you don't need an ipad okay you're making me feel like maybe i am somebody okay now actually what i could do is for that page just to keep things simple i could add a picture of me should i find a nice photo of me yeah without the sidebar it does look super
empty i was going for like a minimalist thing vibe but i don't think that's the vibe i want to go for let's find a nice smiley photo of me open arms open arms like this no but no way you're crossing your arm that one facing the camera facing the camera that one yeah yeah okay let's go over this let's go with this one okay so in theory if i just want to save a small [Music] export
now in theory upload page image let's have a look let's have a cheeky look update boom um a weird thing is that this is doing some weird stuff what's it doing to my image this will save and upload instantly and save so much time um yeah if i could do oh um let's see what i've done for um c okay so because i don't care when i'm with my baby yeah why are they why is it
such a large uh wow i drink champagne with kings and queens the politicians praise my name those were someone else's dreams the pitfalls of the man i became years and years they chased their cheers and the crazy speed i've always needed more i remember who all this was for and from now on these eyes would not be blinded by the lights okay good let's just change some foreign [Music] oh so you oh so so do let's
see if this works no oh hello it's a good point all right sunday snippets is at the top and i think maybe we can now call it a night thank you everyone for joining and see you at some point in the near future it's getting quite late it's 11 17 p.m so i think we'll call it a day for now um thank you everyone for tuning in and for all the advice and help been very helpful
very helpful indeed um website is looking alright for now now mostly it's a matter of restructuring things and making sure we've got landing pages for everything so fun times thanks for joining by the way guys people are watching on youtube please follow me on twitch because i stream much more often on twitch than i do on youtube at least that's the plan i don't want to like plug up my youtube channel with these random live streams
so i'm doing lots of it on twitch so you should totally uh join join the party uh maybe we'll do some study streaming tomorrow as well night night