Create Beautiful Websites Using Emacs Org Mode

[@oscwavcommentaccount]

Small brain: nano Normal brain: vim Big brain: emacs Galaxy brain: cat > text_file

[@Hyperboid]

multiverse brain: ```sh test_file=test_file; cat $test_file; tee $test_file > /dev/null ```

[@bugswriter_]

This video was so helpful for me.

[@ganainm01]

You'll need to also set "#+OPTIONS: ^:{}" in order to render the strings containing underscores correctly. Without this option they'll be interpreted as subscripts!

[@stephanfebruary]

The Ox-Hugo plugin is probably worth covering as well. It exports to Hugo flavoured markdown directly into your Hugo project.

[@technologicalwaste7612]

There are many compression artifacts visible despite the video render quality being set to 1080p60. I have noticed this just more recently, that KZbin is becoming severe with compressing large videos.

[@Pariatech]

You magnificent bastard! I'm in the process of using org as the content of my website and here you're making thie video, what a timing! I was writing my own parser but that readtheorg theme is looking mighty good, I will look into that for sure.

[@dougtilaran3496]

You never cease to amaze man. I've been Linuxated for 24 years and aint even close. BUT. I can build anything out of metal or wood...or glass....or plastic. Can you show me how to in the terminal ? Incredible stuff, as is your norm !

[@MichelStumpf]

Great stuff and thanks for the tips. Now would love to see another followup with org mode & hugo to generate great static websites

[@maxfriis]

First - vim users don't cry if stuff is harder than it needs to be. That's why they choose vim-script over emacs-lisp. Seccond - I think you should have featured the htmlize package for color coding your source block. I think you would agree that would be an improvement.

[@charlessmith5465]

I put my web bookmarks in an org file instead of bookmarking within a browser. IMO it's a lot easier to back up, search, add notes to, add to revision systems like git, and it's not tied to a particular browser.

[@DistroTube]

Nice idea!

[@charlessmith5465]

@@DistroTube is there an easy way to avoid having "HTML_HEAD" render to html as "HTMLhead" in this document of yours, where "head" is shown as a small subscript font? When I've run into that I just wrap it in equal signs and that makes the word into an inline code style 🤔 Usually when this happens, it is a bit of code or a technical name after all.

[@DistroTube]

Thanks for the tip!

[@RedFenceAnime]

I've been converting all my bookmark to org-mode as well. I no longer want to use an account in my browsers to sync my bookmarks in the cloud. Org-mode and syncthing works great so far. (I haven't yet decided what I'll use on my phone termux, orgzly and orgro seem like good choices.)

[@asmarton]

@@charlessmith5465 if you want to write a literal underscore you can use \under IIRC. So HTML\under{}HEAD will produce HTML_HEAD. Not pretty, but it works

[@nevoyu]

Ok this makes me actually kinda want to learn emacs.

[@WiseGuy508]

Doom Emacs is basically just vim with the power of Emacs. Use that

[@michi1743]

Color me a weirdo but I never found myself comfortable inside of Emacs... I use vim for everything. Even writing HTML files feels consistent there for me.

[@smedley76]

i use nano for everything

[@michi1743]

@@smedley76 GET OUT xD no really... Even for writing an HTML file?

[@emvdl]

well keep using Vim then, it’s a great tool, nothing wrong with that, just a matter of taste...

[@smedley76]

@@michi1743 why not? nano is super easy to configure.

[@michi1743]

@@smedley76 Vim is just that much faster to use, much easier to navigate through and also makes sure tou don't make unwanted changes. Not to mention the endless configuration possibilities.

[@rebdo]

Hey DT, very cool feature in doom emacs, from org to html. i have to try more org mode, maybe you could do a new video for installing your doom emacs with your config files from gitlab, i tried that a couple of times, but i ever get an error... i think you could do better with your own config files with an new doom emacs installation :)

[@Nuada2723]

Can this batch convert org files with org roam to create linked HTML files? Similar to Obsidians publish functionality

[@matman1975]

So how does it look in Gemini? LOL :) Great video, as a vim user still not crying...

[@nevoyu]

You can use vimwiki to export to html

[@CaptZenPetabyte]

Thanks for this tutorial its a game changer. But do you know how to 'convert' a html/css template back into something emacs can output? I want to ditch my old Wordpress site but keep the html/css, possible? Know of a tutorial?

[@danv8718]

Careful, DT, you're digging a deeper and deeper emacs rabbit hole...you're not gonna be able to climb out of it...

[@marsdrums6298]

So, could you then convert that html file to a Gemini file and make a Gemini capsule out of that? That would be pretty sweet!

[@syedahkam7164]

That's possible but gemini doesn't allow any styling

[@AndersJackson]

@@syedahkam7164 that is fine, because Org-mode doesn't do any styling, nor do export as ASCII. :-)

[@syedahkam7164]

@@AndersJackson I was talking about the read the docs theme, it's obviously fine with default configurations :)

[@AndersJackson]

@@syedahkam7164 ah, I didn't made that connection. Sorry. :-)

[@Innocentdarkness72]

wow cool stuff !!

[@mattjclay]

You should checkout Hugo site generator. It’s similar to this. You create content in markdown format. And it generates an entire website based on your chosen theme.

[@rektifyr...]

Oh no, I feel like now that I've been introduced to the word _soydev_ it'll completely replace _webdev_ in my vocabulary.

[@abeplus7352]

Don't generalize the web devs , yes some front end developers are pretty useless , but I'm a backend developer and trust me the stuff I work on on a daily basis runs laps around some bald guy sitting infront of a linux terminal reminiscing about the days when software was made in someone's basement and looked like dog turd with terrible exception and error handling and bizzare error codes. I code in java , c#, go , cpp , and yes I also know nodejs . Call us bloated and hate us all you want and label us as soydevs , but there's a huge demand for pretty websites that are functional with performant and realtime backend apis , it's how the market is currently. If desktop software was still a thing I'd be doing that , but that doesn't make bread and I need bread to provide for my family ... You guys think we don't now how linux works , but that's half of what we do on a daily with docker containers , aws , and server less architecture. But sure sit there on your high horse acting like an operating system engineer expert with some shitty bash scripts and window manager preferences .

[@mintcar]

@@abeplus7352 So there are no useless backend devs? Don't get why you would bring up that tedious conflict when trying to defend modern web development. Like you say the job has gotten very complex in recent times. Not everyone is up to the task, and few engineers have the power to say no to bad requests from clients and bosses, so there's some truth to the criticism we receive. But I agree that being able to make performant and bug free software in the current market is what's truely impressive and it's a bit laughable when you see some of these videos (though I never thought it was meant to be taken seriously anyway).

[@abeplus7352]

@@mintcar by useless front end devs I meant people who use jquery, bootstrap, and wordpress and call themselves developers

[@mintcar]

@@abeplus7352 All right if you want to reserve the title of developer for some reason, I guess that's just mildly elitist and I don't care much, but people who just do Wordpress, Bootstrap and jQuery are not useless. It's the results that count. I gave you some credit and thought you meant developers who write buggy and slow websites.

[@mintcar]

Maybe you just meant they don't know Linux. Never mind. Thought when people talk of "soydevs" it's not those who do Wordpress and jQuery they imagine, it's those who create massive complicated web apps in React or something when a simple sever rendered site might have done the job (and then do it badly), which is what web developmet seems to be these days to some degree. But perhaps it's me who is mistaken and this whole thing is just about who is a "real" developer. Carry on! 🙂

[@marsdrums6298]

Hmmm. I was at work thinking about if this was even possible. We're synched today DT.

[@KaiserTheAdversary]

>soydev >chad Honestly, everyone pretends to dislike Luke, yet everyone imitates him in some way or another.

[@ishihara95]

soydev and chad, two very original words that lucas smith jr the 5th came up with all by himself

[@francescovolpini]

@@ishihara95 he was the first to actually start using them in this context though

[@areg7182]

Great, now we just need a theme that emulates one-dark from doom in html/css, so the file looks the same in both emacs and the browser

[@DistroTube]

Don't put such ideas in my head!

[@areg7182]

@@DistroTube haha why not

[@vascoferreira7943]

You could just use something like this: github.com/vascoferreira25/ox-tailwind and change the classes

[@Aerodos12]

I was just thinking about this!

[@0x007A]

By now you should realize emacs is an operating system, an application creation environment and launcher. The only thing missing is a kernel to interface with the computer hardware. I am perfectly happy and productive using vim, though I tried scheme many years ago for a course about Scheme - the experience was a nightmare.

[@caribe_imperial1945]

I'm sorry that was your experience. Personally Racket / Guile and /Scheme have been a joy to learn and use. Specially if you drop preconceptions about how to program.

[@poms3559]

DT: *This Video is Gonna Make Vim Users Cry* Me: Laughs In Emacs

[@sigmapiepsilon]

Soydev's use html, chads use orgmode and sane people use markdown with pandoc. You can use any editor in any platform and not get tied to a bloated package on top of an already bloated editor.

[@blackberry8692]

You have preceded me with this comment. For the regular Emacs user, this is very convenient. However, for the Markdown + Pandoc with CSS user (in Vim or whatever text editor), Emacs is way more complex. Look who's crying (DT).

[@abarocio80]

I got it: you don't like emacs. And thats fine. But if you call emacs a "bloated editor", (1) you don't have an idea of what emacs is, and (2) you have not used emacs for a decent time to criticize it. I grant that emacs is not perfect, but it is great, to the extent of the kind of beast it is. If you want to use a shovel, it does the work, but don't call a bulldozer "bloated" just because it is bigger than what ever you use. It might be bloated for your specific use cases, but there are many more others than yours. Be kind. I am trying to be.

[@sigmapiepsilon]

@@abarocio80 I call Emacs bloated because it is bloated. It includes stuff no one would ever want in their text editor like reading news, email, web browser and what not. The funny part is that each of those stuff are just as hacky as the other and break at the slightest change. The one thing it claims to be - a text editor it does a horrible job with atrocious default keybindings suggesting that the developers put the minimum amount of thought in the area that's supposed to define their software. Emacs used to be a decent editor during the initial stages (like Gosling's version) when it had much less pretense about itself (a lisp machine that implemented TECO macros). Now it's just a bloated mess. Orgmode is just like a mini-Emacs on top of Emacs with equally misguided design philosophy. Lastly, I'm criticizing a tool, not your character, I can be as harsh as I like. No need to take things so personally.

[@abarocio80]

@@sigmapiepsilon Bloated is nod a description, but an opinion, as you have prove it. The tools you choose to do your work depend on your work, and on your character. That, your character, is from where opinions come. It is one thing to call a thing bloated, as it is by itself, and another is to say "it is too big for my needs, I need something simpler". The later is fine and honest, but the first one is dishonest and petulant. (Sorry if I am being harsh.) And don't worry about me and my fragile ego, I don't take it personal.

[@sigmapiepsilon]

@@abarocio80 > Bloated is nod a description, but an opinion, as you have prove it. What? How do you "prove" an opinion? BTW that's not an opinion, it's pretty much a known fact. Emacs became bloated the day it started shipping with packages like Orgmode, Gnus, News reader, etc. which are themselves bloated and hacky (but ironically no evil-mode which would have at least made a decent editing experience). No other mainstream text editor has such insane things added on top of itself. You know you have a bloated editor when the init configuration for the editor has to be made as separate packages (aka Doom emacs, spacemacs etc.) so that newcomers can have a working installation. > The tools you choose to do your work depend on your work, and on your character. Ha ha that's the most meaningless collection of words I've seen today. Get a life (?). Tools you choose are simply temporary means to solve your problem until a better one comes along. Don't get so attached to stuff, otherwise you'll never get any work done (assuming you have any real work to do).

[@kjakobsen]

I love that the abrieviation of the channel and your name is the same. ;)

[@edwinlundmark]

Compile into html... hmmmm. Wasn't the modern web bloat?

[@DistroTube]

This is just a stop-gap until we get org:// as a proper Internet protocol.

[@paulo9523]

@@DistroTube That's the future that RMS always wanted.

[@DistroTube]

MAKE IT HAPPEN, RICHARD!

[@dougtilaran3496]

@@DistroTube But Richard. It has to be performed with surgical cleanliness. Possiblemente problematica ? No problama ! LYSA ! www.goodhousekeeping.com/home/cleaning/a20705805/how-to-make-homemade-soap/

[@abarocio80]

@@DistroTube That's the way!

[@AriannaEuryaleMusic]

What is he benefit converting xyz format to html?. it seems like doing double work, when you just can edit or create an HTML file directly which is already pretty easy.

[@abarocio80]

That's right. Why use json if the data is already in a SQL database? Org is much more than just a text format. To do all what org does in HTML you would require a bestial javascript (backend and fornted), and yet not be enough. HTML is convenient to share with others in a particular case (like passing part of the representation of the data to a frontend), but HTML can not replace org, as json can not replace SQL (nor SQL can replace json, nor org can replace HTML).

[@pierrerouleau5311]

One problem with HTML is with being able to see evolution through VCS and diffs. 2 version of HTML may differ greatly because text was just wrapped and yet nothing changed. With simpler markup formats it's easier to follow changes in the VCS. You end up with a better separation between content and presentation.

[@IAmOxidised7525]

Use markdown , no need of bloated text editor

[@taxRe]

if you have an Iphone check out the Beorg app -- pretty awesome

[@MichaelMantion]

Making Vim users cry is what EMACS does best. When are you going to switch to Subscribestar?

[@milohoffman274]

...furiously searches for vim plugin to do the same.

[@DistroTube]

Org...in Vim? Good luck with that! ;)

[@abarocio80]

I could run vim (neovim, whatever vim) within emacs. I could even use *vim as my text editor in emacs, and yet had all the power of emacs to my fingertips... but wait, there is evil-mode: no need of *vim anymore.

[@lorenzocabrini]

@@abarocio80 I never got used to evil-mode. The standard Emacs keybindings work just fine for me. The only thing is I swap left CTRL and CAPS LOCK to keep it pleasant.

[@abarocio80]

@@lorenzocabrini Yea, I have use standard emacs keys for about twenty years and had no complain about it. I have been experimenting with evil-mode and is nice, but as I use dvorak finger typing, some parts of the motion keys don't make any sense. I think it is just matter of preference. I just made those comments for the fan boys of vim that don't get it that vim "editing powers" are just a configuration.

[@aaaaaaaaaaaaaaaaaaaaaaaa305]

But I love HTML !

[@umka7536]

Maybe with a bit more work regarding CSS integration I can do similar thing with vim-wiki plugin for VIM/NeoVIM. This is how I handle my notes.

[@wadecurry938]

Gotta ask.... what are CHADS and Soydevs. I'm guessing that a soydev is a wanna-be developer. Chad? no clue.

[@Ggldoork]

Chads use Org? Quite the insult to Org users.

[@breadpirateroberts4946]

emacs is a text editor that is good at everything, except editing text

[@SuperCape]

Yep. That's why you use Spacemacs so that emacs becomes the best at editing text as well.

[@breadpirateroberts4946]

I just built my own config from scratch, spacemacs has a lot of unnecessary stuff added. evil mode is alright but i kept asking myself "why couldnt i just do this in vim". the kitchen sink approach is not for me i guess. im not a programmer i just need a simple editor so maybe theres advantages im not seeing

[@abarocio80]

There fore, evil-mode.

[@breadpirateroberts4946]

@@abarocio80 read my other reply

[@abarocio80]

@@breadpirateroberts4946 I did, and to me it is too much work, that's why I replied that to your original comment.

[@SethuIyer95]

Honestly, Zim Wiki is so much better

[@lightarmanov6266]

pls stop usring require with doom use after! or usepackage!

[@RedBearAK]

Why is LaTeX pronounced like “La-tech”?

[@shock_aralho]

The X comes from the Greek capital letter Chi

[@neoney]

nooo not emacs !!!1 vim vim

[@abarocio80]

Try to do in vim what org-mode does in emacs. Good luck!

[@abarocio80]

Still, vim is a good editor, just a different one for diferent uses, for diferent people.

[@heroe1486]

Chads use Jsx 😏

[@alexandern4002]

👍🏻

[@neoney]

hello!

[@arrtemfly]

that's clickbait! . . must... not... click... . *clicks anyway*