Hello,

I want to show you a super easy way to make your own page for free. The only thing you have to buy is a beautiful domain name (or maybe not, depending on the price) which will cost you as low as $1 per year.

Static pages are a quite popular way of building web pages that don’t have complex business logic, highly dynamic content, or in other words, don’t require re-rendering of a Document Object Model aka DOM or on other platforms View Hierarchy at state updates - both represent hierarchical structures of UI elements but their context and implementation are entirely different.

> Does it mean that you will always see the same page on the screen no matter what? Link to heading

No, there’s still a lot you can do by using JavaScript to manipulate the visibility of elements on the screen.

Check out, for example, my TDEE (total daily energy expenditure calculator) which is interactive by the essence of its name “calculator” 🙂 It has some JS logic to make the required calculations and show the final result to a user without a single call to server code. The page is created without any generators at all. But in contrast, another of my websites about nutrition facts and calories for foundational foods is totally generated with Hugo and some JS scripts for an interactive experience for picking a portion size and dynamic update of a generated nutrition label of a product.

Now in contrast, this page about getting nutrition facts label for a recipe is completely dynamic, the only static component is the CSS there. I will tell more about the tools behind it in my future posts.

> But why do I need a static pages generator then, you may ask? Link to heading

Static pages do not require too many resources as they just take up space on your server’s hard disk. Static pages are pre-rendered into plain HTML, CSS, and JavaScript. When a user requests a page, the server simply serves the pre-built files without needing to execute backend logic or query a database.

Therefore, the hosting of the pages is lightweight and cost-efficient as static pages may be hosted on a CDN network or even a file server like AWS S3.

Another point is that managing a large site manually becomes challenging without a generator. For example, updating navigation links across hundreds of pages would be tedious without a tool like a static site generator to automate this, or changing a style for all your blog posts at once. Generators let you use templates, partials, and markdown files to maintain consistency and avoid repetitive work.

There are a lot of static page generators, here are a couple of examples:

  • Jekyll - Ruby,
  • Gatsby - JS / React,
  • Next.js with getStaticProps/getStaticPaths and npx next export command
  • and many more…

but here I am going to talk about Hugo - Go-lang as I am a huge fan of Go-lang, which is quite a simple and suitable language for many tasks. But it’s worth mentioning that it’s better never to fixate on a programming language itself and focus on the end goal.

> Ok here we go, the recipe for a $1 personal page: Link to heading

1. You need an installed go-lang and Hugo, the simplest is with brew install hugo if you are on OS-X

2. Create a new site

hugo new site my-website
cd my-website

3. Add a theme, for e.g. I use this one: [coder](https://github.com/luizdepra/hugo-coder.git themes/hugo-coder)

git clone https://github.com/luizdepra/hugo-coder.git themes/hugo-coder

4. Copy the example site

cp -r themes/hugo-coder/exampleSite/* .

5. Run the page to check it locally

hugo serve

and open http://localhost:1313/ in your browser

Edit any layout template, configure global params and add pages you want (I maybe write another article about template system and how to override it but this doc page about lookup order is a golden start)

6. Ok now its time to push your changes to a remote repo like Gitlab/Github (private or public as you wish), create a remote repo and push the changes

cd my-website
git init
git remote add origin <your-repo-url>
git push -u origin main

7. Let’s make it live, create an account on Cloudflare and link your page’s gitlab/github repo

If you use SCSS/SASS for Environment Variables set HUGO_VERSION/0.125.2+extended (at the moment of writing the article)

When building is done cloudflare will autogenerate a domain for you. Your site is life, congrats!

8. Your site is life with 0$ spent. To make it more appealing you may choose to set a custom domain name

…

Oh shoot we forgot to buy a domain name

You know what?? … I lied to you about a domain for $1 - it actually costs 99 cents

Customize the config and set it to your personal domain name using baseurl = <hostname> in

vim config.toml

Voila! Happy coding!

P.S. Notice that I included a theme not as a git submodule because some platforms are not able to fetch submodules for some reason e.g. Digital Ocean P.P.S By the way you get a free automatic deployment now anytime you push some changes into your repository Cloudflare will rebuild your static page