header-banner-image

Hello, We Are

Codyssey

Let's make your

digital ideas a reality

Back to blog

6 December 2017

Getting Started With Hugo Sites

Post By:

blog-image

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