Hugo Framework
Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.
Hugo is a general-purpose website framework. Technically speaking, Hugo is a static site generator. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Since websites are viewed far more often than they are edited, Hugo is designed to provide an optimal viewing experience for your website’s end users and an ideal writing experience for website authors.
Websites built with Hugo are extremely fast and secure. Hugo sites can be hosted anywhere, including Netlify, Heroku, GoDaddy, DreamHost, GitHub Pages, Surge, Aerobatic, Firebase, Google Cloud Storage, Amazon S3, Rackspace, Azure, and CloudFront and work well with CDNs. Hugo sites run without the need for a database or dependencies on expensive runtimes like Ruby, Python, or PHP.
Getting Started With Hugo Framework
In order to start creating a static site with Hugo framework you need to consider the following steps.
Step 1. Install Hugo
You need to install the Go language first before installing Hugo framework since Hugo framework is built using Go language.
You can Download and install Go Here if you have not installed it yet.
Now your system is ready for installing Hugo framework
Download Hugo Framework Here
Step 2. Create a new Hugo Site
hugo new site Sites
The above will create a new Hugo site in a folder named Sites.
Step 3. Add a Theme
see themes.gohugo.io for more themes and select the one you like.
This blog post uses the beautiful Ananke theme.
cd Sites
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git
themes/ananke
Edit your config.toml configuration file
and add the Ananke theme
echo 'theme = "ananke"' >> config.toml
Step 4. Adding contents
hugo new posts/my-first-post.md
Edit the newly created content file if you want.
Inorder to add the navigation contents such as about link, blog link, career link
for about page
hugo new about.md
for contact page
hugo new contact.md
for adding new blogs
hugo new blogs/new-blog-title.md
Step 5. Start Your server with Draft enabled
hugo server -D
Started building sites ...
Built site for language en:
1 of 1 draft rendered
0 future content
0 expired content
1 regular pages created
8 other pages created
0 non-page files copied
1 paginator pages created
0 categories created
0 tags created
total in 18 ms
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Step 6. Customizing your Sites
Since you have added already added a templates from the gohugo.io, your site already looks great, but incase if you still want to tweak you sites with custom stylings feel free to so by adding external css and js. Inorder to add external css and js to your site, grab the custom css and js file and
add them to your static folder with corresponding folder CSS and JS and edit your config.toml file with the following content:
externalCSS = ["your-css-file.css"]
externalJS = ["your-js-file.js"]
Step 8. Deploying Hugo Static to a Remote Server
Compile the site with
hugo
The above command will generate a public folder inside of your hugo application. Copy the public folder and paste it into your www folder
for example
/home/user-data/www/default
Back to blog
