How to deploy and host the Jamstack application
There are many ways to generate your HTML resources. What you choose is up to you. The three most common approaches are:
- Manual coding
- Static site generators
- Site builders
In this tutorial, I’ll show you how to create and publish a page using the Hugo Page Builder.
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
To create a new Hugo site, 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 themes/hello-friend
Then add the theme to your site settings:
$ echo theme = \"hello-friend\" >> config.toml
</code>
Step 4: Add content
You can manually create content files and provide metadata, but 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 are not deployed; once you finish a post, update the post header a draft: false.
Add your 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 the folder 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 (bind address 127.0.0.1)
Press Ctrl+C to stop
Navigate to your new site a
. Feel free to edit or add new content and simply refresh your browser to see changes quickly.
Step 6: Customize the theme
open config.toml in a text editor:
baseURL = "
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hello-friend"
paginate = 3
For example, add the number of posts visible on the page, change the title to something more personal. Also, if you already have a ready domain, set the baseURL. Note that this value is not required when running the local development server. For theme-specific configuration options, see the theme site.
Step 7: Create static pages
Just use the command:
The exit will be inside ./public/ default directory (-d/--destination flag to change or set publishdir in the configuration file).
Step 8: Deploy to MDB GO
It’s simple. Go to your output directory and call:
$ cd public
$ mdb frontend publish
Note: from frontend is a default value for publish order, you can run only mdb publish (instead of mdb frontend publish )
If you are publishing for the first time, CLI will ask you some initial questions like:
- Should you use npm or thread?
- What is your project name, version, description, github address and license?
Once you have successfully published your project, they will be stored for future reference.
Technology
Berita Olahraga
Lowongan Kerja
Berita Terkini
Berita Terbaru
Berita Teknologi
Seputar Teknologi
Berita Politik
Resep Masakan
Pendidikan