egghead.io Open in urlscan Pro
76.76.21.21  Public Scan

Form analysis
1 forms found in the DOM

#

<form action="#" role="search" class="sm:border-r dark:border-white border-gray-900 dark:border-opacity-5 border-opacity-5 sm:w-auto w-full">
  <div
    class=" relative flex dark:hover:border-white dark:focus-within:border-white hover:border-gray-900 focus-within:border-gray-900 border-b border-transparent pl-2 hover:border-opacity-30 focus-within:border-opacity-30 dark:hover:border-opacity-30 dark:focus-within:border-opacity-30">
    <input name="query" type="search" aria-label="Search" placeholder="What do you want to learn today?" autocomplete="off"
      class="dark:placeholder-opacity-60 placeholder-opacity-60 dark:placeholder-white placeholder-black bg-transparent sm:text-sm text-base sm:w-[230px] w-full h-12 focus:ring-0 border-none p-0" value=""><button type="submit"
      class="p-3 flex items-center dark:hover:bg-white hover:bg-gray-50 dark:hover:bg-opacity-5"><svg aria-hidden="true" class="" width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <g fill="none">
          <path d="M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg><span class="sr-only">Search</span></button></div>
</form>

Text Content

Holiday Sale: Save 50% on egghead membership for limited time only.
Become a Member →
egghead.io
Browse
Search
Build Your Dev Portfolio
Sign in
free


BUILD A DIGITAL GARDEN WITH NUXT AND NUXT CONTENT MODULE

INSTRUCTOR

Ben Hong
 * Vue.js
 * Nuxt.js

24m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.6
25
people completed
Published a month ago
|
Updated a week ago
Bookmark Download RSS
Start Watching

When you are first building your blog site, choosing what content management
system you want to use can be challenging, and choosing a new framework can be
daunting. They can be overwhelming and have a large learning curve.

Open up your knowledge of a powerful Nuxt module with Nuxt Content! Nuxt has a
low barrier of entry, and you don't have to fight with a content management
system or API keys.

In this course, you will learn how to create your blog with just Nuxt and a
folder of markdown files. Ben will take you from creating your Nuxt project from
scratch all the way to deploying your digital garden on Netlify.

Ben Hong is one of the core team members over at Vue.js and has developed this
course to give you a concrete understanding of Nuxt Content and how to build
your blog efficiently.

FREE COMMUNITY RESOURCE

A Community Resource means that it’s free to access for all. The instructor of
this lesson requested it to be open to the public.


WHAT YOU'LL LEARN:

 * Create a blog with minimal overhead
 * Store files in as flat a structure as possible
 * Integrate local data and a git workflow into a blog site
 * Manage post metadata with frontmatter
 * Filter blog posts by tag


LEARNER REVIEWS

 * Star icon$$$
   Star icon$$$
   Star icon$$$
   Star icon$$$
   Star icon$$$
   What did you like about this course?
   
   Well-rounded course showing Nuxt in minimal time.
   
   The result of the course is a bit quick-n-dirty (lacking linting, typescript,
   tests). Would love to know some best practices (as you did with asyncData vs
   async created)
   
   Learner
   2 days ago
   
 * Star icon$$$
   Star icon$$$
   Star icon$$$
   Star icon$$$
   Star icon$$$
   What did you like about this course?
   
   I really enjoyed this course! It was great to go from nothing to deploying in
   such a short time. I really liked learning about dynamically creating pages
   for my content. It's something I've been trying to figure out on my own and
   struggling with but this course made it easy! :)
   
   Lucas
   a week ago
   


YOU MIGHT ALSO LIKE THESE RESOURCES:


DEVELOP BASIC WEB APPS WITH VUE.JS

Greg Thoman • 16m • Course

Gain a basic understanding on how to construct components and nested components
and see how Vue reactively keeps the DOM up to date when data is changed.


BUILD A SERVER RENDERED VUE.JS APP WITH NUXT AND VUEX

John Lindquist • 37m • Course

Start with an empty app and walk through how to use Vue.js for building the app,
Nuxt.js for organizing the app, and Vuex for managing state.


CREATE A NEWS APP WITH VUE.JS AND NUXT

John Lindquist • 36m • Course

You will learn how to create dynamic pages for each section of your application
and load, store, display, filter, and style the data.

CREDITS

Maggie Appleton
Start Watching

FREE COMMUNITY RESOURCE

A Community Resource means that it’s free to access for all. The instructor of
this lesson requested it to be open to the public.


COURSE CONTENT

24m • 10 lessons

 * 1
   
   Create a new Nuxt project
   2m 33s
 * 2
   
   Setup and configure Nuxt Content
   1m 39s
 * 3
   
   Explore Writing Content in Markdown Files using Nuxt Content
   2m 52s
 * 4
   
   Fetch Content using the Created Lifecycle Hook
   2m 12s
 * 5
   
   Use Frontmatter to Add Metadata to Notes
   2m 40s
 * 6
   
   Create Dynamic Pages to Render Content Pages
   2m 57s
 * 7
   
   Statically Generate Notes using asyncData
   2m 40s
 * 8
   
   Use sortBy to Sort Notes by Frontmatter Keys
   1m 39s
 * 9
   
   Use the computed Property to Filter Notes by Tag
   2m 13s
 * 10
   
   Deploy Your Digital Garden on Netlify
   2m 46s


YOU MIGHT ALSO LIKE THESE RESOURCES:


INTRODUCTION TO CLOUDFLARE WORKERS

Kristian Freeman・36m・Course

Become familiar with the Workers CLI wrangler that we will use to bootstrap our
Worker project. From there you'll understand how a Worker receives and returns
requests/Responses. We will also build this serverless function locally for
development and deploy it to a custom domain.


CREATE AN ECOMMERCE STORE WITH NEXT.JS AND STRIPE CHECKOUT

Colby Fayock・1h 4m・Course

This is a practical project based look at building a working e-commerce store
using modern tools and APIs. Excellent for a weekend side-project for your
developer project portfolio


PRACTICAL GIT FOR EVERYDAY PROFESSIONAL USE

Trevor Miller・1h・Course

git is a critical component in the modern web developers tool box. This course
is a solid introduction and goes beyond the basics with some more advanced git
commands you are sure to find useful.

Build your Developer Portfolio and climb the engineering career ladder.
 * Search
 * Articles
 * Talks
 * Podcasts
 * Topics
 * Machine

 * Pricing
 * Store
 * support@egghead.io

©egghead.io
Terms & Conditions


LIGHT MODE