Pages

Showing posts with label hugo. Show all posts
Showing posts with label hugo. Show all posts

Thursday, March 29, 2018

Fedora 27 : Tips and tricks with hugo framework .

he most important fact in learning development is knowing the information flow and how to drain it knowing the elements and stages of information processing of the content.
That's why I wrote this article succinctly to show you how simple basics of exemplification can correctly complete and help the user to modify and create content.
I will show you how to follow steps into hugo framework and website development with hugo.
You need to read the basic of hugo terms from documentation if you want to learn all about hugo or take some helpful information.
First use --verbose flag gives extra information that will be helpful when we debug or build your hogo website.
You need to know your hugo version because is the old versions has bad issues, check it with:
$ hugo version
The next command is to see and debug your work:
$ hugo --verbose 
How hugo framework works when you start for the first time with hugo development.
Now, the first place that Hugo will look for rules and files is in the layouts/ directory so it will always find the skin.
If you start with hugo then you can change the default.
This files name skins are the files responsible for the look and feel of your site.
You have two ways to create a skin:
  • create it in the layouts/ directory;
  • create it in a sub-directory of the themes/ directory.
A skin in layouts/ folder can’t be customized without updating the templates and static files that it is built from.
The skin created in themes/ folder , can be and that makes it easier for other people to use it.
In my example tutorial , I add this text to themes/test_themes_001/layouts/index.html.
The result of running hugo server command will rput this text on your browser at 127.0.0.1:13131, see command:
$ hugo server --buildDrafts
The hugo command come with many features like :
  • --buildDrafts this include content marked as draft ( see files with draft:true from .md file);
  • --ignoreCache this ignores the cache directory if you use it;
Using --verbose let you to see your errors.
For example a bad template or configuration can come with this error:
 ...Unable to locate layout for "taxonomyTerm" ...
This show you what term created by you is not on your hugo development area.
I make just few changes to show you how the hugo working. First I create the website named hugo_website_001. I used hugo command to add some pages first_test.md and new.md and a theme named test_theme_001, see:
$ hugo new site hugo_website_001
$ cd hugo_website_001
$ hugo new theme test_theme_001
$ hugo new first_test.md
$ hugo new new.md
$ tree 
.
├── archetypes
│   └── default.md
├── config.toml
├── content
│   ├── first_test.md
│   └── new.md
├── data
├── fpaste_hugo.txt
├── layouts
├── public
│   ├── categories
│   │   └── index.xml
│   ├── css
│   ├── index.html
│   ├── index.xml
│   ├── js
│   ├── sitemap.xml
│   └── tags
│       └── index.xml
├── static
└── themes
    └── test_theme_001
        ├── archetypes
        │   └── default.md
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── list.html
        │   │   └── single.html
        │   ├── index.html
        │   ├── index.html.save
        │   └── partials
        │       ├── footer.html
        │       └── header.html
        ├── LICENSE.md
        ├── static
        │   ├── css
        │   └── js
        └── theme.toml

19 directories, 20 files
$ 
Let's see files for settings - the toml file type. First is the config.toml file:
baseURL = "http://localhost.com"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "test_theme_001"
contentdir ="content"
publishdir = "public"
The next file is the theme.toml .

# theme.toml template for a Hugo theme
# See https://github.com/gohugoio/hugoThemes#themetoml for an example

name = "Test_theme_001"
license = "MIT"
licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE.md"
description = "first theme with hugo"
homepage = "http://example.com/"
tags = ["tags","categories"]
features = []
min_version = "0.31"

[author]
  name = "catafest"
  homepage = "free-tutorials.org"

# If porting an existing theme
[original]
  name = ""
  homepage = ""
  repo = ""
I will show a minimal example to understand the changes you need to make to run well with hugo framework and the my custom theme.
I show next how this changes into files is show by hugo on browser.
The basic file load is the index.html from themes/test_theme_001/layouts folder with tag h2 and text Some text !, see:

Some text !


{{ partial "header.html" . }}
This file load another file from partials folder and is named header.html with tag p and this text:
This is a custom header
Let's run the hugo server :
hugo server --theme=test_theme_001 --buildDrafts --ignoreCache --disableFastRender
This is result is this:

Saturday, March 24, 2018

Fedora 27 : Testing the hugo web framework .

The development team come with this shot info: The world’s fastest framework for building websites.
I don't know if is the fastest framework but I'm sure is the fastest process to install and make settings using Fedora distro.
First you need to know this framework works with golang programming language.
Let's start testing this framework with the first step install the golang on the system.
$ sudo dnf install golang
$ mkdir -p $HOME/go
$ echo 'export GOPATH=$HOME/go' >> $HOME/.bashrc
$ source $HOME/.bashrc
$ go env GOPATH
/home/mythcat/go
Now you will have a go folder into home folder. Let's install the hugo framework.
$ cd  go
$ hugo new site hugo_website_001
$ cd hugo_website_001
$ tree
The result will the this:

The next step is the testing the hugo server with some commands:
$ hugo version
$ hugo --verbose
$ hugo server --verbose
$ hugo server
This will start the server and you can be see it at 127.0.0.1:1313. This is a bind address of the default hugo server and you need to set like any website. The file named config.toml in your site directory contains the global configuration for your Hugo site. This settings will make our website to run well. We can use one theme from a list of themes using git tool, see themes gohugo.io. If you get a theme named theme_001 you need to add it into config.toml file like:
theme = theme_001
The next step is to create some content and we can start with draft files. The draft file named first_test.md can be created with this command into hugo_website_001 folder. This will create the file into content folder.
$ hugo new first_test.md
The draf files can be render just if you use D option:
$ hugo server -D
If you don't have install or set a theme then you cannot see the draft or any content web pages. You can create a new theme (example: test_theme_001) and deal with this theme.
hugo new theme test_theme_001
If you use a theme from hugo then hugo is fastest framework, but if you need to create a new theme then for me is as fast as any framework.