My Favourite Way To Make Websites
Вставка
- Опубліковано 28 тра 2024
- Check out Hostinger's BLACK FRIDAY SALE, on now until December 3rd!! Use coupon code CHERNO for a bigger discount ► hostinger.com/cherno
New Hazel Engine website! ► hazelengine.com
Patreon ► / thecherno
Instagram ► / thecherno
Twitter ► / thecherno
Discord ► / discord
Hazel ► hazelengine.com
🕹️ Play our latest game FREE (made in Hazel!) ► studiocherno.itch.io/dichotomy
🌏 Need web hosting? ► hostinger.com/cherno
🔗 LINKS
Hugo ► gohugo.io/
Tailbliss Hugo theme ► themes.gohugo.io/themes/tailb...
Paper Hugo theme ► themes.gohugo.io/themes/hugo-...
📚 CHAPTERS
0:00 - I’m not a web dev
1:27 - How I made the old website
2:27 - The biggest problem with the old site
3:42 - Basically how the web works
4:23 - Static site generators
6:31 - Hugo - my favourite static site generator
7:39 - Full process: making a website with Hugo
💰 Links to stuff I use:
⌨ Keyboard ► geni.us/T2J7
🐭 Mouse ► geni.us/BuY7
💻 Monitors ► geni.us/wZFSwSK
This video is sponsored by Hostinger.
What do you guys think? What’s your favourite way to make websites?
Also don’t forget to check out Hostinger's BLACK FRIDAY SALE, on now until December 3rd!! Use coupon code CHERNO for a bigger discount ► hostinger.com/cherno
Hugo is awesome! We use it at work to enable our non-devs to maintain our company and game websites, just have a staging environment on PRs and deploy from master.
Personally, I like to use my custom lightweight Hugo: Golang with HTMX. No real Javascript needed and has templating possibilities but still computes the template on GET, but it's usually microseconds so whatever.
I prefer in all my projects "Blazor" because i can use the complete c# features, but this looks like a easy and fast way for only displaying information and static data. *thumbsUp
You can pre render all the files during build time so they turn out to be static html pages, but still have modular source code. Plus you can modify it per page basis if you do need some interactivity in a page.
I use Svelte. It may be overkill but at least it’s makes web dev tolerable for me.
Angular for FE, NestJS for BE, this stack is nice and versatile but also gives you good standards to work with.
Would not recommend going through that headache learning all that tech if you just need a static site, its just what I use at my job so just beter to do everything with that
Hugo is a great choice.
I wouldn't edit the files on a remote server through SSH though.
Work locally, push changes to git. And setup a pipeline that generates the website and pushes the generated files somewhere. (Because it's just a bunch of static files it can be easily served by a CDN, now you have a website that's blazingly fast everywhere in the world)
@GC-jm9bt Which CDN do you recommend in terms of price/quality ?
@@mlecz Not sure. For a company I work for we use Cloufront/S3. For personal projects I have used Netlify. There's is Cloudflare pages, so many static file hosting /cdn solutions out there. So pick your poison.
Thanks
If you need to make a website "quickly" this is how you do it, how many semesters of computer science do you want to put into one video because this is atleast 3 classes that I can tell, no need to add git into this video lmao.
I use C++ to do web design in order to cause psychic damage to web devs.
Lmao, madlad
how does one do this
What's so nice about SSG's is that it's pretty trivial to set up CI/CD pipelines in your git repo to generate and deploy the new site when you check in new content.
You address the most common problem of every business owner. Thank you very much. I really hope you follow up with some kind of playlist about this. Kind regards, Cherno.
Just what I needed! Thank you!
I think astro is great for static sites if you want to customize some things.
came here to mention this! I just created my company website using Hugo, and deployed it via Vercel. Practically free.
The advantages of static web makers is more about the writing aid, and the templating.
If it's just for Include functions, Apache has been able to do Server Side Include for over 20 years :) I'm sure nginx can too. And it can include other html files of course, but also other things like current date, variables and conditions, or even bash output if you're brave enough to allow it ;)
As a professional web dev I feel a bit embarrassed, how simple this actually looks compared to the oftentimes crazy over-complicated approaches the webdev industry typically takes. Really interesting to see this being done from somebody that comes from another industry!
Sooooo complicated; but cpp devs also overcomplicate stuff as well… I feel like only C really forces you to be productive
Functional not productive sry
@@MurderByProxy I disagree. The limitations of C sometimes disguise themselves as simplicity, but in turn result in over-complex solutions. For example, making generic containers that manage their own memory in C++ is trivial. In C, it requires Macros, void pointers, or both, and you're forced to make overly-engineered solutions to a simple problem. And you've also brought in more unsafety and sacrificed performance (particularly if you go the void pointer route). Same thing with, say, libc qsort. The limitations force the use of function pointers, which open the door to memory errors and results in a sorting algorithm ~10x slower than a C++ equivalent using templates.
@@lucass8119 zig ftw
Yeah, static websites can be bloated without a need.
Dynamic websites (Web applications) can be complex though, and there is a reason why we've moved on from old tech, it just can't handle the complexity of modern UX.
Back in the old days when web-dev was simple, we widely used server-side includes which basically are just what is needed when one wants a static web-site where html pages are composed from parts included via comment-like tags
=)
Web-devs seem to be lost in complexity, javascript and bloated (mostly javascript) libraries and framework these days. They forget (or never knew) what web servers themselves are capable of (such as simple SSI), or what HTML and CSS actually are capable of without any scripting support (=vulnerability support).
Have to say for static sites, webflow is pretty good. The GUI is a PIA, but once you learn its quirks it makes building and deploying easy. One click publish, preview page, can create reusable markup, and its simple enough I can get a complete noob to update content if required.
You will 100% get annoyed with it, but it works.
This is very good to know about. I wanted something cheap and basic and was doing an HTML template like you and as a dev was annoyed with the code duplication. It's nice to know there's a small step up with static site generators.
And I've been using hostinger and it's been fine too.
I haven't watched the video yet but I went to your website and it seems to work perfectly with noscript, couldn't see much of a difference when I allowed javascript. It even loaded all the images without js which should go without saying but sometimes not even that works nowadays. That is already very good.
That's why it is good to use react as a component system 3:31 to minimize the code and static site generator like hugo
Great tutorial!
Great choice! Nice and simple 👍
I'm glad you didn't go down the rabbit hole that is JS frameworks.
Thanks to your c++ tutorials i was just able to make my golf game more than a 1000 lines shorter, more optimized and easier to add more objects to. Thank you🙏
Is the c++ series complete ? Can I learn from there as a beginner ?
I gave hugo a shot a while back, and the thing that pushed me away was the templating syntax. It's based on golang templates, and honestly, it's the most annoying and confusing template syntax I've ever seen.
I recently tried Astro and I find it much more approachable, flexible, and easy-to-use. It has niche features like server-side rendering (should you need it), as well as the ability to include components from other frontend JS frameworks. It has a JSX-like syntax, which I'm also not in love with, but for anyone that's done web UI, it should feel like home (and it's way better than golang tempaltes).
Component Based sounds more fun than the duplication of the footer, header ....., This embraces the use of component in different pages/ re-usability of the components. ReactJS is a great library for component based approach
Ever c++ dev who ever lived: "I am not a web dev".
For software projects (or any projects that need documentation) I really like Docusaurus.
Fun fact, I found this channel by coincidence on my starting page, makes me remember how I watched your how to program a game tutorial in 2015 when I was 15 years old. Now I finished my computer science studies and working on a startup as the lead developer. I wonder if my life would have been different if I didnt start programming thanks to your tutorials 8 years ago :) thank you very much
damn, I may have a similar story to yours. A computer science freshman that is finding great value in this content
I know you do all the game engine series and all i learned a lot from you there are people on the market who teach three.js which is 3d library for making 3d elements on website and i think you would atleast teach it a little better than others you really go into depth and I would love to see you make something really cool
Thanks!
Right out the gate, it makes me feel good knowing that i knew something that someone i come to for information didnt know lol. I mean its web dev info so its not saying much but with jinja templates, you dont have to repeat html code like headers and footers. legit only just learned of jinja thru a CS50 course so i know its basic but cool to know
i guess jinja is a form of the static site generators that he covers? im still learning but either way he sort of used it the opposite way that we were taught to use those placeholders.
Finally ! A video that gives information that will eventually make us money. These WordPress developers some of us despise are making hell amount of money with just a little effort. ( Haven't watched the video yet )
Great video! Thanks! A thought: what's funny is that when one codes the "correct" way in one language... one has an expectation to be able to code "correctly" in other languages. Spoken languages are that way too; they can help us see the world in a certain way (e.g. Chinese words for numbers). The include concept in C being carried over to HTML is a great example. I still think everyone should learn C or assembly first... then evolve to C++, then C# or Java. Learning the concept of coding to an interface, SOLID, principles, and then design patterns (if doing OOP) as a fundamental approach not an advanced one. Sorry, I got carried away. My thought is the language we learn first have an impact on the way we see and understand the world and around us and how easy it is to pick up a new langauge.
5:30 u can do that with js but js must be enabled and work on the users browser
Dammmmn, this would have been a perfect video to watch for me a couple of weeks ago haha...
Passed up some job applications since they required a portfolio for a core tech role and didn't want to spend ages building one.
Generating static sites is nice and all, but is it really necessary when you can just use simple server-side rendering to solve this issue? I don't feel like having to run a program, that generates all of my site's pages, every time I want to change something is worth it when I can just make a few templates, make the server insert the necessary information by itself, and then to be able to just make changes to any of the templates or other information whenever I want.
It always depends on the type of site that you're doing.
This one can perfectly work this way.
Are you going to finish the Ray Tracing Series?
Can you do a gaphics/engine react video on the GTA 6?
I saw the thumbnail and title and thought: "this has got to be video about Hugo" lol
so, just rename your old site html files to php, then where there is the header, select all, and replace with and create that header.php with just the html of the header. same for footer, upload to server and that's it.
Excuse my ignorance but why is full root access important to you if you're just making a static site? Btw, thanks for showing me Hugo, I just came back to rewatch this before I jump in and start building my own site!
I clicked this thinking I would finally learn how to create a website with a C++ backend
Simple bash scripts also work fine for small websites
Besides markdown, what is the advantage over simply `cat` ing some html bits with a build script? I wouldn't learn a framework just for that.
HTML is a bitch to write especially with styling. There are some CSS frameworks that use semantic html and that is easier but still doesn't cut it. Nothing is as easy, well supported and flexible as Markdown.
Yeah, honestly you made a great choice, the other ones require you to be more familiar with JS environment
Please remove the border from the navbar on the hazel website, or make it only bottom border. Was the first thing that caught my eye. Other than that, interesting video!
how about coding main content, and not the side gigs? two issues: predictive persistent garbage collector (for Java, maybe also c++ and others) and over-riding new and = operators for c++ to make your own memory manager, to check if the pointers still point to allocated memory, and do what is needed to be done. without the programmer needing to bother about memory management, totally transparently. for the garbage collector, you dont need to free the allocation of memory, if its being frequently used by the same blocks of code over and over again. as its typical in a program, to call the same functions over and over again, at least the main ones. either the programmer could allocate a persistent memory for those operations, or the garbage collector could do automatic profiling just-in-time during run time, what parts of allocated memory need to be actually unallocated and what parts of allocated memory should be persistent for continuous usage.
I mean pooling the memory allocations for same code blocks, so you can re-assign them from the memory manager, and then better control how many such memory allocations for the program blocks/classes/functions etc are being used at the moment and over time on average. pooling predictive persistent garbage collection.
As a web dev I'm shocked by the notification of this video
Exactly, I had to move to Hugo too
ES6 modules, HTMLElement property manipulation and some requestAnimationFrame() can go a long way for a website!
When I have to make a website, I use svelte. I like how you can do client side routing and the syntax is pretty good, at least for a JavaScript framework. I just statically compile it and I'm ready to go
Brillant
For static websites, I think hosting on github pages is even simpler, and free. Not sure about the limitations though.
Using a proper hosting service gives you more control.
I was waiting for squarespace ad. Not gonna lie.
Astro is really nice to.
If you are not a webdev, you can use Flask and Jinja in a python script.
Jinja allows you to do exactly what you talk about; you can create a template with, for example, a header and a footer and reuse that html file in every other html file you make
Like a base template you can add content to
Came here to say this. Started using Flask this month for a side project, it's pretty damn good. Lightweight, easy to extend later but very lean and easy to get started with.
How many r’s does Cherno have? Cuz I swear when you say it I hear like 6 or 7
I have two question like why isnt game engine a viable choice for mobile development as they support cross platform
and why dont everything use html or xml and css for styling as standard even for native application
HTML, and even CSS, were never designed to be able to control rendering. You can't write a piece of html or css and KNOW how it will be rendered, even if your web browser is 100% compliant. They are not (by design) PDF. The W3C specifications aren't precise and strict enough.
And that's on top of what users can do with their web browser (or html client), which is pretty much everything. Every decent browser can add custom CSS, or disable CSS, or remove anything but the core body text and images of an article, zoom in and out, and so on. That's how web browsing works for blind people, and for robots like Google indexing bots, by ignoring CSS and re-packaging the HTML content in a way someone with no vision can consume it. That's also how ad blockers work.
HTML (and CSS) never was a rendering language. It's about content, and semantic. Which is why in the stricter and more well defined epoch of HTML history, for example you have no "italic" HTML tag; but you have an "emphasis" tag that is usually displayed as italic. Meaning (semantic) and presentation (rendering) are separated.
@@LiraeNoir i also said XML like microsoft use and whats your take on the game engine for mobile app development
@@ulrich-tonmoya game engine does indeed support cross Platform but at a cost of many missing Features
@@crateer such as?
Don’t be a scrub, build your site in C.
I actually think even this approach is too bloated. 😅😁
I think a static site generator should run separately from the actual hosting. And I think all a static site generator should do, is convert MD into HTML, add a header+footer+sidebar, add the CSS file, add your personal script file (if you have one), make a sitemap for use in the navigation bar, and do nothing else.
You could run that site generator on your pc at home, and just let it use FTP to send the files into a static website hosting service. Because you only need to run that SSG when you're working on your site, so there is no reason to have it running on a server at all.
Thanks a lot Cherno for this awesome video!
By the way, your website has a couple of cookies but no cookie-banner, which means that it should not be available for users in the EU.
Since it is, you are exposing yourself to possibly an hefty fine.
This is the most annoying part about developing a website, but should not be overlooked.
Is he alive? No stream no videos. I think he is building his house!?!?
If you want something lightweight and modular you should take a look at web components
learn how to program in react and make a video, it would be interesting
Sometimes I think things get overcomplicated because people don't really know the tools they already have! This case seems to boil down to two separate "things" that you're looking for: 1) some nice template HTML/CSS as a starting point which already has all the nice design and bells sorted out for you; and 2) some dependency management tool to insert you content into the former, as well as helping to avoid code/content duplications.
Regarding the latter, as an long-time C and C++ developer, I've been thinking about just using the C pre-processing (cpp) for the customization and include part, while _make_ is as simple as it gets for building the HTML files. Dependency management is what _make_ was made (!) for, after all. You can wrap it in a GUI like VSCode if you're so inclined, but it's basically doing the same thing.
Would you make a video on AI in game engine? For 2D.
to be honest, the most intresting part for me was the ssh part , you blew my mind
it should be about web dev for c++ devs😂
NodeJS and PHP are server-side languages. Not designed for generating HTML as you claim, however they can be used to hydrate the DOM dynamically from the backend. Actual client-side HTML generators are typically static site generators like Jekyll, Hugo, the new rust-based systems, etc. Frameworks like Laravel allow client-side and server-side rendering, however lean towards server-side rendering. Frameworks like React, SolidJS, Svelte, Vue - js based frameworks are client-side first and have server-side rendering as an opt-in.
Hello Cherno, which game has the most sophisticated coding baseline in your opinion?
This man needs some htmx
Give us Lapsis season 2 XD
Can you recommend projects to practice c++
You can write anything with c++. Maybe instead of writing that script you would write in python, give it a shot in c++ instead
The last website I created was a simple HTML static page uploaded to AWS Simple Storage Service. It was a promotional site for my game I created a year ago as a response to a russian invasion into Ukraine.
Good job. Thank you for not recommending something php based.
You have got to make an analysis on that GTA6 trailer
The fact you'd advocate hosting a static website on a random VPS vs directly on practically any CDN for a 10th of the price is disappointing.
Sponsorships be crazy 🙄
first one here, hello the cherno.
you can write HTML using a PHP file.
then you can simply create header.php and do
:)
Hi Cherno, I want to say something about what you mentioned in the video as an HTML problem. You can create code entities that you can define as blocks in HTML and place as blocks wherever you want, in a separate file. Later, just by changing that file, the block parts that include that file are automatically changed. You can define it like this:
{%block content%}
some html codes
{%endblock%}
i was going to say the same thing
If im not mistaken this is specific to django no?
@@ShifftC might be, im not sure.
As this is probably Django syntax I suppose you then also need some "django processing tool" to convert it into HTML/CSS files for the web server.
@@ShifftC no, it's not specific to django.
Why wouldn't you make footer in an you will include it as far as I know
IFrames are pretty nasty when it comes to handling focus of elements and stuff like that. Better just to rename all .HTML to .PHP and use 'include(myfile)' to include what you need. Then three lines in .htaccess remove the extensions from the URLs, making for a nice navigation experience.
@@whoshotdk Problem is php is executed dynamically serverside. Static site generators are the way to go.
I'm biased towards PHP. Even if I have a single PHP file (that does the includes) and rest HTML, probably would have been simpler than HUGO. But maybe HUGO adds more than a simple "include"
how about a Vulkan tutorial?
I love you Cherno, you are the person I look up to when it comes to C++. But I'm a web developer of 20 years and this video makes me cringe so hard :P
Though most of the web makes me cringe so hard. Too much crap, and this looks nice instead :)
Can you elaborate? what's so cringey abt it? Mr web dev of "20 years"
@@tubeincompetence Agreed, it looks great! I tend to focus on the code though. Without looking (though I actually just did, to double check) I know that anyone building a site from templates is going to end up with a whole mess of code that they don’t need or is inefficient or is detrimental to SEO. In all fairness, these aren’t major concerns anymore. But I have been doing this a long time and have become stuck in my ways, or maybe it’s just OCD. Nevertheless, a site built with all these things in mind will *still* do better re SEO and user experience if all other aspects remain the same.
@@ramiths8171 To name what I see at a glance, Mr “Doubtful”: Un-necessary HTML for the design requiremnt, very few semantic tags, images aren’t offering files responsive to device, missing accessibility attributes, blocking resource loading.
That’s not to say this is a bad site. I like the design. Code-wise, it isn’t any worse than the majority of sites out there. That’s the problem.
@@whoshotdk The themes, I can concede, will lead to bloat. But in general static sites are a FANTASTIC tool. They can achieve SEO most even multi-million dollar applications can only dream of. And edge servers be damned - a CDN will get you global load times in the scope of 50ms. They're much much cheaper to maintain, too. For sites that don't need to be dynamic, which is shockingly higher than we all like to think, they're simply the best choice in every single way.
gta 6 ?
Frictionless
Sir please make a series on vulkan
Yh i can understand your simple approach. But as a developer, I would still recommend something like Java Spring/boot in combination with a frontend framework like vue (react is overkill, angular in between) not because it i needed or because you would be faster (you are not), but you will learn alot and grow as developer.
Cherno, can u make DirectX guides?
oh boy, I used to run my personal website like this some long time ago... good old memories,......Even implementing CSP, with putting integrity values and all,... Then one day, it was just too much, as the site was growing. So, now I've moved away from this approach.
Tbh I just use react and some nice UI component library
I may not be a web dev, but s exist and have for decades. Also, since you're a programmer, you could just as easily write a short piece of JavaScript to generate headers and footers and src that with a script tag. Probably shouldn't bother since you won't read it anyway and you're set in your ways. I wouldn't be surprised if you have notifications turned off if they're from me.
GTA 6 trailer reaction?
As a web developer turned hopeful software developer, just learning webdev is easier than this lol
BTW... Where's the real video? This is the worst kind of click bait. It actually annoyed me, legit. Please don't do this.
First ❤
Why not talk about the 3 legendary React/Vue/Angular? I think this is the most powerful/flexible interfaces to build your web apps.
Yes, "web apps", not "websites". React/Vue/Angular would just be pure overkill/overhead for something like this.
Why? You can build something rly quick using any of the three. And most of all its super flexible and you can setup it exactly for your needs and future needs.
@@MrTaco1337If you don't know the frameworks then you can't build quickly. Sometimes you just want as close to pure HTML as possible. He addresses this in the video.
As a C++ dev, I'm really disappointed with how complicated the JS brows have made the simple task of displaying some information on a Webpage compared to how it was done 15 years ago. One would assume it would be easier today, not harder.
@@MrTaco1337 Yeah you can build quickly if you already know them. If you have to learn them, it's just overhead. This also doesn't account going into nodejs, bundlers etc. It's also unnecessary overhead for end users to ship so much unnecessary JS.
He needs just a simple website, not an application. The simpler the setup, the better.
O maluco ta no Brasil????
NOOOOOOOOOOOOO not British English in the title!
just rename each page to .php and for each component (header, menu, footer) create a php file containing html and include it. browser only handles html faster for dev and user
That would cause the web server to invoke PHP on every request to generate the HTML response (not considering potential caching optimizations). It wouldn't strictly be a static web site then, would it?
"html doesn't have a way to include other html"
: allow me to introduce myself
Lol, all this talk is so funny to someone who learned html in 2006 xD
Gatsby