Make it easier to build offline sites

[gcushen]

How can we make it easier to generate offline sites?

Background: https://github.com/sourcethemes/academic-admin/issues/14#issuecomment-605617261

Possible solutions:

1. Add a package.json for building offline sites to the Kickstart repo

   • Could utilize Learna for conditional dependencies?

2. Have an additional repo just for offline assets. It could be packaged as a Hugo module so then users could simply install the Hugo module to install assets locally

Both these approaches may require a few tweaks in Academic's code to check for presence of these individual files as opposed to the current offline approach of requiring offline assets to be concatenated into a single CSS and JS files.

Documentation

1. Add a page to the docs dedicated to building offline sites: https://sourcethemes.com/academic/docs/offline-site/

[StefanoCecere]

i was thinking for this also for offline development and the easier way could be a config flag, that chooses if to link to all external resources, or if to use a local offline version. obvioulsy these local files have to be updated manually from time to time

for example these files should all have a local copy...

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.8.6/css/academicons.min.css" 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css"
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:400,400italic,700|Roboto+Mono">

[HughP]

+1 for the font awesome... I ran into this today... Is there anyway for a dev to locally store a google font? For instance if a dev has chosen to use a google font (or one provided via the google font API) then is there a way to cache that locally for an off line site? One option is for the config flag process to only grab the default fonts, but it would be nice if any font from the google font API could be grabbed based on the settings in the dev's chosen theme settings.

[jimangel]

I created a minor solution for a similar problem on kubernetes.io: https://github.com/kubernetes/website/pull/15257/commits

Essentially you can do stuff like:

{{/* Setting external resource based on whether hugo is running locally or public */}}
{{ if .Site.IsServer }}
#STUFF TO DO IF OFFLINE
{{ else }}
#STUFF TO DO IF ONLINE
{{ end }}

# Alternately you can do
{{ if not .Site.IsServer }}
#STUFF 
{{ end }}

[ghost]

It's a good idea from a privacy perspective to always load content, including font stacks, from the same origin. Doing so eliminates the chance of an unreliable third-party causing SPOF (Single Point Of Failure) during page load as happens frequently with Google, Adobe, Cloudflare and others in China, SEA and likely the middle east and for all sorts of reasons one might not expect.

Offline publishing increases privacy both for publishers as well as end users in addition to providing a better user experience and improved auditability for better site security.

[JOduMonT]

@ghost said, too many project are US Centric, such as S3, which is the backend of Github is based in US, often during COVID I had to use a VPN to being directly connected in US to be able to download and clone project which relay on github and S3. (I'm based in Bangkok which is SEA) without this VPN I always had timeout and/or downloading a 3 bites second.

Also by using "offline site" version of my site, I speed up by 200% the rendering and now this one could be cached entirely by CloudFlare which means my website is now available in 200 cities.

result with offline site options enabled

on netlify

on cloudflare as workers

result without offline site

such as the update_academic.sh script, I think it could be easy to make a script to parse and download all these resources, of course I'm not a Windows user.

but personally I simply don't understand having everything locally is not the default behavior instead of relaying on a bunch of uncacheable externals ressources.

[JOduMonT]

@gcushen at https://sourcethemes.com/academic/docs/offline-site/ it could be interesting to define what means

Add Font Awesome font assets to static/

since to make it work I had to copy webfonts in static/css/ instead of static because with https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css point to ../webfonts and not ../../webfonts

[gcushen]

Closing due to little demand and the discussion going stale with no contributions.

[rodrigoalcarazdelaosa]

Has this issue anything to do with this?