Couple of Words About Hugo Websites

Purpose

Websites are great instrument for sharing knowledge. Having your own site has a lot of advantages over social networks.

Here are some of them:

• You have full control over your data
• You choose how your site will look like
• There is no chance being banned on your own site

This days modern technology allows us to build new full featured site in minutes. In this article I will try to give a step by step guide how to do so.

Why is Hugo?

I would consider that the modern web is broken. Now most of websites use a lot of unnecessary technologies. They store data in databases, use scripts for building pages for each request and contain tons of adds. So this leads to slowing down of everything and opens doors to potential hacks.

Fortunately there is a solution – static websites. Those sites doesn’t have database, they are lightning fast and hosting of such sites cost nothing.

Manual building of a static site may be quite complicated because you have to manually write all .html, .css and JavaScript files, thoroughly look after all links you have and spend a lot of work to make your site look nice.

Static site builders like Hugo solve this problem. They do all the work for you. You just can to focus on making content.

Here are some advantages of Hugo itself:

• simple to use
• lightweight
• superfast
• open source
• has huge community
• has no external dependencies

Why blogdown?

Using blogdown isn’t a requirement but it allows us to have RStudio as a frontend for building posts and opens us all power of .Rmarkdown.

Find a hosting

I would recommend to start from realising how you will distribute your site. There are lots of possibilities from hosting it on your local computer to buying place on a host server. I’ve chosen Netlify. It has pretty decent free hosting plan, gives you a domen name and support all possible ways to upload your site.

So go to Netlify and create account. Then go to Sites, and choose option Add new site. Then find option Start from a template and choose any template. Then find option GitHub and clone this template to your GitHub repository. You can choose either public or private one. But it doesn’t matter since your site will be public anyway. Click Deploy site and add it to your GitHub account.

Btw, if you still don’t have a GitHub account there is the time to get it. Go to github.com and create one.

Now your repository is connected to Netlify and ready to build brand new site!

Install Hugo and Git.

Depending on what OS do you use, find the way to install those programs. Both of them work well on all Linux, macOS and Windows. Just go to install Hugo and install Git to find proper way to install them for your OS. Since I use Linux further I will give all commands for my OS.

• Install Hugo:

1

sudo pacman -S hugo

• Install Git:

1

sudo pacman -S git

Open a terminal, and create directory for your website:

1

mkdir my_site

Go to the directory:

1

cd my_site

Clone your new repository from GitHub:

1

git clone https://github.com/YourUsername/YourSiteRepository.git 

Go to the repository:

1

cd YourSiteRepository

Create new site:

1

hugo new site . --force 

Congratulations! Now you have a brand new website!

Select a Theme

The key thing of Hugo website is a theme. You can not make a new site without it. So you might create it yourself or go to Hugo Themes and find appropriate theme there. I would like to mention here a couple of them: m10c, notrack and FixIt. From simple to feature full.

For now I’ve chosen FixIt theme.

Install new theme

Go to terminal and type:

1
2

# insert your favorite theme
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt

Git will clone the theme to your local repository.

When you need to update the theme just type:

1

git submodule update --remote --merge

Find config file

Hugo requires one additional thing – a config file. It might be either config.yaml or config.toml. Usually github pages of the themes provide example of the config. So check the documentation. FixIt theme gives this on the separate documentation page (docs). Copy configuration from there to your config.toml and place it into root directory of your site repository.

Run your site for the first time

Since you have a theme and a config file for your theme you can run your site locally. Just type as follows:

1

hugo server

Now you can find your site on http://localhost:xxxx/.

Time to tweak your site and add content

Your new site has no content. Add it to ./content/ directory. Hugo support markdown and html files. Go to Hugo Quick Start to find more information how to add posts using just Hugo. But I will use Rstudio for this.

And one little thing: Hugo keeps icons and profile photos somewhere in the ./static/ directory.

Rstudio and blogdown

Since you have R and Rstudio installed. Open Rstudio and install blogdown.

Type:

1

install.packages("blogdown")

Then create new project in root directory of your site file/New Project select folder.

In the same folder create new file .Rprofile and insert this content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

if (file.exists("~/.Rprofile")) {
  base::sys.source("~/.Rprofile", envir = environment())
}

options(
  blogdown.serve_site.startup = TRUE,
  blogdown.knit.on_save = TRUE,
  blogdown.method = 'markdown',
  blogdown.author = "Your Name",
  blogdown.ext = ".Rmarkdown",
  blogdown.subdir = "blog",
  blogdown.yaml.empty = TRUE,
  blogdown.new_bundle = TRUE,
  blogdown.title_case = TRUE)
  
# fix Hugo version
options(blogdown.hugo.version = "0.110.0")

Add .gitignore file, and ask to ignore files as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.Rproj.user
.Rhistory
.RData
.Ruserdata

node_modules/
public/
resources/

.hugo_build.lock
.netlify

Now you can start your site from rstudio:

1

blogdown:::preview_site(startup = TRUE)

Start creating your posts. Find the Admin button at the top panel and click blogdown/new post. Type your post’s title, add tags and categories. And start writing!

Publish your site

Add settings to Netlify – add file netlify.toml in root folder of your site and fill following config:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

[build]
command = 'hugo'
publish = 'public'

[build.environment]
HUGO_VERSION = '0.110.0'

[context]
[context.branch-deploy]
command = 'hugo -F -b $DEPLOY_PRIME_URL'

[context.deploy-preview]
command = 'hugo -F -b $DEPLOY_PRIME_URL'

[context.production]
[context.production.environment]
HUGO_ENV = 'production'

Then to publishing your site just push changes from your local repository to GitHub:

1
2
3
4
5
6
7
8

# add all files to git
git add .

# commit changes
git commit -m "here is new message" 

# push changes to your github account
git push -u origin main

Voila!

Change domain name

Now you can change the random site name given by netlify to your own proper name with .netlify.app ending which is given you for free.

Also you can buy your own domain name and use it instead. Choose a domain name registry, for example, cloudflare.com and buy a name.

Then go to cloudflare dashboard find DNS/Records and add following records:

Then go to SSL/TLS and select Your SSL/TLS encryption mode is Full (strict).

Now, when cloudflare update DNS records you can use yorwebsite.com name to visit your site.

Congratulations!