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.
- 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 happens accordingly to the following workflow.
- 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 https://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
- run
- 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)
- run
- Commit changes locally.
git add .
- this will add everything to staged changesgit commit -m "Here is change description"
- this will commit changes to git locally
- 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 withhugo -b "file:https://$(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 https://draw.io/ website, make changes, export to xml and png formats and copy them to this project's root directory
- 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
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 https://draw.io/
helipoland.com.png Worfklow chart in png format generated by https://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
- (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
- homepage
- (1 day) copy content to pages with tailwind components
- (1 day) update seo tags in all pages
- (1h) add CNAME from
new.helipoland.com
toddrb47t0cf972.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?