Stefan BohacekAn idea I'm playing with: A tool that lets you build a basic HTML page, and shows you how to host it for free.
This might not really address the biggest obstacles to people hosting their own personal websites (https://stefanbohacek.online/@stefan/112089576884146559), but I'm hoping it will help and inspire some of the less tech-savvy folks.
Stefan Bohacek (@[email protected])
Why don't you have a personal website? #website #PersonalWebsite #indieweb #poll [ ] I do! [ ] Too expensive [ ] Too complicated [ ] Nothing to put there [ ] Don't have the time [ ] Not interested [ ] Something else?
Johnny@stefan It's cool, I think the biggest obstacle to making the independent web significant again is getting "regular people" to participate. It's definitely something I want to explore in the future as well.
That said, it's pretty cool how more than half of the respondents to that poll have a personal website! This result can only happen on fedi, that's for sure, haha
That said, it's pretty cool how more than half of the respondents to that poll have a personal website! This result can only happen on fedi, that's for sure, haha
@johnny Thank you!
And yes, we're definitely in a geekier, nerdier side of the internet!
If you make a website with this tool, definitely feel free to share it!
Ryan Randall@stefan I love this!
Are the paragraphs of Lorem Ipsum text above the "Upload your website" and "What's next?" headings still meant to be there? (Sorry, I'm taking a quick break from copyediting a long thing and apparently haven't managed to take off that hat entirely. 😅)
@ryanrandall Oops, thank you for catching that!
A little proof of concept showing the GrapesJS page builder integrated with Glitch via a browser extension.
If you like this idea, head to https://support.glitch.com/t/a-visual-editor-for-glitch/67029 and give it an upvote! #MadeWithGlitch
Jake in the desert@stefan duuuude this is 🔥 !! Love the buttons on the front too. 👊 And the styling, and just all of it. Hell yes
@jake4480 Thank you! It's been a lot of fun working on this over the past few days.
Now I'm just hoping folks will find this useful :-)
@stefan oh man I can't see how they wouldn't. I haven't tried a site on Glitch, maybe I should try. It looks awesome. I've done a couple on Neocities though, really dig that one.
Ace_of_base2@stefan this reminds me a bit of BootstrapStudio - though I love that this is online!
@digital_cowboy Funny enough, there is a plugin for the page builder I'm using that adds Bootstrap components, so you could actually recreate this!
lonely extrovert@stefan OMG I LOVE YOU.
i cobbled together my first website in 1994 using html 1.0 and it makes me INSANE that one can no longer just FTP a simple .html file to a directory on a host server like you used to. now you have to at least understand css, plus be able to fuck around with backend stuff with ghost or hugo or god knows what else and use a limited variety of templates made by somebody else that don't look anything like what you really want them to blah blah blah.....
thank you, this is awesome.
@rothko Ha, you're more than welcome!
Yeah, I definitely want to see more tools that allow particularly less tech-savvy people to create their own spaces online.
TotallyObvious 🏳️🌈🏳️⚧️🇺🇦🇵🇸@stefan great guide, thanks for helping to bring back the good web.
@numbercrow Thank you!
wakest likes your bugs ⁂
freezeanopensore@stefan Thanks god.
Hope@stefan This will be something epic! I used to make HTML pages from my blog when it was on WP, but I haven't done that in a while. I should start doing it again. My CSS is rough, not since 2006 or so.
@ladyhope Thank you! It's a bit of an experiment, my hope is that it'll serve as an onboarding for at least a few people that would otherwise feel a bit intimidated by having to jump straight into coding.
The idea is that you can build something simple and get inspired to play around with the finished code - but even if not, you still have a nice little personal site that you can be proud of.
@stefan Oh, and stupid me knew there was this webthing out there with the name glitch, but wasn't exactly sure what it did. Now I know.
@ladyhope Yeah, Glitch is pretty awesome, and they just celebrated their seventh anniversary. I've been a huge fan ever since they came out.
@stefan It's one of those things. I've run across the name before, not sure where. I just I'm sure I probably did one of those things where you click the link and go hey... cool! That looks fun, I'll look at it later. Then I never got to it for like eight years now apparently. Woopsy! I do like going through the activies section on Neocities, so I'm sure I'll like looking at Glitch too.
candide.xyz@stefan I really love this concept, and it reminds me of a thread by @flamed on an "Easy Web": https://social.lol/@flamed/111730917308541254
I've been thinking about an easy way for people unfamiliar with HTML + CSS to easily create websites for an upcoming workshop (beyond a plain "Hello World"), and WYSIWYG Editors that bridge ease of use with visible code like the one you've shared are key! 🔑 Your implementation of GrapeJS is one of the less daunting ones I've encountered so far.
fLaMEd (@[email protected])
📝 New Post: An Easy Web. Jumping on internet discourse again 🔥 https://flamedfury.com/posts/an-easy-web/ #web #webdev #blog #indieweb
@stefan Another really fascinating example of easy WYSIWYG page creation to code is a demo of @penpot 2.0 (the open source Figma). In the upcoming release, users will be able to visually design flexbox and grid-like layouts, and then copy-paste the HTML and CSS into a code editor to build actual websites / web components.
Penpot 2.0 sneak peek: new CSS Grid Layout & Components coming soon!
@stefan Ultimately, though, my dream would be to have an open-source WYSIWYG editor/web page generator like Pagy: https://pagy.co/
What I find with GrapeJS is that creating nice layouts and translating an imagined layout to page is still a bit tricky for users who aren't familiar with CSS principles (even though you do a great job of demoing the margin trick in the docs).
Unfortunately, the dev of this app doesn't have plans to add an export function, so a girl can only dream...
@stefan Maybe this is where a pre-made template/library of templates could come in (as @yianiris alludes to: https://kafeneio.social/@yianiris/112096847989482042).
Perhaps user-generated templates from existing sites?
https://stefanbohacek.online/@stefan/112101011731503904
Pre-built sections?
yianiris (@[email protected])
This is a great idea, many get trapped starting with big commercial "free" sites then get blackmailed and pushed-around to buy services (blogspot, wordpress.com, .. etc) Maybe take it a step further and create a css style sheet sampling, where you have a simple page, with a table, an image, some headers, and how the same page would look with choice of simple free style sheets. Nice, good work! @[email protected]
@candide This looks great!
The Studio version of GrapesJS looks pretty nice too: https://studio.grapesjs.com/
I'm just not seeing much information about it online, so I'm not sure if this is the next version of their editor, or something that's separate, maybe even paid.
@candide I added a guided tour that I hope better explains how the editor works. If you have a moment, I'd appreciate your thoughts!
@stefan Ooooooh!!! ✨✨ This is lovely!
Also, I always love when walkthroughs have a "replay" function. It puts me at ease to know that I don't have to remember every single thing when I'm using a new tool.
For some reason, though, when I tried it on my end (using Firefox), it played in reverse? 😂
@candide Hmm, odd, can't seem to be able to replicate that in Firefox myself, on Windows.
I made a small update to the code to make the step numbers explicit (I'm using https://tourguidejs.com), care to give it another try?
ToolSool@toolsool Thank you!