In Hello Go Server Part 2 we created a server that could serve multiple pages but couldn't serve images or other files. So, not very useful. Today, we'll overcome this limitation so that we can serve pages with images, stylesheets (CSS), and other files. That covers everything needed for a visually stunning static website.

Step One: Add the Static File Handler

Start with the code from part 2, and create a sub-directory called "assets." You're welcome to call it something else if you wish; what's important is that there's a dedicated directory for static files. Next, find the following line in helloserver.go:

router.GET("/:page", pageHandler)

Insert the following after that line:

router.ServeFiles("/assets/*filepath", http.Dir("<<insert absolute path to assets directory>>"))

Replace <<...>> with the full path to your assets directory (I tried using relative paths but they don't work). For me that was: "C:\\Users/Hans/GoWork/src/scratchpad/helloserver3/assets/". This one line sets up the static file server.

We're not quite done yet. Httprouter currently has a limitation where "/:page" and "/assets/*filepath" clash (see this page for details). So, the URL for pages has to be moved. Update the "/:page" router line to:

router.GET("/pages/:page", pageHandler)

This shifts pages to /pages/*, allowing assets and pages to coexist.

Step Two: Add static files and update the templates

The server is now static file capable, so lets use this new feature. Create a sub-directory in /assets called images, and copy an image file into the new directory. I used the Kea Sigma Delta icon, and called the file icon.png.

The image file can now be used in the website's pages. So, insert the image into the helloworld.html and goodbye.html templates. I inserted the icon just before the <h1> tag with the following HTML code:

<img src="/assets/images/icon.png" style="float: left;"/>

Step Three: Test

Compile and run the new server. If you have the Atom code editor configured as per the first tutorial, then push Ctrl+Shift+B (or select Packages => Script => Run script from the menus). Now open your web-browser and visit http://localhost:8080/. If all went well, then you should see the following page:

 Hello cropped

Likewise, visiting http://localhost:8080/pages/goodbye should result in:

Goodbye cropped

Final Words

We now have a server that can generate pages from templates and serve images and other files. While the test pages are very simple, the server has everything it needs to serve visually stunning static pages. You just need to add suitable imagery and CSS stylesheets. I recommend using Bootstrap for CSS. It comes with plenty of ready made visual styles and layouts which will save you time, unless you're already a CSS afficionado, that is.

What's next? Well, the logical next step would be to learn how to create working a working contact form; that's the first step toward a dynamic and interactive website. However, I have to put this tutorial series on hold due to other priorities taking up my time.