Host a Hugo Frontend with the Static Site Resource

Many websites are built using front-end libraries, frameworks and static site generators to improve performance, user experience, and reduce cost. Cdev can easily integrate these technologies with the Static Site resource to host your static front-end content.


Sync a Hugo Site to the Static Site Resource

Hugo is a static website generator that converts content files, written in markdown, to static HTML and CSS pages. This example shows how Cdev hosts a Hugo site with the Static Site Resource.

Hugo Documentation
For more information about how to use Hugo, visit the official documentation.

Requirements

To generate a static site, you will need to have Git and Hugo installed.

Hugo Installation Instructions

Git

Instructions for installing Git can be found here

Hugo

You can find the instructions for installing Hugo on your system here.


Use the following command to start a new project.

cdev init hugo-project

Generate a Hugo Site

We will use the Hugo quickstart guide to generate a site.

In the root of the project folder, initialize a new Hugo site with the following command:

hugo new site quickstart

The file structure will now look like this: change_app_name



Add a Theme

Using the terminal, navigate into the quickstart folder and run the following commands:

Initializing a Repository
Ensure that a git repository(git init) is initialized from within the quickstart folder prior to adding the theme submodule.

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Hugo Themes
Hugo themes can be downloaded from the official documentation. It is accepted practice to add a theme as a git submodule.

Next, use the command below to add the theme to the quickstart/config.toml file.

echo theme = \"ananke\" >> config.toml

The file structure will now look like this: change_app_name


Use the following command to add a sample blog post to the site.

hugo new posts/my-first-post.md

Start the hugo server.

hugo server -D
Hugo Server
You can find out more about Hugo server’s options and limitations in the the official documentation.

View your site, locally, at http://localhost:1313/. change_app_name



Build Hugo Site

Hugo Build
The build command must be executed from within the quickstart folder.
Use the command below to create a build folder of the Hugo site.

hugo -D
Hugo Build
The command hugo, builds the Hugo site. For the purposes of this example, the -D flag is utilized to include content marked as drafts in the build. To see where content is marked as a draft in this example, view the quickstart/content/posts/my-first-post.md file.

In the root directory, within the src folder, create a folder named content and use the following command to copy the contents of the Hugo site’s public folder to the root src/content folder.

cp -r quickstart/public/* src/content

Public Folder
The public folder is created by the build command, hugo, and contains the files that can be uploaded to a web server for your Hugo site.
The file structure should look like this: change_app_name


Add Static Site Resource

Go to hello_world/resources.py and add the code at lines 6, 26 and 30.

# Generated as part of Quick Start project template 
 
from cdev.aws.api import Api
from cdev.aws.lambda_function import ServerlessFunction
 
from cdev.aws.frontend import Site
 
from cdev import Project as cdev_project
 
myProject = cdev_project.instance()
 
DemoApi = Api("demoapi")
 
hello_route = DemoApi.route("/hello_world", "GET")
 
@ServerlessFunction("hello_world_function", events=[hello_route.event()])
def hello_world(event, context):
    print('Hello from inside your Function!')
 
 
    return {
        "status_code": 200,
        "message": "Hello Outside World!"
    }
 
myFrontend = Site("demofrontend", content_folder="src/content", index_document='index.html')
 
myProject.display_output("Base API URL", DemoApi.output.endpoint)
myProject.display_output("Routes", DemoApi.output.endpoints)
myProject.display_output("Static Site URl", myFrontend.output.site_url)

Save and deploy the changes.

cdev plan
cdev deploy

Push the Hugo Generated Site to Your Static Site

Use the commands below to sync the new Hugo site, to the Static Site and get the url.

cdev run static_site.sync hello_world_comp.demofrontend  --dir src/content
cdev output hello_world_comp.staticsite.demofrontend.site_url

Use the url to view the Hugo Static Site. change_app_name