Build the Fastest Blog Website with Markdown Content | Hugo Static Site Generation Tutorial
HTML-код
- Опубликовано: 25 июн 2024
- SEO-friendly and fast markdown blog app with Hugo static site generator.
Get Hostinger Discount: hostinger.com/lamadev Coupon Code: LAMADEV
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code: github.com/safak/markdown-blog
Markdown Cheatsheet
github.com/adam-p/markdown-he...
Join Lama Dev groups
Newsletter: list.lama.dev
X (Twitter): x.com/lamawebdev
Instagram: / lamawebdev
Facebook: / lamadev
Discord: / discord
00:00 Introduction
02:56 Hugo Tutorial (Static Site Generation with Frontmatter and Markdown)
13:54 Markdown Syntax Tutorial
17:17 Create your own theme in Hugo (Hugo Layouts, Partials)
30:33 Responsive Layout Design
34:37 Hugo Navbar and Footer Design
44:00 Hugo List Page Design
59:10 Hugo How to Create Post Categories and Authors?
01:04:52 Hugo Single Page Design
01:26:30 Hugo Category Page
01:30:55 Hugo How to Add Dark/Light Mode?
01:39:20 Hugo How to Add Pagination?
01:44:15 Hugo How to Improve SEO?
01:47:58 How to Deploy Website?
01:51:22 Outro 
Наука
I'm always happy to watch a lamadev tutorial on a technology I don't use. Love your teaching
You are the best. I was looking for this tutorial like 3 months
Lama Neva disappoints back to back awesome content
I Love your Tutorials lama dev ❤❤❤
Awesome tutorial my friend
I was actually thinking of creating a blog site using nextjs because of server side rendering + it will be Seo friendly. React or static sites are not user friendly but your tutorial right now might have solved this problem too ( haven't seen the full video. )
Thank you for this great tutorial 🎉❤
I love your project base teaching
Hi Lama! I love your tutorials! It's always fascinating to watch ❤️. I hope you could also make a tutorial about the Web-Based Automatic Call Distribution System for Call Centers. That would be awesome! 😊
Right on time brother, right on time.
this is my mentor, my eternal love, I'm working on fiverr course at this exact moment, what a beautiful course 😍😍😍😍😍❤❤❤
I like your tutorials so much
amazing tutorial!
Great tutorial! Thanks you
You are awesome! Thank you so much!
Hey Lama, thanks for this tutorial. However, an observation I have here is about writing new blog posts. Each time we write a new post, we would need to go to the hosting service and delete the content of the public_html directory, and re-upload the latest files from local. It is totally repetitive, so can you please make an additional small video on using web hooks or GitHub actions, or something? So when we update from local/VS Code and "git push", the site would be updated automatically. That would really complete this awesome tutorial.
Absolutely needed! 🎉
Thanks for the tutorial also
Great tutorial! Thanks for showing SEO guide and deployment process.
Please, consider including guide on relational databases and automatic deployments after update of github repo (after each 'push')
You can do it with github-actions
📝 Summary of Key Points:
📌 The video demonstrates how to create a fast and SEO-friendly blog website using static site generation with Hugo. It covers setting up hosting, creating content, designing layouts, and adding styling to the website.
🧐 The speaker shows how to add a right sidebar to a web page using the CSS property "position: sticky" and how to add an image horizontally to the sidebar. They also explain how to create a category page and display the category name and the number of posts belonging to that category.
🚀 The video covers adding a toggle component to switch between light and dark modes using JavaScript. It also demonstrates how to add pagination to the post list and category page using the "paginator" template.
🚀 To improve SEO, the speaker adds metadata to the website, including the page title and description. They make the metadata dynamic by using the post title and description for individual posts and a general description for the homepage.
🚀 The video concludes by demonstrating how to deploy the website to a server using Hugo and mentions that Hugo generates pages quickly, even for large websites.
💡 Additional Insights and Observations:
💬 "Static site generation is a great way to create fast websites because it doesn't require a database connection and the pages are easily indexed by search engines."
💬 "Hugo is an open-source framework that provides a folder structure for a static site and allows for easy content creation and customization."
💬 "Adding a right sidebar using the CSS property 'position: sticky' can enhance the layout and functionality of a web page."
💬 "Implementing pagination can improve the user experience by breaking up long lists of posts into manageable pages."
💬 "Adding metadata to a website can help search engines understand and index the content more effectively."
📣 Concluding Remarks:
This video provides a comprehensive tutorial on creating a fast and SEO-friendly blog website using static site generation with Hugo. It covers various aspects such as setting up hosting, creating content, designing layouts, adding styling, and improving SEO. The demonstrations and explanations make it easy to follow along and implement these features in your own website.
Made with Talkbud
Hey buddy, I am so impressed of your video. By the way, may I know the colorschemes you use in your editor?
I would love if you could make a tutorial on CMS integrations with Hugo, like Forestry
Dart and flutter are also using same markdown approach.
Another blog on astro will be also be cool i think
Thanks
Hey, Lama thank you very much but during the observation I noticed you missed the search button configuration.
Which theme do you use?
can we change the URL to something other than file name?
anyone know why there is a need to check for relative categories path in catagories/list.html and repeat the code from _default/list.html? can I just use the code for categories only?
Hello, will you please make a social web app using prisma mongodb Nextjs and also user should be able to upload the profile picture?
hello Lama ❤ please could you make it a role based like admin and user stuff for production grade projects within prismA , PostgreSQL and typescript within Nodejs Api please 🙏
thanks but i have a question, if i have 100 blog posts, i don't want to have 100 files on my project, is overkill. Can i store my projects in json and inject my content without create new markdown file in content folder ?
Thanks for a good video. How to add an email subscription option for this?
mailchimp
Theres a better way to write the MD without write markdown? Something like edit notion or medium
Anyone tried the Hostinger's promo? It shows at 230$ to me, not 150$ like in the video. Is it because it's technically not black friday yet?
Please make next js social media app tutorial
👍
Can u make app using Sketchware?
Can you use python as a backend for Hugo?
Which are the requirements of knowledge to watch this video?
Yeah. I don't even know what to expect here in this video.
Can you build a blog with vanilla javascript instead of using react so that we can understand better. For the back end and authentication, you can use firebase. In this way, we can understand frontend deeply
First again 🫡
11@eleventy it s faster and better