Our blog post is a good introduction to hugo and how this website code works.
Simply run the command:
hugo server --buildDrafts -w .
When the process is running open a browser on localhost:1313. As you do changes to the files the website is refreshed.
Changes to config.toml require hugo to restart.
In alternative you can also you ./start command which uses python app engine server running on port 8080. In this case you can use hugo -s . to regenerate content as you make changes.
Most of the data is controlled by the config.toml file. It is rendered through layouts files and partials.
These are the main sections:
- "hero.html"
- "services.html"
- "portfolio.html"
- "about.html"
- "values.html"
- "contact.html"
this order is defined in /layouts/index.html.
You can write a new blog post using md just by adding a file to content/blog/blog-post-title.md.
Each blog post requires some metadata at the beginning of the file. This is an example:
+++
id = "0003"
date = "2016-08-12T11:00:58+05:30"
modified = "2016-08-16T17:25:58+05:30"
title = "Getting caffe for ai working on Linux"
author = "shreyas"
tags = [ "AI" ]
+++
Images used by the articles are stored into static/img/blog/0003/*.jpg.
So far we have implemented 3 types of images in blogs:
article-img : image takes 100% of the width.
article-img-centered : image is placed in the center, on mobile get to the 100% to not brake horizontal scrolling.
modal-image : opens a modal almost full screen to see the "modal" image. This is disable for small screen.
<img
class="modal-image"
src="/img/blog/0006/unity_GoogleVR_demoScene_layout_2by3.jpg"
alt="article-img"
title="2 by 3 layout">
Have a look at the nice github markdown cheatsheet if you want to know more about MD format.
Fork the project and submit a pull request to github. Blog post should be compost of md file and images if necessary.
You only need this to release version on app engine or test the highlighting of the code.
Hugo can do code Highlight server side with pygments pip package see here for more info.
- You need python:
brew install python - Then pip:
python get-pip.py - Finally pygments:
pip install Pygments
Make sure you have either npm or yarn. Run yarn to get all the dependencies first. If you are using npm you need to run ```npm install`` to get the dependencies.
This are main task implemented for you with gulp:
- default task prepare local version using go, also listen to changes and automatically update content :
gulp - run local version using app engine :
gulp start - build and deploy on appengine :
gulp deploy
Make sure to use the correct version (in static/app.yaml).
Release uses gulp and some other doc.
NOTE to add slack integration env variable you need to create a file .env in the root of the project like:
SLACK_INTEGRATION_URL="https://hooks.slack.com/services/23423FSD/ERTFCVXXC3/SDFSDFWE234234sdsSDFDSDS"
Make sure to change the custom slack integration url.
We use the following open source tools:
Please make sure to understand and respect the corresponding licenses if you reuse this code.
(c) Copyright 2016 Tengio Limited
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.