{{ .Title | markdownify }}
{{.Summary}}
read more
In this tutorial we will show you to make your website live without buying any hosting and touching a single line of code. We made this tutorial based on [meghna hugo](https://github.com/themefisher/meghna-hugo) but you can setup everithing like this.
### What you need !!
1. Git acccount (Ex: Github, Gitlab etc ) . In our case we use github.
2. [Netlify](https://bit.ly/netlify-account) account to host files and add custom domain .
3. [Forestry](https://bit.ly/forestry-account) account to maintain whole project without code.
### Step 1 : Fork or Clone repository
First we will fork this [northendlab hugo](https://github.com/themefisher/northendlab-hugo) template.
### Step 2 : Add your repository in Forestry
Go to your [forestry](https://bit.ly/forestry-account) account and click on `import your site now`. declare your config.toml file [`exampleSite`] and fill up basic settings .
**Or just click this button for one click installation** [](https://app.forestry.io/quick-start?repo=themefisher/northendlab-hugo&engine=hugo&version=0.60.1&config=exampleSite)
Now mark everything as done, then go to configuration to change the base url . You can put any url but this have to similar as netlify . So for now put a name which you are going to put in netlify as netlify subdomain.
### Step 3 : Setup and host website with Netlify
Here comes the last step . Go to your [netlify](https://bit.ly/netlify-account) account and click add new site . Choose your git repository to import your website in netlify . And now you can see the forked `northendlab hugo` theme. select it and follow the steps. Then go to `site settings` for change the site name and put your subdoamin name here what you puted on forestry as base url. save it and go to `deploy` from top menu, Wait a while and click on `site preview` or just simply go to the subdomain you puted as base url. **BOOM! Your site is live.** Now you can go to forestry and add, remove or customize every setting and content.
> If you face any issue regarding the installation feel free to onen [open a new issue](https://github.com/themefisher/northendlab-hugo/issues)
## Table of Contents
- [Demo](#demo)
- [Installation](#installation)
- [Main Features](#main-features)
- [Reporting Issues](#reporting-issues)
- [Technical Support or Questions](#technical-support-or-questions)
- [More Hugo Themes](https://gethugothemes.com/shop/)
## Demo
| Author | Contact | Search | Tools |
|---|---|---|---|
|  |  |  |  |
**The images are only for demonstration purpose, Please don't use those images.**
[Live Demo](http://demo.themefisher.com/northendlab-hugo/).
## Installation
At the top we have shown an easy hugo installation. but still if you think you want to go with the traditional way then use the following commands:
```
$ git clone git@github.com:themefisher/northendlab-hugo.git
$ cd northendlab-hugo/exampleSite/
$ hugo server --themesDir ../..
```
## Main features
- Bootstrap 4 Powered
- Google Analytics
- SEO Friendly
- Multiple Author
- Contact Page
- Search Item
- Responsive Ready
## Reporting Issues
We use GitHub Issues as the official bug tracker for the Navigator Template. Please Search [existing issues](https://github.com/themefisher/northendlab-hugo/issues). It’s possible someone has already reported the same problem.
If your problem or idea is not addressed yet, [open a new issue](https://github.com/themefisher/northendlab-hugo/issues)
## Technical Support or Questions
If you have questions or need help integrating the product please [contact us](mailto:themefisher@gmail.com) instead of opening an issue.
## Hire Us
We are available for Hiring of your next HUGO project. Drop Us a mail [themefisher@gmail.com](mailto:themefisher@gmail.com)
## Premium Themes
| [](https://themefisher.com/products/hugo-mega-bundle/) | [](https://gethugothemes.com/products/revolve-hugo/) | [](https://gethugothemes.com/products/liva-hugo/) |
|:---:|:---:|:---:|
| **Hugo Mega Bundle** | **Revolve** | **Liva** |
| [](https://gethugothemes.com/products/northendlab/) | [](https://gethugothemes.com/products/influencer-hugo/) | [](https://gethugothemes.com/products/kross-hugo-theme/) |
| **Northendlab** | **Influencer** | **Kross** |
| [](https://gethugothemes.com/products/hugo-business-theme/) | [](https://gethugothemes.com/products/parsa-hugo-theme/) | [](https://gethugothemes.com/shop/) |
| **Biztrox** | **Parsa** | **More Hugo Themes** |
================================================
FILE: themes/northendlab/archetypes/default.md
================================================
+++
+++
================================================
FILE: themes/northendlab/assets/js/script.js
================================================
(function ($) {
'use strict';
// Preloader js
$(window).on('load', function () {
$('.preloader').fadeOut(100);
});
// navigation
$(window).scroll(function () {
if ($('.navigation').offset().top > 1) {
$('.navigation').addClass('nav-bg');
} else {
$('.navigation').removeClass('nav-bg');
}
});
// Search Form Open
$('#searchOpen').on('click', function () {
$('.search-wrapper').addClass('open');
});
$('#searchClose').on('click', function () {
$('.search-wrapper').removeClass('open');
});
})(jQuery);
================================================
FILE: themes/northendlab/assets/scss/_buttons.scss
================================================
/* Button style */
.btn {
font-size: 16px;
font-family: $primary-font;
text-transform: capitalize;
padding: 12px 20px;
border-radius: 5px;
border: 1px solid;
position: relative;
z-index: 1;
transition: .2s ease;
&:hover,
&:active,
&:focus {
outline: 0;
box-shadow: none !important;
}
}
.btn-sm{
font-size: 15px;
padding: 6px 10px;
}
.btn-primary {
background: $primary-color;
color: $white;
border-color: $primary-color;
&:active,
&:hover,
&.focus,
&.active {
background: $primary-color !important;
border-color: $primary-color !important;
}
}
.btn-outline-primary {
background: transparent;
color: $primary-color;
border-color: $primary-color;
&:active,
&:hover,
&.focus,
&.active {
background: $primary-color !important;
border-color: $primary-color !important;
color: $white;
}
}
.btn-transparent {
background: transparent;
color: $primary-color;
border: 0;
border-bottom: 1px solid $primary-color;
border-radius: 0;
padding: 2px;
&:active,
&:hover,
&.focus,
&.active {
background: transparent;
}
}
================================================
FILE: themes/northendlab/assets/scss/_common.scss
================================================
body {
background-color: $body-color;
overflow-x: hidden;
}
::selection {
background: lighten($color: $primary-color, $amount: 10);
color: $white;
}
/* preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
img {
vertical-align: middle;
border: 0;
}
a,
button,
select {
cursor: pointer;
transition: .2s ease;
&:focus {
outline: 0;
}
}
.slick-slide {
outline: 0;
}
.section {
padding-top: 80px;
padding-bottom: 80px;
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.border-primary {
border-color: $border-color !important;
}
/* overlay */
.overlay {
position: relative;
&::before {
position: absolute;
content: '';
height: 100%;
width: 100%;
top: 0;
left: 0;
background: $black;
opacity: .5;
}
}
.outline-0 {
outline: 0 !important;
}
.d-unset {
display: unset !important;
}
.bg-primary {
background: $primary-color !important;
}
.bg-secondary {
background: $secondary-color !important;
}
.bg-light{
background: $light !important;
}
.text-primary {
color: $primary-color !important;
}
a.text-primary:hover {
color: $primary-color !important;
}
.text-color {
color: $text-color;
}
.mb-10 {
margin-bottom: 10px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.mb-30 {
margin-bottom: 30px !important;
}
.mb-40 {
margin-bottom: 40px !important;
}
.mb-50 {
margin-bottom: 50px !important;
}
.mb-60 {
margin-bottom: 60px !important;
}
.mb-70 {
margin-bottom: 70px !important;
}
.mb-80 {
margin-bottom: 80px !important;
}
.mb-90 {
margin-bottom: 90px !important;
}
.mb-100 {
margin-bottom: 100px !important;
}
.zindex-1 {
z-index: 1;
}
.overflow-hidden {
overflow: hidden;
}
.shadow {
box-shadow: 0 10px 30px 0 rgba(68,74,102,.1) !important;
}
.form-control{
height: 50px;
line-height: 50px;
&:focus{
outline: 0;
box-shadow: none;
border-color: $primary-color;
}
}
textarea.form-control{
height: 150px;
}
.page-link:focus{
box-shadow: none;
}
================================================
FILE: themes/northendlab/assets/scss/_mixins.scss
================================================
@mixin mobile-xs{
@media(max-width:400px){
@content;
}
}
@mixin mobile{
@media(max-width:575px){
@content;
}
}
@mixin tablet{
@media(max-width:767px){
@content;
}
}
@mixin desktop{
@media(max-width:991px){
@content;
}
}
@mixin desktop-lg{
@media(max-width:1200px){
@content;
}
}
@mixin desktop-xl{
@media(max-width:1600px){
@content;
}
}
@mixin size($size){
width: $size; height: $size;
}
================================================
FILE: themes/northendlab/assets/scss/_typography.scss
================================================
/* typography */
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700&display=swap');
body {
line-height: 1.5;
font-family: $primary-font;
-webkit-font-smoothing: antialiased;
font-size: 15px;
color: $text-color;
}
p, .paragraph {
font-weight: 400;
color: $text-color;
font-size: 18px;
line-height: 1.7;
font-family: $primary-font;
}
a {
color: $primary-color;
&:hover{
color: $primary-color;
}
}
h1,h2,h3,h4,h5,h6 {
color: $text-color-dark;
font-family: $primary-font;
font-weight: 600;
line-height: 1.2;
a{
&:hover{
text-decoration: none;
}
}
}
h1, .h1{
font-size: 50px;
}
h2, .h2{
font-size: 40px;
}
h3, .h3{
font-size: 30px;
}
h4, .h4{
font-size: 26px;
}
h5, .h5{
font-size: 20px;
}
h6, .h6{
font-size: 16px;
}
================================================
FILE: themes/northendlab/assets/scss/_variables.scss
================================================
// Color Variables
$primary-color: #E8505B;
$secondary-color: #9AC4F8;
$text-color: #666666;
$text-color-dark: #222222;
$body-color: #fff;
$border-color: #ACB9C4;
$black: #000;
$white: #fff;
$light: #F8F8F8;
// Font Variables
$primary-font: 'Muli', sans-serif;
$icon-font: 'themify';
================================================
FILE: themes/northendlab/assets/scss/style.scss
================================================
/*!------------------------------------------------------------------
[MAIN STYLESHEET]
PROJECT: Project Name
VERSION: Versoin Number
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TABLE OF CONTENTS]
-------------------------------------------------------------------*/
@import 'variables';
@import 'mixins';
@import 'typography';
@import 'buttons';
@import 'common';
@import 'templates/navigation.scss';
@import 'templates/main.scss';
================================================
FILE: themes/northendlab/assets/scss/templates/_main.scss
================================================
/* body */
/* body {
background-image: url(../images/backgrounds/pattern.png);
} */
/* banner */
.banner {
padding: 220px 0 120px;
position: relative;
@include desktop-lg {
padding: 150px 0 100px;
}
@include desktop {
padding: 100px 0 0;
}
.illustration {
position: absolute;
bottom: 0;
right: 30px;
@include desktop-xl {
max-width: 600px;
}
@include desktop {
display: none;
}
}
.illustration-mobile{
display: none;
@include desktop {
display: block;
}
}
}
/* blog */
.block {
padding: 60px 60px 40px;
}
.author-thumb{
height: 300px;
width: 300px;
object-fit: cover;
}
/* pagination */
.pagination {
justify-content: center;
.page-item {
.page-link {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
color: $text-color;
border: 0;
border-radius: 5px;
&:hover {
background: $primary-color;
color: $white;
}
}
&.active {
.page-link {
background: $primary-color;
color: $white;
}
}
}
}
.post-title:hover{
text-decoration: underline;
}
.post-meta{
color: #999;
a{
color: inherit;
&:hover{
color: $primary-color;
}
}
}
.content {
* {
margin-bottom: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 10px;
}
ol {
padding-left: 20px;
}
ul {
padding-left: 0;
li {
position: relative;
padding-left: 20px;
margin-bottom: 15px;
list-style-type: none;
&::before {
position: absolute;
content: "\e71b";
font-family: $icon-font;
font-size: 14px;
left: 0;
top: 1px;
color: $primary-color;
transition: .3s ease;
}
}
}
table {
text-align: left;
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
th,
td {
padding: .75rem;
vertical-align: top;
border: 1px solid #dee2e6
}
thead {
background: darken($color: $light, $amount: 2);
}
tbody {
background: $light;
td {
text-align: left !important;
}
}
}
blockquote {
padding: 20px;
background: $light;
border-left: 3px solid $primary-color;
p {
margin-bottom: 0;
color: $text-color-dark;
font-style: italic !important;
}
}
pre {
padding: 10px 20px;
background: $light;
code {
border: 0;
background: transparent;
padding: 0;
}
}
a {
color: $primary-color;
&:hover {
text-decoration: underline;
}
}
code {
padding: 3px 5px;
background: $light;
border: 1px solid $border-color;
border-radius: 3px;
color: $text-color-dark;
}
}
/* social icon */
.social-icon{
a{
height: 45px;
width: 45px;
border: 1px solid $primary-color;
border-radius: 50%;
line-height: 45px;
text-align: center;
display: block;
color: $primary-color;
&:hover{
background: $primary-color;
color: $white;
}
}
}
/* nav tab */
.nav-tab{
.nav-link{
padding: 15px;
color: $text-color;
border-radius: 5px;
&.active{
@extend .shadow;
color: $white;
background: $primary-color;
}
}
}
================================================
FILE: themes/northendlab/assets/scss/templates/_navigation.scss
================================================
.navigation {
transition: .3s ease;
&.fixed-top{
@include desktop {
position: sticky !important;
}
}
@include desktop {
background: $white;
}
}
.nav-bg {
background-color: $white;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.161);
}
.nav-item{
margin: 0;
.nav-link{
text-transform: capitalize;
}
}
.navbar-light .navbar-nav .nav-link {
color: $text-color-dark;
&:hover{
color: $primary-color;
}
}
.navbar-expand-lg .navbar-nav .nav-link {
padding: 20px;
}
/* search */
.search-btn {
border: 0;
background: transparent;
}
.search-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
z-index: 2;
visibility: hidden;
transition: .2s ease;
opacity: 0;
&.open {
visibility: visible;
opacity: 1;
}
}
.search-box {
height: 100%;
width: 100%;
border: 0;
background: $white;
font-size: 20px;
padding: 0;
&:focus {
box-shadow: none !important;
outline: 0;
}
}
.search-close {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
border: 0;
background: transparent;
page-break-after: 10px;
font-size: 20px;
}
================================================
FILE: themes/northendlab/exampleSite/.forestry/front_matter/templates/author.yml
================================================
---
label: Author
hide_body: false
fields:
- type: text
name: title
label: title
- type: text
name: description
label: description
- type: file
name: image
label: image
pages:
- content/author/hasan-muhammad-mehedi.md
- content/author/mehedi.md
================================================
FILE: themes/northendlab/exampleSite/.forestry/front_matter/templates/post.yml
================================================
---
label: Post
hide_body: false
fields:
- type: text
name: title
label: title
- type: datetime
name: date
label: date
- type: file
name: image
label: image
- type: text
name: author
label: author
- type: text
name: description
label: description
- type: list
name: categories
label: categories
- type: text
name: type
label: type
default: post
pages:
- content/the-terms-everybody-should-know-before-starting-seo.md
- content/what-tools-you-are-using-for-website-analytics.md
================================================
FILE: themes/northendlab/exampleSite/.forestry/front_matter/templates/tools.yml
================================================
---
label: Tools
hide_body: true
fields:
- type: field_group_list
name: tools
label: tools
fields:
- type: text
name: title
label: title
- type: field_group_list
name: tool
label: tool
fields:
- type: text
name: name
label: name
- type: file
name: image
label: image
- type: text
name: link
label: link
pages:
- data/tools.yml
================================================
FILE: themes/northendlab/exampleSite/.forestry/settings.yml
================================================
---
new_page_extension: md
auto_deploy: false
admin_path: ''
webhook_url:
sections:
- type: directory
path: exampleSite/content
label: Post
create: documents
match: "*"
templates:
- post
- type: directory
path: exampleSite/data
label: Tools
create: documents
match: "**/*"
new_doc_ext: yml
templates:
- tools
- type: directory
path: exampleSite/content/author
label: Author
create: documents
match: "**/*"
templates:
- author
- type: document
path: exampleSite/documentation
label: Documentation
- type: directory
path: exampleSite/content/contact
label: Contact
create: all
match: "**/*"
- type: directory
path: exampleSite/
label: Configuration
create: all
match: "*.toml"
new_doc_ext: toml
upload_dir: exampleSite/static/images
public_path: "/images"
front_matter_path: ''
use_front_matter_path: false
file_template: ":filename:"
build:
preview_env:
- HUGO_ENV=staging
- HUGO_VERSION=0.58.2
preview_output_directory: public
preview_docker_image: forestryio/hugo:latest
mount_path: "/srv"
working_dir: "/srv"
instant_preview_command: hugo server -D -E -F --port 8080 --bind 0.0.0.0 --renderToDisk
-d public
version: 0.58.2
================================================
FILE: themes/northendlab/exampleSite/config.toml
================================================
############################ Default configuration #########################
baseURL = "https://examplesite.com/"
languageCode = "en-us"
# site title
title = "Northendlab | Blog Template"
# theme
theme = "northendlab-hugo"
# post pagination
paginate = "5"
# post excerpt
summaryLength = "10"
# disqus short name
disqusShortname = "" # get your shortname form here : https://disqus.com
[outputs]
home = ["HTML", "AMP", "RSS", "JSON"]
########################## Plugings ######################################
# css plugins
[[params.plugins.css]]
link = "plugins/bootstrap/bootstrap.min.css"
[[params.plugins.css]]
link = "plugins/themify-icons/themify-icons.css"
# js plugins
[[params.plugins.js]]
link = "plugins/jQuery/jquery.min.js"
[[params.plugins.js]]
link = "plugins/bootstrap/bootstrap.min.js"
[[params.plugins.js]]
link = "plugins/search/fuse.min.js"
[[params.plugins.js]]
link = "plugins/search/mark.js"
[[params.plugins.js]]
link = "plugins/search/search.js"
########################### Navigation ###################################
# main menu
[[menu.main]]
URL = "contact"
name = "Contact"
weight = 1
[[menu.main]]
URL = "tools"
name = "tools"
weight = 2
# footer menu
[[menu.footer]]
URL = "contact"
name = "Contact"
weight = 1
[[menu.footer]]
URL = "tools"
name = "tools"
weight = 2
######################### Default Parameters ###########################
[params]
# home
home = "Home"
# logo
logo = "images/logo.svg"
# meta data
author = "Themefisher"
description = "This is meta description"
# google tag manager
google_tag_manager = "" # your id
# google analitycs ID
google_analitycs_id = "" # your id
# contact form action
contact_form_action = "#" # contact form works with : https://formspree.io
# copyright
copyright = "© 2019 [Gethugothemes](https://gethugothemes.com) All Rights Reserved"
# preloader
[params.preloader]
enable = true
preloader = "" # use png, jpg, svg or gif format
# search
[params.search]
enable = true
####################### banner #######################################
[params.banner]
bgImage = "images/banner/banner-bg.svg"
title = "Hi, I'm John Smith Doe. {{.Summary}}
read more{{ .Site.Params.cta.description | markdownify }}
{{ if .Site.Params.cta.button.enable }} {{ .Site.Params.cta.button.label }} {{ end }}![](\"https://user-images.githubusercontent.com/37659754/64060567-7cece400-cbf0-11e9-9cf9-abac3543ec1f.png\")