Hugo-flex theme example

This is an example from scratch using hugo-flex theme. Hugo-Flex is a JavaScript-free theme with Google PageSpeed 100. This is important for having a really fast website without using AMP. We have built a top 500,000 website (https://www.scivision.dev) using hugo-flex.

Static site generators like Hugo build an arbitrarily simple or complex website from:

simple Markdown .md syntax in the content/posts directory
images and other files under static/ directory
static pages like about.md go in content/ directory

Images, Twitter tweets, YouTube videos, etc. are inlined via Hugo shortcodes.

Configuring

Install Hugo
Make a copy of this template repo by clicking the Use this Template button.
git clone --recurse-submodules your copy to your laptop and change to that directory.
Run Hugo and point your web browser to http://localhost:1313
```
hugo serve
```
Edit the website configuration in config.toml (or config.yaml). You may have to restart hugo serve if you make major changes.

Deploying

Note:

in the following discussion replace "username" with your GitHub username.
in config.toml, be sure "baseUrl" is set for your username/reponame or it will not deploy correctly.

You can build and deploy to Github Pages. For advanced / higher traffic pages (1 million + views/year) you might consider Netlify. Most individual users can simply use GitHub Pages.

deploy Hugo to GitHub Pages

For GitHub Pages with Hugo, build the HTML on your laptop.

One-time: configure GitHub Pages Settings for your repo to have Source: "master branch /docs folder".

Each time website is updated, from the top-level website repo directory:

Build site, with HTML output to docs/ per config.yaml:

hugo --source .

Add changes to git.

git add docs

Commit changes.

git commit -m "updated website"

Push site to GitHub Pages

git push

Browse to https://username.github.io/hugo-flex-example to see your demo site.

When satisfied with the demo site, rename the repository to username.github.io and then your visitors can simply browse https://username.github.io

Domain name

To have your web address be https://janedoe.example or similar, you must purchase a domain name (from Google Domains for example) and then configure DNS to point to https://username.github.io

Private history