Static Websites

AaronSSAaronSS
edited March 2021 in General

I have spent my whole life building websites in WordPress however I would like to learn how to build a static website. I have a copy of Bootstrap Studio. I have looked at things like Hugo, Jekyll, Hexo. I think I'll host it on my site on Bunny.net or Cloudflare pages.

  • Should I use a framework, if so which one?
  • Should start with a template?
  • Where should I host it?

Comments

  • MichaelCeeMichaelCee ModeratorProviderOG Cymru

    @Aaron said: Should I use a framework, if so which one?
    Should start with a template?

    Both depend on your skill level and what you want to get out of it, I guess. Starting from scratch might take longer but you might learn a few more things and develop your skills more. Using a template might be a quicker way to get straight on it.

    I like Bootstrap.

    Where should I host it?

    I couldn't possibly comment. :smiley:

    Michael from DragonWebHost & OnePoundEmail

  • IV__IV__ OG

    SmallWeb is the way to go! Can’t be wrong.

    This space intentionally left blank

  • AaronSSAaronSS
    edited March 2021

    @SmallWeb said: I couldn't possibly comment.

    Already a customer :p

  • deankdeank OG

    I'd say Grav CMS is pretty much a static website. It's a flat file CMS. It does require PHP but pretty sure all webhosts have that nowadays.

    ♻ Amitz day is October 21.
    ♻ Join Nigh sect by adopting my avatar. Let us spread the joys of the end.

  • iandkiandk ProviderOG

    @deank said:
    I'd say Grav CMS is pretty much a static website. It's a flat file CMS. It does require PHP but pretty sure all webhosts have that nowadays.

    It's a file based CMS but has nothing to do with a static page.

    @Aaron have a look at JAMStack

    AMD EPYC / NVMe / 10GBPs KVM in Frankfurt - https://v6node.com
    Looking for an unbeatable AMD EPYC Baremetal Server in Frankfurt? Drop me a PM

  • HarambeHarambe OG

    Or: Build the site in WordPress, export as a completely static site :sunglasses:

    https://github.com/leonstafford/wp2static

    🦍🍌

  • AaronSSAaronSS

    I’m really drawn to the idea of just making a commit and having the site updated

  • LeonDynamicLeonDynamic OG

    For pure static html builds I like Bootstrap. Theres loads of templates, tutorials, code blocks, etc to get you started and it’s really easy to learn.

  • AaronSSAaronSS

    I’m really confused how to start with Bootstrap Studio. Anyone have a guide? I download a template but I can’t figure out how to get that imported in

  • deankdeank OG
    edited March 2021

    It's good that you are even thinking of moving away from Wordpress.

    It helps to move out of your comfort zone once in a while.

    ♻ Amitz day is October 21.
    ♻ Join Nigh sect by adopting my avatar. Let us spread the joys of the end.

  • YmpkerYmpker OG

    Mobirise is a great tool for building static websites and it is free :)

    Ympker's VPN LTD Comparison, Uptime.is, Ympker's GitHub.

  • AaronSSAaronSS
    edited March 2021

    @Ympker this doesn't look free - https://mobirise.com/extensions/kit/ :p

  • fragpicfragpic OG

    @Ympker said:
    Mobirise is a great tool for building static websites and it is free :)

    Mobirise is far from free. They say free but all the themes except the default one have to be purchased.
    Also, when using their web forms, they route the data through their relay service, so your site visitor data is being captured by them.
    I've also found that it is quite restrictive, like you cant have a video background that is not hosted on youtube or vimeo which is plain stupid.

  • YmpkerYmpker OG
    edited March 2021

    @fragpic said:

    @Ympker said:
    Mobirise is a great tool for building static websites and it is free :)

    Mobirise is far from free. They say free but all the themes except the default one have to be purchased.
    Also, when using their web forms, they route the data through their relay service, so your site visitor data is being captured by them.
    I've also found that it is quite restrictive, like you cant have a video background that is not hosted on youtube or vimeo which is plain stupid.

    For what it's worth, I think it offers a lot for free. Lots of free blocks and just the themes and plugins are paid content. @SmallWeb recently used them for their website iirc :)

    Since Mobirise sites are built with HTML&CSS, you sure can have a video bg that is not vimeo/yt. Just fire up sublime text or you favourite code editor (or Mobirise's) and dip in the code.
    It does not force you to do everything in their app. I usually use it to quickly sketch a layout then import to Pinegrow and edit/adjust with PG and manual coding. Hearing about the relay form part sucks, though.

    @Aaron give it a try before judging mate :) It is fairly good, even the free content. Like I said, @SmallWeb built their site with it iirc.

    Ympker's VPN LTD Comparison, Uptime.is, Ympker's GitHub.

  • deankdeank OG

    Can't expect anyone to give something entirely for free. There is always a catch, mate.

    ♻ Amitz day is October 21.
    ♻ Join Nigh sect by adopting my avatar. Let us spread the joys of the end.

  • Not_OlesNot_Oles Provider

    Hi @Aaron!

    For something more simplified than Bootstrap, you might check this website and the additional CSS code for images posted by pmlnr in the HN discussion.

    I used these to make my former srvr.ovh website, which you still can see on archive.org. It got 100 on Pagespeed insights.

    Best wishes from Mexico!

  • elliotcelliotc OG

    I use shuffle.dev personally, they have four css framework in total. But I believe there are cheaper and better option in the market.

    Action and Reaction in history

  • angstromangstrom OG

    @Not_Oles said:
    Hi @Aaron!

    For something more simplified than Bootstrap, you might check this website and the additional CSS code for images posted by pmlnr in the HN discussion.

    I used these to make my former srvr.ovh website, which you still can see on archive.org. It got 100 on Pagespeed insights.

    Hey @Not_Oles , don't be a party pooper! ;)

    There's also beauty in complexity. (Well, sometimes, or rarely.) :)

    "A single swap file or partition may be up to 128 MB in size. [...] [I]f you need 256 MB of swap, you can create two 128-MB swap partitions." (M. Welsh & L. Kaufman, Running Linux, 2e, 1996, p. 49)

  • YmpkerYmpker OG

    @elliotc said:
    I use shuffle.dev personally, they have four css framework in total. But I believe there are cheaper and better option in the market.

    Shuffle is definitely pretty cool (had a look at it a while ago). Did they add the highly requested option to download site as HTML/CSS? I think before it was kinda locked in their project or smth?

    Ympker's VPN LTD Comparison, Uptime.is, Ympker's GitHub.

  • MichaelCeeMichaelCee ModeratorProviderOG Cymru

    Mobirise templates are also based on Bootstrap 4 :) I used only the free template/elements.

    Michael from DragonWebHost & OnePoundEmail

  • vyasvyas OG
    edited March 2021

    In addition to Jamstack:
    You can also consider
    Publii or Brizy cloud/static output exported and hosted on shared hosting.

    or Brizy cloud on Netlify.

    The linking (Brizy and Netlify) process is quite a task. Good weekend project.

    Finally, you can pick any template from html5up, modify to suit fit and be done with it!!

    blog archives

  • yoursunnyyoursunny OG
    edited March 2021

    Portfolio: handwrite all the HTML.

    Blog: Hexo, Hugo, Jekyll, etc. You should pick a generator written in a language you understand.
    Handwrite the theme for maximum control over the HTML. Let the generator handle converting Markdown,etc to HTML pages.

    CSS: classless for simple sites (no navbar), minimal otherwise.

    Hosting: Netlify.

    We accept Karma donations for the last flan. 🍮 affbrr

  • LeeLee OG

    Bootstrap has so many tools these days but I found myself using tailwind more these days, there are pros and cons with it but I like working with it more than Bootstrap.

  • vuongvuong

    @Aaron said:
    I’m really drawn to the idea of just making a commit and having the site updated

    Maybe github pages then :open_mouth:

  • TigersWayTigersWay OG

    There's one no one talked yet about.... and my favorite: Eleventy!
    Whatever you have in mind, nearly whatever template engine you would like to use, you'll find there! And you can host anywhere so far, Netlify, Vercel, Hostman, Render and Cloudflare of course these days.

    Good luck

  • seriesnseriesn OG

    https://wordpress.org/themes/bootstrap-basic4/

    The most simple effortless theme I have worked with.

    Integration so smooth, you can’t tell the difference.

    https://bytes.nexusbytes.com

    Nexus Bytes Ryzen Powered NVMe VPS | NYC|Miami|LA|London|Netherlands| Singapore|Tokyo
    Storage VPS | LiteSpeed Powered Web Hosting + SSH access | Switcher Special |

  • vyasvyas OG

    @seriesn said:
    https://wordpress.org/themes/bootstrap-basic4/

    The most simple effortless theme I have worked with.

    Integration so smooth, you can’t tell the difference.

    https://bytes.nexusbytes.com

    Bootstrap basic is

    Rather heavy theme at 5 MB !

    The most popular ones are under 200 KB. Of course "starter sites" and plugins associated with them add to the bloat

    blog archives

  • fragpicfragpic OG

    @SmallWeb said: Mobirise templates are also based on Bootstrap 4 I used only the free template/elements.

    You did pay to get the footer removed right?

  • YmpkerYmpker OG
    edited March 2021

    @seriesn said:
    https://wordpress.org/themes/bootstrap-basic4/

    The most simple effortless theme I have worked with.

    Integration so smooth, you can’t tell the difference.

    https://bytes.nexusbytes.com

    LiveCanvas' "PicoStrap" theme is free, super light-weigth and Bootstrap powered. 531KB in size, super clean & simple.

    https://picostrap.com/

    Ympker's VPN LTD Comparison, Uptime.is, Ympker's GitHub.

  • williewillie OG

    I'm out of touch about what these site generators do, but I tend to use a combination of hand-hacked scripts and org-mode export with a little bit of templating in my emacs init. If you want markdown input you could use pandoc to convert it to html. I like very primitive looking pages though, and that's not for everyone.

  • DianTamaDianTama

    If you want to use a CSS Framework I'd like to recommend TailwindCSS and you can use their purge method to remove unnecessary classes ( Tailwind Production Optimization )

    I would avoid using Site builder/Template since sometimes it just adds more unnecessary things to your script. If you familiar with Jamstack go with it. But basic HTML/CSS is not really that bad if just for the personal web.

    To host it, since its only simple HTML/CSS anywhere cheap/free is good enough

    Freelance Web Developer & Web Designer - Available for hire!

  • MichaelCeeMichaelCee ModeratorProviderOG Cymru

    @fragpic said: You did pay to get the footer removed right?

    No my friend, that's just a mistake in trying to integrate the footer colour with the link bar. I published again and it's back.

    Michael from DragonWebHost & OnePoundEmail

  • havochavoc OG

    I've recently discovered that bunnycdn for this is actually excellent for this despite me initially shitting on them.

    Basically a FTP folder you drop your static stuff in there and it serves it with https...in a edge distributed manner. So its both fast and simple because there is no server per se.

    Not free, but the scaling & bang per buck looks insane. Best as I can tell whether I host 1 page of 5 big sites ends up at same cost.

    (Compulsory 10 USD per year recharge i.e. buy credit...not even month charge)

    Platform - I'm exploring Gatsby. Think it'll do what I need it to.

    Also looking at combining this with fly.io and the major cloud's serverless tech since it's a good fit but that can wait till I learn more.

  • chimichurrichimichurri
    edited April 2021

    @havoc said:
    Also looking at combining this with fly.io and the major cloud's serverless tech since it's a good fit but that can wait till I learn more.

    The former looks really nice! (in fact, so nice that it makes me wonder how long it'll last this way ^^')
    As for the latter, watch out for insane bandwidth pricing, and possibly consider using Cloudflare Workers as well!

    Contribute your idling VPS/dedi (link), Android (link) or iOS (link) devices to medical research

  • williewillie OG

    @havoc said: (Compulsory 10 USD per year recharge i.e. buy credit...not even month charge)

    I thought minimum spend was $1 a month, which is why I've kept my stuff on cheap shared and vps plans so far. I do occasionally get higher amounts of traffic for which a cdn would be useful.

  • havochavoc OG

    @chimichurri said:
    The former looks really nice! (in fact, so nice that it makes me wonder how long it'll last this way ^^')

    Yeah 3x free ipv4 seems quite a lot

    @chimichurri said:
    As for the latter, watch out for insane bandwidth pricing, and possibly consider using Cloudflare Workers as well!

    True. TBH though it would mostly be for API calls for storage so shouldn't exceed 1gb free allowance. Depends on what you do I guess

    @willie said:
    I thought minimum spend was $1 a month, which is why I've kept my stuff on cheap shared and vps plans so far. I do occasionally get higher amounts of traffic for which a cdn would be useful.

    Their documentation is self contradictory. Says $1 min on front page and $10 recharge every 12 months in the docs

    https://support.bunny.net/hc/en-us/articles/360000235911-How-does-the-BunnyCDN-credit-and-billing-system-work#0

    I suspect the front page $1 is just a simplification. Given that I've got $11 credit hoping for a free year basically.

  • elliotcelliotc OG

    Push to github and cloudflare page/netlify

    Action and Reaction in history

  • williewillie OG

    @havoc said: Their documentation is self contradictory. Says $1 min on front page and $10 recharge every 12 months in the docs

    Not contradictory. $1 min charge against your balance each month. $10 of actual $$ has to be paid in 1x a year.

  • GirlButGuyIRLGirlButGuyIRL

    Use w/e static site generator that matches your favorite language >.>

Sign In or Register to comment.