Helipoland

Helipoland.com is a static website generated by hugo, hosted on s3 and served by cdn provider (not selected yet). Tailwind is used for html styling and javascript for additional dynamic website functionality.

1. Setup
2. Development
   • Workflow overview
   • Helpful links
   • Directory structure
3. Todos

Setup

• sing up on github.com
• setup ssh key pair with ssh-keygen on your local machine and upload public key to your github account settings
• clone repository with git clone [email protected]:mkieblesz/helipoland.git to your workspace directory on your machine
• run ./scripts/install_hugo.sh; sudo mv hugo /usr/local/bin/ script to download other requirements to your local machine (you will be asked for root password)
• run ./scripts/install_js.sh script to install js requirements (you have to have node 12.x installed on your system)

Development

Workflow overview

Development happens accordingly to the following workflow.

1. Make changes.
   • run ./script/build.sh to build css files
   • run local development server with hugo server - any change to files will re-render website automatically
   • go to http://localhost:1313/
   • copy the most similar page and/or compontent relevant to the change and update content
   • ensure front matter variables which will be used to render seo/meta tags
   • add it to menus in config.toml file
   • ensure you are following tailwindcss styleguide
2. Verify website works/loogs good locally.
   • run ./script/build.sh and check if website render properly directly
   • check if all seo tags are set in a page front matter:
     • title
     • description
     • keywords
     • type (website or article)
     • image (representing image of the webpage)
3. Commit changes locally.
   • git add . - this will add everything to staged changes
   • git commit -m "Here is change description" - this will commit changes to git locally
4. Push changes to github.
   • git push - this will push local commits to github

Note: when browsing website html files directly in the browser links will still be pointing to live website. In order to make links point locally comment baseURL setting and uncomment relativeURLs setting from config file. Then run hugo command. Read more here. Alternativiely you can generate website with hugo -b "file://$(pwd)/public".

After every change to the templates gitlab publish action is triggered automatically. It will build website, push them to the hosting and refresh cdn cache. It should take no more than 5 minutes.

to update this image upload helipoland.com.drawio file to http://draw.io/ website, make changes, export to xml and png formats and copy them to this project's root directory

Helpful Links

• https://gohugo.io/getting-started/
• https://tailwindcss.com/. Note that we are not building tailwind, but loading it as external file, therefore you can omit all javascript and configuration options and just focus on templating
• git starter guide. For more advanced features check this page
• tailwind styleguide

Directory Structure

To see more check hugo's directory structure docs.

.github/                                Github's action spec
archetypes/                             Archetypes are templates used when creating new content with `hugo new ...`
assets/                                 Sources needed some sort of processing like bundling tailwind styles and javascript files
content/                                Hugo assumes that the same structure that works to organize your source content is used to organize the rendered site
layouts/                                Stores templates in the form of .html files that specify how views of your content will be rendered into a static website
scripts/                                Utility scripts simplifying development setup
static/                                 Stores all the static content: images, CSS, JavaScript, etc.
config.toml                             Hugo site configuration
postcss.config.js                       Postcss configuration used by hugo pipes in `layouts/partials/head.html`
tailwind.config.js                      Tailwind configuration used by postcss
helipoland.com.drawio                   Workflow chart in xml format generated by http://draw.io/
helipoland.com.png                      Worfklow chart in png format generated by http://draw.io/
README.md                               This readme file
.editorconfig                           Default formatting settings config used by various editors - https://editorconfig.org/
.gitignore                              List of file paths ignored from git repository

There are few files and directories generated dynamically which are excluded from version control.

public/                                 Generated website by hugo
resources/                              Resource directory used by hugo pipes
node_modules/                           Npm packages generated when installing tailwind

Todos

• (2h) create header
• (2 days) create tailwind components
  • homepage

    top (secondary) navbar
    main navbar
        menu dropdown
    footer
        social media icons
        copywrite text
        all top level menus as columns
    hero carousel
    messanger communicator
    language switcher
    reference slider
    contact form
    latest blog posts
    

  • used helicopter card
  • used helicopter page

    avionics
    equipment
    other information
    overview table
    gallery
    

  • image
• (1 day) copy content to pages with tailwind components
• (1 day) update seo tags in all pages
• (1h) add CNAME from new.helipoland.com to ddrb47t0cf972.cloudfront.net
• (?) redirect to language depending on browser https://stackoverflow.com/q/30562257/11060504
• (few hours) analytics - ga or https://simpleanalytics.com/
• (2 hours) update readome with how to use analytics and everything else
• maybe:
  • consider https://www.algolia.com/ for search
  • consider 3d models on helicopter pages - https://sketchfab.com/3d-models/robinson-r44-1855fb3b31c048e3b7536b22cdf0a5f9 https://sketchfab.com/3d-models/robinson-r66-02822a4694074dd1aef00f5dd2ca0a23
• which english are we using: GB or US?