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.
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
, visit the official documentation.To generate a static site, you will need to have Git
and Hugo
installed.
Use the following command to start a new project.
cdev init hugo-project
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:
Using the terminal, navigate into the quickstart
folder and run the following commands:
Initializing a Repository
quickstart
folder prior to adding the theme submodule.
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
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:
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’s options and limitations in the the official documentation.View your site, locally, at http://localhost:1313/
.
Hugo Build
quickstart
folder.Hugo
site.
hugo -D
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
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.
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
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
.