It’s true that anyone can make a website. But, when it’s so easy to make one, it’s easy to not fully understand how it works, either.

I’ve been wanting to make my own site for some time now and finally got around to it. After consulting with some friends and mentors, I decided to use Hugo to create the static site and GitHub Pages to host. Although setting up these components was super easy, there were many intricacies in how everything worked. As a security person, I felt an even greater need to thoroughly research every single setting I was toggling on and ask myself even the most primitive of questions.

So, here is how I made my site. I’ll talk about the logistical stuff, like how to use Hugo, and the security stuff, like how it’s super easy to almost include inline styles and open yourself up to an array of XSS attacks.

Domain

You may have noticed my custom domain: mstoi.co. It was $12 on Namecheap and is close enough to my name, so I thought why not just grab it?

The site is hosted on GitHub Pages (easy and free with GitHub Pro, which I have for free since I’m a student) and it was super simple to route everything through Namecheap.

How does Hugo work?

Hugo is a static site generator written in Go. It stood out to me as the perfect way to build a site for a few reasons:

• It’s a static site builder, which means each user just gets the pages and there’s no extra server-side or database work. This doesn’t make the site 100% secure automactially, but greatly reduces the attack space. It’s also just easier.
• Comes with some templates so I A) don’t have to become a graphic designer overnight, and B) can get it all up quicker.
• Translates Markdown files into HTML using Markdownify, making it simpler and easier to make posts and changes without manually editing HTML (because who wants to do that?).

Hugo expects a certain file layout and structure, with content in the content directory, the directory structure of all of the pages laid out in the hugo.toml configuration file, and a theme/theme-name directory to be able to reference .css files and other theme-specific content. Hugo will generate the HTML files automatically. Running hugo server (or hugo server -D to add in files that are marked as draft = true) will spawn a local instance of the server to test out any changes.

Security Considerations

One of the things that initially drew me towards static sites is that the attack space is reduced by default. No backend or server-side logic oftentimes means no user input. Additionally, if you can take out JavaScript, that’s even better. However, I still had to ask myself: are static sites 100% secure? I went down a rabbit hole to find out.

To start, I chose Bear Cub for my theme. It’s simple, gets the job down, and marketed something very important to me: security. Bear Cub is secure in the following ways:

• Doesn’t use JavaScript at all: Although not using JavaScript doesn’t make the site XSS-free, the attack space is reduced.
• Doesn’t take in any user input
• Has the option to disallow inline styles

Furthermore, I pen tested the site myself. I tried XSS payloads in <img> tags (<img src=x onerror=alert(1)>) and did get result reflected back, but it doesn’t get stored. Additionally, path traversal can be done in the URL, but only to get other pages in the site. The site also makes a request to fonts.googleapi.com, but that’s just to get the custom font I wanted; it’s not a request to my site. In all, since there’s no user input on the site, there’s nowhere for data to even go.

As I use Hugo and add more to this site, I’m sure I’ll ask myself even more security questions. As they come up, I’ll update this page.

Overall, I’ve had a really great time setting up the site and am happy with the result! If you’d like to try Hugo yourself, visit gohugo.io, and to check out Bear Cub, click here.