IBM Code Engine and static hugo site
Tags: ibm, serverless, tutorial
Published: 2021-10-04 16:39:41

---
title: IBM Code Engine and static hugo site
published: true
date: 2021-03-17 14:06:44 UTC
tags: ibm,serverless,tutorial
canonical_url: https://jjasghar.github.io/blog/2021/03/17/ibm-code-engine-and-static-hugo-site/
---

# Scope

This is a tutorial/demo of getting [hugo](https://gohugo.io/) to work with [code-engine](https://www.ibm.com/cloud/code-engine)from IBM Cloud.

# Prerequisites

1. You need hugo installed, there’s a few different installation paths, check [this](https://gohugo.io/getting-started/installing/) out.
2. Create a [GitHub](https://github.com/new) repostiory that you can push your `hugo` site to.

# Steps

## `hugo` static site generator

1. First thing you need to do is create a example hugo site, you run the following command: **NOTE** : `code-engine-hugo` is just an example name

```
$ hugo new site code-engine-hugo
Congratulations! Your new Hugo site is created in /code-engine-hugo.

Just a few more steps and you're ready to go:

2. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
3. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
4. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

```

5. Next test your site and create a `git` repository, follow these next directions:

```
$ cd /code-engine-hugo
$ git init
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
$ echo theme = \"ananke\" >> config.toml
$ hugo new posts/my-first-post.md
$ vim content/posts/my-first-post.md # just fill it with dummy text
$ hugo server -D

```

You should be able to see a site that says “My New Hugo Site”. The `my-first-post.md`has a `draft: true`, when you want to make it real change that to `false`.

6. 

Now when you make changes or add posts you can run `hugo` (without drafts) and the new site will be recreated in `public/` in that directory.

7. 

Push your new site up to the GitHub repository and create the Dockerfile, and we’ll start configuring code engine next.

```
$ cd /code-engine-hugo
$ cat << EOF >> Dockerfile [45/104]
FROM klakegg/hugo:latest

ADD . /src

EXPOSE 8080

ENTRYPOINT ["hugo", "server", "--port", "8080"]
EOF
$ git add .
$ git commit -m "inital commit"
$ git push origin main

```

8. Just as a sanity check, lets verify that the container we have/built will work locally. Run the following commands and to test it:

```
$ docker build -t jjasghar/code-engine-hugo-example .
$ docker run -it --rm -p 8080:8080 jjasghar/code-engine-hugo-example:latest server
Start building sites …

                   | EN
-------------------+-----
  Pages | 7
  Paginator pages | 0
  Non-page files | 0
  Static files | 1
  Processed images | 0
  Aliases | 0
  Sitemaps | 1
  Cleaned | 0

Built in 23 ms
Watching for changes in /src/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /src/config.toml, /src/themes/ananke/config.yaml
Environment: "DEV"
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 0.0.0.0)
Press Ctrl+C to stop

# In another terminal/webbrowser:
$ open localhost:8080

```

## code-engine serverless platform

9. 

Now that we have our repository on GitHub, login to the [IBM Cloud](https://cloud.ibm.com)console. ![console](https://jjasghar.github.io/pics/codeengineconsole.png)

10. 

You should come to the [overview][codeengine-overview] page. ![overview](https://jjasghar.github.io/pics/codeengineoverview.png)

11. 

Now take your repository from above and add it to the “Start with source code” entry box. ![github](https://jjasghar.github.io/pics/codeengineoverview-github.png)And click “Start creating”

12. 

If you haven’t created a project yet, create one where I’m pointing to, or select one like I have as “jjtesting”. ![project](https://jjasghar.github.io/pics/codeengineoverview-project.png)

13. 

Scroll down and click the “Specifiy build details” and put in `/` as your root directory. `hugo` needs to be able to find the `config.toml` file.

14. 

You’ll need to make sure it can see your `Dockerfile` and add your credentails to Docker Hub. This will create a repository for you and push this container to it.

15. 

Click “Done”, and “Create.”

Now if you open up the application URL you should have the `hugo` site!