[plug] Static web site creator

[Chris McCormick]

Hi Brad,

On 31/12/22 11:11 am, Brad Campbell wrote:
> I've always built web sites from scratch using Bluefish as an editor and banging out html.
> I'm a bit over it if I'm honest, and this coming year I have a few personal projects I'd like to tackle that will require web pages that don't look like they're a Geocities export from 1997.
> 
> I really, really want to stick with statics. I'm over databases, php, wordpress and the constant merry-go-round of vulnerabilities.
> Does anyone have personal experience with one or more builders in the WYSIWG kind of sense that create output that can be just uploaded to a directory and doesn't link in thousands of library css and js templates that take a month to load on an NBN connection?


I wonder if your needs would be met simply by using a good template and 
a good editor?

There are some great HTML page templates here:

  * uisual.com
  * html5up.net

I often start a new project by forking one of these and editing the 
HTML. Some editors these days have great HTML editing facilities (VS 
Code is one and has many extensions for helping).

If you want to go a step further you could use a static site generator 
with one of these templates. If you know jQuery you can use it on the 
server side in Node to change HTML nodes, insert rendered Markdown, etc. 
and output static HTML. Let me know if you want a small example script 
show how to do this.

I highly recommend the "browser-sync" Node library for editing static 
HTML sites. As you make changes they are automatically reloaded in the 
browser so you can see your updates in realtime without having to 
continually hit refresh. Here's a quickstart:

  * Install Node.js
  * mkdir myproject; cd myproject
  * Copy you HTML template files in
  * echo {} > package.json
  * npm i browser-sync
  * npx browser-sync start --server . --files . --port 8000

This will open a browser window with the index.html page loaded. When 
you make changes to the HTML or CSS they will show up in your browser in 
real-time.


Cheers,

Chris.



-- 
https://mccormick.cx/