Log something crazy, but intresting.
Static Website Generator Hugo
Date:
Hugo is a static site generator which is on the rise and is used by a lot of high-traffic websites. The best part is it is open-source and requires minimal resources to put your site online. With Hugo, you can generate a blog or one page about me or a company website or a portfolio site anything you want. Sites generated are lite, fast, and responsive and give you a lot of control over the website.
What is Hugo?
A static site builder that uses HTML, CSS, JavaScript and Markdown to create beautiful web pages. Hugo is based on the language GO and the first release was in 2013. On the official site, it claims that it is the world's fastest framework for building websites.
How is it different?
Hugo generates static pages, there is no database or PHP attached to them which makes it super lite and fast. When you upload the files to the web server their size is usually in single digit MB. Whereas the most popular CMS WordPress is about 20 MB.
The base file that generates the pages is always with you and is not uploaded which makes it ways safer. In addition to this when there is no database there is no worry of a data leak.
Flexibility in customisation is unmatched, provided you should have the basics of coding.
With Hugo forget about updating applications, plugins, databases and backend services on regular bases. It is one of the easiest way to develop and manage content of a website.
Advantages of HUGO
Speed
Static pages are lite and serve fast online. I personally have used Hugo for a personal project and the time for the page load is really less. This primarily happens because servers don't have to work overtime in finding the data requested at different locations. All the data to render the request is at the page level.
Security
When there is no database then there is no motivation for hackers and bad elements to hack. The base file is not required to be uploaded on the server which means the base will remain with you safely. Modern cms require passwords to log in at the backend to create content, but on Hugo, you don't require passwords. You generate and modify pages locally and upload just the serveable file.
Simplicity
Hugo site builder is simple, but it does require a bit of understanding, and once you get the hang of it, works really well. Anyone can start with a new Hugo site with just 3 words “HUGO new site *_ _ _*” on the command line. To do this you have to set up the Hugo environment which is also very simple.
How to start Hugo?
There are overwhelming ways of installing Hugo but I am going to tell you the easiest ways. The prerequisite software is VS Code or Atom where we are going to create the pages.
Step #1
Download the prebuilt binary from GitHub. Unzip the file and copy the folder where you want to save your project. I created a folder named bin and placed all the files there.
Step #2
Creating the path to the binary. For this click the windows button and write “edit the system environment variable”, go to the Advance tab and click the environment variables.
Select Path and click edit and add a new path where you have saved the binary.
Step #3
On the command line type “hugo version”, for accessing the command line just press (Windows key+R) and type CMD. This will give out which version you have on your system. With this your local machine, laptop or desktop is ready to create the first website.
Step #4
From the command line navigate to the place you want to place the site file. If you don't know how to use the command line. Then just open VS Code or Atom and open the folder where you placed the binary. Then from the top menu select Terminal and New Terminal.
Step #5
Type the command “hugo new site SiteName” (SiteName can be whatever you want) This will create a folder required for creating a static site. By default, there will be no content to view so you have to create content and that is easy.
Step #6
To create content on the command line type cd SiteName this will take you inside your site folder. Then type “hugo new posts/first-post.md” or create a new file with .markdown or .md extension.
Step #7
Add a theme to your site. Visit the HUGO theme and select one, I am going with the default theme 'Ananke' by default the download button will lead you to the GitHub site where you would download all the files in a zip. Unzip all the files under the SiteName Theme section. (make sure the folder name is correct). Open the config.toml file and add “theme = 'ananke'”.
Step #7
To server or view the site or page type “hugo server”. This will host your site locally on (http://localhost:1313)
Step #8
Once you are done editing and creating your site to server the site on the server you have to type on the command line “hugo” this will build the static site file inside the public folder. Take these files and host the site.
Step #9
Whenever you want to edit the site, I usually delete all the files and folders inside the public folder and run the “hugo” command and upload the newly generated files.
Video for help
I found this video most helpful on the topic of getting started with HUGO
Themes for HUGO
There are plenty of themes on the official site to select from. Do read the theme file while choosing, sometimes there is a different configuration for the config.toml file. All the themes are open-source and available on GitHub for download.
Where to Serve?
This is a static site generated from HUGO, you can host the file with any hosting provider. It can be shared, dedicated or even VPS. If you don't have a hosting solution then you can host the files on GitHub pages for free.
Closing Thoughts
I personally like what the HUGO website generator is able to do. The only drawback I see and what I feel is it's a bit technical. When we have to write a blog post in form of code/markdown. I need to know all those ways of editing. WordPress on the other hand makes it more user-friendly.
HUGO has the speed and is way more secure than WP, here is where the trade-off comes in place if you have 5 page static site then Hugo is the answer if you are looking for user-friendliness then turn towards WP. I would lastly say do try your hand at HUGO you might just like what it has to offer.
|
Share this: |
|
|
|
|
|