JAMstack Tutorial - Full site using Netlify & Hugo
Vložit
- čas přidán 26. 08. 2024
- In this tutorial you will learn to build a client side application using modern tooling. You will build a restaurant site using Netlify and Hugo. Only basic knowledge of HTML, JavaScript, and CSS are needed.
🔗 Live version: tasty.netlify.com.
🔗 Clone project: bit.ly/tasteTh...
🔗 Github: github.com/bdo...
*Note on continuous deployment
After cloning locally you can now push up all your changes to GitHub. You do not need to manually push your changes to production. Netlify’s Git integration handles the continuous deployment.
⭐ Course Outline ⭐
⌨ 1:17 - Cloning the project - bit.ly/tasteTh...
⌨ 3:47 - Introduction to Hugo - gohugo.io/
⌨ 5:18 - JAMstack explanation - jamstack.org/
⌨ 10:08 - Adding the menu collection
⌨ 14:57 - Adding the CMS - www.netlifycms...
⌨ 21:12 - Adding the drinks: Part 1
⌨ 22:03 - Adding the drinks: Part 2
⌨ 23:03 Adding the image gallery
⌨ 27:07 Collecting form data
🐦 Creator Brian Douglas on Twitter: / bdougieyo
-
Learn to code for free and get a developer job: www.freecodeca...
Read hundreds of articles on programming: medium.freecod...
Back watching this a second time, really high quality work. Thanks,
Here at my Garage, I suddenly remember One person, lmao
KNOWLEDGE
Where’s his Lambo and his books that fill him with Knaaaawledge
Thank you! That was an amazing video! I would skip the first 5 min though.
Great analogy, Thanks!
great stuff, mate!
Hi is it possible to create the website with Amazon Elastic Container Service (Amazon ECS) using Netlify & Hugo.
Has no one run into ANY problems? I am getting into so many issues with just npm install. I cannot figure out how to fix em. What are the prereqs for this? what do you i need to have installed just to get it up and running?
Yes. on the first npm start I got an error for transform-react-jsx not being installed. Went to the docs and figured out how to install that only to get a new error. [sigh]
I ended up learning Hugo myself. Thinking of making a magazine/blog. Will be implementing Netlify CMS.
Thanks for a great overview! I followed along and everything works locally. CMS works and Netlify is connecting w content from GitHub as well. 'Food', 'Drinks', and 'Gallery' content don't show up when viewing project from netlify. Can't figure out what I missed. Any suggestions?
REPO: github.com/perossing/JAMstack-restaurantSite-tutorial SITE ON NETLIFY: geologist-torpedo-60652.netlify.com Content doesn't show up on site, but does work locally. CMS works fine. Thanks!
Perfect! I added that setting, then also had to do 'Trigger Deploy'. Everything works now! Thanks so much for the super tutorial. Can't wait to do more with this!
Sweet. Thanks!
Can you replace Hugo with Angular Universal?
Thank you for the nice 3-series tutorial on the Netlify blog, Brian. However, I really struggle to get this to work when I create my own project based on the victor-hugo repo. I'm trying to follow the official Hugo docs to get it going, but I can't get this to work at all.
When I am trying to create a drink page, everything gets rendered in the food page not the drink page.
Yeap I confirm there are some installation issues when doing NPM install using the github repository in the video description area, haven't found out how to solve them yet....However! if you clone the repository that appears in the video 'fakeass/hug-restaurant-tutorial" it actually works, don't ask me why ! :-)
I'm having a serious problem with caching and I want to disable it for my css files. I make some changes on my css files and I see their hash names are changing locally in my public folder. But when I deploy my site I see the old version of css file. How can I fix that?
Can't figure out what's going on with the gallery. It creates a path to my image of "/src/img/gallery/sushi-rolls.jpg" for example, but only finds the image at "/img/gallery/sushi-rolls.jpg" but I don't know why it's finding it there or how to change that.
I follow your link and when I click Save & Deploy... every time on Netlify it says "Deploy Failed"
Sorry, but from the git clone and running `npm install` - I got into errors. Then `npm start` - even more errors :D ... Have you tried this at all on your own?
yup, me too ,
just want to know which software you are using to record screen or create youtube videos ?
I keep getting an error for 'media_folder' wasn't found when trying to load the admin section. I've looked at the documentation on netlify's site and keep trying to get the path correct in the config.yml file but it won't load. Any ideas?
12:50 what are you using? Vim?
yes
I have kinda opposite question I can't find any info about - when is JAMStack not good fit for a project? I'd just guess it would be for social networks or super-dynamic sites where content is updated faster than build tools can keep up.. I am now in the middle of a similar project where I think about splitting content to two parts: static (mostly added by admin) and dynamic (comments, likes, posts of users)
side note: I was so surprised you are black :D knowing only your voice from JAMstack podcast. Your calming voice was last thing I expected when seeing the thumbnail :D
I'm having some trouble with the front-matter stuff. I installed it with npm but it's still not showing the content after saving, any idea why?
so I just found the error! I name the "food" folder with a capital F when I created it!! Changing it to a small f allowed it to route to the correct location and solved my issue :)
I can't login to the admin page. When I go to that url, it takes me to the github login, but after that it just takes me to the index page of the site.
Nevermind, For anyone else who runs into this. You need to make sure your callback url is: api.netlify.com/auth/done
any more themes?
What info do you provide github when registering a new Oauth app e.g. Authorization callback URL...
I cant access the CMS
Is this still relevant any outdated information?
"fakeAssBrian" LOL
I'm running the lastest version of node and npm. Everytime I run "npm install" in the repository.
I'm pretty new to NPM so any help would be appreciated.
I get the following:
"npm WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated gulp-util@3.0.8: Use individual modules instead of a grab-bag
npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
"
yup
[17:15:28] Starting 'videos'...
[17:15:28] Starting 'images'...
events.js:160
throw er; // Unhandled 'error' event
^
Error: spawn hugo ENOENT
at exports._errnoException (util.js:1020:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:197:32)
at onErrorNT (internal/child_process.js:376:16)
at _combinedTickCallback (internal/process/next_tick.js:80:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
problem sloved after installing Hugo
have problem to run "npm start" on ubuntu server
here is my repository : github.com/wenyafan1974/hugo-restaurant-tutorial
I ❤️ U
Site Deploy Fail....This tutorial failed.