Hugo Hermit & Netlify
Why shouldn’t I start by explaining how I’ve put together the first version of my website. I used
following tools.
One week ago, I didn’t know anything about any of these tools. I have learned basic HTML back in may be 2003 and that’s all I knew about web. This website is my first step in learning the web.
How to buy a domain name?
This is very straightforward. You just need to create an account in Namecheap and buy the domain. There are so many other websites that sell domains, but I found Namecheap to be the cheapest. Chances are that you might not be able to buy the domain that you prefer, in that case you’ll have to be a bit more creative when formulating the domain name.
Generate the website
Next step is building the website. I used to blog at UnboxNBeyond and I knew we can create websites using wordpress. I called my friend who is a pro in these subjects and he lead me to the world of static website generators. Please google static website generators if you want to learn more about the technology. He suggested docusaurus, however, I didn’t like my personal website to look like a documentation page of an open source project. Then he suggested some other tools and one such tool is Hugo.
Hugo let’s you create websites using markdown and it is super easy to get started. Believe me, quick start is all I read in order to get my website started. (and obviously I played with the code to see how it works)
Just follow the quick start guide and create a simple website. Don’t worry about content at this stage, let’s first figure out how everything fits together.
You need to update the system environment variables and update PATH to point to hugo installation directory. Usually it is, “C:\ProgramData\chocolatey\lib\hugo\tools”.
Here, I’m assuming that you know a little bit about Git. If you don’t, I think you should learn it. There are heaps of amazing writeups/videos at your disposal. (I still don’t know how to enable comments for these posts, so if you have questions, contact me through linkedin)
Just push all the generated Hugo project files to a new repository. My website is pushed to a repository in GitHub.
Host and deploy using Netlify
Please use the steps available in there official guide. There is no point in repeating these steps.
This is how to assign the website to your doman. link
Once that is done, you should login to Namecheap and under your domain, change the nameservers to point to netlify nameservers. (Choose CustomDNS and type the nameserver addresses)
It sometimes takes a while to update the nameservers. Once it took around an hour for me.
Congratulations! Now your basic website should be up!
Apply the theme Hermit
Use the official guide to apply the theme. I will explain the neccessray configurations to make it personalize below.
Personalize information
Copy the config.toml file from /theme/hermit/exampleSite directory to your root directory.
Change the following values as needed,
- baseURL <- This should be your new domain
- title
- theme
- name
- homeSubtitle
- links to social networking sites
Copy netlify.toml from /theme/hermit to your root directory
Modify it to look like below.
[build]
base = "."
command = "hugo --gc --themesDir themes -b $URL"
publish = "public"
[build.environment]
HUGO_THEME = "hermit"
Done! Your website is now live!
-Pradeepa