Angular
Hosting Static Websites on Amazon S3 - Working With the Hugo Static Site Generator
  •  

Adding Content

PRO
Outline

How can we add posts to our lovely new blog? I'll begin with another Hugo command: hugo new posts/my-rant.md, where my-rant is the name I'll give the post, and .md designates the file as MarkDown formatted.

That'll create a new sub-directory called posts in the content/ directory, and an empty file called my-rant.md. Let's edit that file. I'll add some sample text. A single hash character in MarkDown is the equivalent of an H1 tag in HTML, by the way, so that'll work well for a post title. Then I'll reference that PNG image I copied into the static/ directory just a minute ago. The exclamation point is MarkDown introduces a resource request. The text in brackets is for the image caption, and what's inside the parentheses points to the object we're requesting - image.png in this case.

I'll need to make one more edit to make this post live: the true value for the draft element should be changed to false so Hugo will no longer treat the file as a draft. With that one, I'll save the file, and a link to my first post instantly appears on my main page. When I click through to the post itself and confirm that everything looks the way I'd planned. Great. Although, to be honest, I'm not 100% why the caption isn't showing up.

Of course, there's much more to website creation than just blogs. As you saw from my Data Analytics site, Hugo can handle traditional website models, too, but things work a little bit differently. Instead of the posts/ directory, I'll create a docs/ directory within content/. Then I'll create a new file in posts/ and add some very simple content. For simplicity, I'm even leaving out the header information.

But for some reason, even though I save the file - and there's no draft = true element here, remember - Hugo doesn't seem to have seen it. Naturally, it's not displayed as a new post, since it's not in the posts/ directory. But, even when I refresh - or even when I restart the server itself - it also doesn't show up as a static page.

That's happening because the blog "posts" mode takes preference. I'll need to go into the posts/ directory and delete that post and, like magic, my first static page is suddenly linked.

There's one more command you'll really need to see before we're done with the basics. Let me go back to the shell session where Hugo server is running. I'll hit CTRL+c to stop the server, and then run simply hugo -D. This will build all the files and directories necessary for an actual production site. As I mentioned earlier, those files will be saved to the public/ directory, and specifically in the docs/ subdirectory. When it comes time for you to push your files to your S3 static website bucket, you'll run that aws s3 sync command from inside public/.

There's a lot more that's included in Hugo configuration and site design than I've shown you here. That'll be your job to research according to your specific needs. Hugo documentation isn't bad, and there's a healthy user community where you can ask for help. But there are just a few more things I'd like to share before we wrap this course up.

 

I finished! On to the next chapter