How to deploy & host Jamstack app - tutorial & free hosting

JAM is an acronym for:

• JavaScript
• API
• Markup

Let's quickly recall what are these.

Here's a quick recap what are the main technologies used in the Jamstack:

• JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.
• API is the acronym for Application Programming Interface. It defines interactions that allows two applications to talk to each other.
• Markup refers to how you can structure or format content, it allows to organize the look and presentation of all the content that needs to go on a web page.

If you have enough knowledge to get started, let's do this.

There are many ways to generate your HTML resources. Which one you choose is up to you. The three most common approaches are:

• Hand coding
• Static Site Generators
• Site Builders

In this tutorial, I will show how to create and publish a page using the Hugo page generator.

Let's go!

Step 1: Install Hugo

Follow the instructions in the documentation to install Hugo on your operating system.

Step 2: Create a New Site

In order to create a new Hugo site you need to run the following command:

        
            
              $ hugo new site my-hugo-app
          
        
    

Step 3: Add a Theme

See themes.gohugo.io for a list of themes to consider. This tutorial uses the Hello Friend theme.

        
            
              $ cd my-hugo-app
              $ git init
              $ git submodule add -f https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend
          
        
    

Then, add the theme to the site configuration:

        
            
              $ echo theme = \"hello-friend\" >> config.toml 
            </code>
          
        
    

Step 4: Add Some Content

You can manually create content files and provide metadata in them, however you can use the new command:

        
            
            $ hugo new posts/my-first-post.md 
          
        
    

Edit the newly created content file if you want, it will start with something like this:

        
            
              ---
              title: "My First Post"
              date: 2019-03-26T08:47:11+01:00
              draft: true
              ---
          
        
    

Note: Drafts do not get deployed; once you finish a post, update the header of the post to draft: false.

Add cover image and post content, the file content should look like this:

        
            
              ---
              title: "My First Post"
              date: 2019-03-26T08:47:11+01:00
              draft: true    
              cover: "img/island.webp" 
              ---
              
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit vehicula dapibus. Curabitur mi sapien, 
              sodales at accumsan non, cursus non sapien. Sed pellentesque tristique ex ut lacinia. Vestibulum viverra 
              lectus nisi, sit amet posuere odio tristique et. Etiam vel lectus et felis rutrum fringilla eu ut nunc. 
              Maecenas auctor libero felis, vel gravida lacus pellentesque at. Phasellus ullamcorper sodales nunc,
              a varius enim imperdiet ut.
              
              Curabitur non tincidunt nisl, vel imperdiet eros. Proin ut feugiat sapien. Phasellus aliquet luctus luctus. 
              Nam eu ornare tortor, nec venenatis mauris. Aenean vitae ultrices dolor. Fusce et eros vel massa ultrices posuere.
              Maecenas tempus ante sed porta rutrum. Nunc accumsan nunc leo, at imperdiet risus posuere eget.
    
          
        
    

Note: Put the images in the static folder and specify the path to them in the cover parameter.

Step 5: Start the Hugo server

Now, start the Hugo development server.

        
            
              $ hugo server -D
              
              Start building sites … 
              hugo v0.89.4-AB01BA6E+extended linux/amd64 BuildDate=2021-11-17T08:24:09Z VendorInfo=gohugoio
    
                                | EN  
              -------------------+-----
                Pages            | 11  
                Paginator pages  |  0  
                Non-page files   |  0  
                Static files     | 13  
                Processed images |  0  
                Aliases          |  2  
                Sitemaps         |  1  
                Cleaned          |  0  
    
              Built in 47 ms
              Watching for changes in /home/sf/Test-Projects/qqq/my-hugo-app/{archetypes,content,data,layouts,static,themes}
              Watching for config changes in /home/sf/Test-Projects/qqq/my-hugo-app/config.toml
              Environment: "development"
              Serving pages from memory
              Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
              Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
              Press Ctrl+C to stop

          
        
    

Navigate to your new site at http://localhost:1313/. Feel free to edit or add new content and simply refresh in browser to see changes quickly.

Step 6: Customize the Theme

Open up config.toml in a text editor:

        
            
              baseURL = "https://example.org/"
              languageCode = "en-us"
              title = "My New Hugo Site"
              theme = "hello-friend"
              paginate = 3
          
        
    

For example, add the number of posts visible on the page, replace the title with something more personal. Also, if you already have a domain ready, set the baseURL. Note that this value is not needed when running the local development server. For theme specific configuration options, see the theme site.

Step 7: Build static pages

Just use the command:

        
            
              $ hugo -D 
          
        
    

Output will be in ./public/ directory by default (-d/--destination flag to change it, or set publishdir in the config file).

Step 8: Deploy on MDB GO

It's simple. Go to your output directory and call:

        
            
              $ cd public
              $ mdb frontend publish
          
        
    

Note: Since frontend is a default value for publish command, you can run just mdb publish (instead of mdb frontend publish )

If you are publishing for the first time, CLI will ask you few initial questions like

• Whether you want to use npm or yarn?
• What is your project name, version, description, github address and license?

Once you successfully publish your project they will be stored for a future.