 Are you an Emacs user? Do you use org mode? As an Emacs user myself, I can say I've completely fallen in love with org mode. I write everything in org these days. All of my show notes and everything, books, essays, articles, blogs. I write everything in org mode and I wish I could write my website in org mode. Well, actually you can. You can actually convert org to HTML rather easily within Emacs. It's already kind of built into it, too. And you can create some rather beautiful yet minimal websites using Emacs org mode. So let me show you how this works. I'm going to switch over to my desktop and I created this new org document. And I'm going to call the org document. I'm going to title it org export dispatch and read the org will be the title. Then I'm going to go ahead and hit enter on it on the next line. And I'm going to go ahead and do a hash symbol followed by a plus sign. Let's go ahead and give this a description as well. And for the description, I'm going to say we're going to convert org to HTML and use read the org CSS. Typically for my org documents, I also add a author tag here at the top. So I'm going to go ahead and do author is Derek Taylor, of course. Now the next tag I want to show you is one you may or may not need to use. But if we don't specify a location for where we're going to export this document over to HTML, what it's going to do is it's going to take the current location and the current file name right here. Emacs slash org export dispatch and read the org dot org. And it's going to convert that to slash Emacs slash org export dispatch and read the org dot HTML. And that new HTML file will be in the exact same directory as the org file. Most people are going to want to send that newly exported HTML document though to a different directory to a different location on your file system. And that's going to be the case for me. So I'm actually going to specify a location here with hash symbol followed by the plus sign export underscore file underscore name colon in the location where I want our newly exported HTML file to actually be written to. Now later I will come back and add some more tags to the header here because there's going to be some other stuff we need to add later. But for now I'm just going to leave it as is and I'm going to go ahead and fill out an org document here. So I'm just going to copy and paste some stuff into this document here. So what I've pasted here is really just some information from the official org mode documentation. Now when you are exporting or documents over to other file formats or already ships with support for the following back ends. So you don't have to go install extra plugins to export or to the following formats. ASCII La Tech Beamer HTML I calendar La Tech Markdown the open document text format ODT tech info and man pages. So you don't have to go install extra plugins or packages to convert org over to these formats. And of course today we're going to export org to HTML is what we're doing on video today. But if you need other kinds of file formats that you want to export org to there's dozens of others you can go find just do a package install or package search. And what you need to do is typically the file names you need to search for begin with the letters OX for org export. So OX dash name is the format that they're typically in. For example, if I do Hugo markdown because I make a bunch of Hugo static websites and I wanted to convert org to Hugo markdown. What I would do is I would look for a package for OX dash Hugo that would probably be the name of that particular package. And I actually know that the Hugo one that is the name of the package because I have looked for it before and installed it. But always look for OX OX dash and then the format you want to be able to convert org into. Now org only loads back ends for the following formats by default ASCII HTML, which is what we're working in today. I calendar La Tech and ODT. So you don't have to enable any modules or require any modules to be able to do org to ASCII HTML I calendar La Tech or ODT. But if you wanted to, for example, do org to markdown, what you need to do is in your Emacs config, you need to require OX dash MD and an elisp. Make sure you add the single quote at the beginning of the package that is very important. So require single quote OX dash MD. Now let me paste a another section here in our document and let's talk a little bit about export settings. So export settings. So these here are what we could add to the header here. These are the export settings here. So we did title, description, author and export file name. Those are kind of self-explanatory. I shouldn't have to describe what any of those do. We could also add tags for creator. We could add a date and the date we could type it ourselves or just have it automatically place a time stamp, you know, using a command within Emacs. We could also specify a language. For example, if I did hash symbol plus all caps language colon and they did FR, that specifies that the language should be in French and it should translate the English to French for us. We also have select tags and exclude tags. I'm not going to play with those on camera today. What these are is you can choose to export or no export certain trees and sub trees within the org document. But today what I'm going to do, I'm going to export the entire org file I create today into a single HTML document. And we've already discussed title and export file name. Now these list of export settings, these work universally. It doesn't matter what you're exporting org to, what kind of format you're exporting org to, every format can use things like title, author, date, email address, I guess for the creator, you know, so you can contact the person that created that document. Export file name of course is universal. There are some export settings that you can add that are specific to certain formats. For example, let me go ahead and I'm going to paste this new section here called the export dispatcher. The description tag that I added at the head of this document. That is not one of the universal export settings. That's why it wasn't in this list. Description though can be used within HTML. So even though it can't be used in a lot of the formats that you can export org to. When you export description to HTML, description actually becomes part of the meta tag in the head of the HTML document. That's why I went ahead and added a description. Now I'm not quite done with this document. We're going to tweak it a little more, but I've talked enough. Let me go ahead and show you exporting org to HTML. Let me go ahead and show you this in action. And the key binding that you guys need to know in Doom Emacs, it is space followed by M followed by E. That loads the export dispatcher program. So space M E gets you this dispatcher and it wants to know, okay, you want to export org to something. What do you want to export it to? You have iCalendar HTML, LaTeX, Markdown, ODT. Now I want to do HTML. So I would have to hit H and then one more key after H. Do I want to do HTML in a buffer, HTML as a file and open the file in our default browser? Or do I just want to write it to a file? I actually want to write it to a file and open it in our browser. So I'm going to do H O and off camera. It actually opened that in the brave browser. Let me switch workspaces. Now it didn't actually export the whole document because I think I was highlighting part of the document. So what I'm going to do, let me get back in here. I had some of this selected some of the text. I think I actually had the space M E selected. That's why it actually, if you guys look back, it only exported space M E. So let me make sure I don't have anything in this document highlighted. And once again, I'm going to do space M E H O. And now it should, I'll get back to the workspace. Yeah, now it exports the entire document. It even gives us a table of contents. And if I click on anything in the table of contents, we immediately go to that section of the page. So this was our org document that we had created, just converted to HTML. And if I right click here in the brave browser and let's view page source. Remember the description tag I was saying wasn't a universal tag that every file format can use, but the description tag can be used in HTML and right there. Meta name equals description. And there is the description we put in our org document. I know that text is a little small there, but that was just me verifying for sure that that tag is actually being exported to the proper header meta tag in HTML. Now this HTML page that we exported, this is not very pretty, right? It's just black text on a white background because there's no CSS being applied to this at all. It is just straight HTML and it looks kind of ugly and it's hard to read and it's blinding white. So what I would do is I would try to add a little CSS to this file. And the easiest thing to do, I mean you could write your own CSS style sheet, but there are several out there on the internet. People have created custom style sheets just for converting org to HTML. So let me go to the bottom of this document and I just pasted this new section here because I want to talk about a GitHub repository called org-html themes. And if I show you this here in the brave browser, this particular repository, a guy wrote two really nice CSS style sheets just for when you convert your org to HTML. The first one is called Big Blow and it's a normal looking page. To be honest, it's not anything that just wells me or blows me away, but the really cool one is Read the Org. Read the Org is a read the docs clone. It converts your org into a read the docs like style sheet. So let's use that. How do we use that? Well, you need to add an export setting here to the top of the document. So what we need to add is we need to add this here, hash symbol plus HTML underscore head. So we're adding a tag into the HTML header. And the tag I'm adding is this link tag and it's link REL equals style sheet. So we're adding a link to a style sheet and the style sheet, it can be located on your system. So it can be like this style sheet here that's located on my system, which is just something I threw together. It's not going to look very good. Let me write that and let me do a space MEHO and I will go ahead and open it in the brave browser. This is, I wouldn't say it looks bad, but it's a very plain style sheet. The one I want to use though is the one from the read the org style sheet. And what you need to do is for that, you need to change this link here. And I'm going to paste a new export setting hash symbol plus setup file colon and then the location to the setup file, which is at that GitHub site. I'll link to this by the way in the show description, but theme dash read the org dot setup. It's a setup file that is on that GitHub repository. And now that I have that, let me get rid of my just plain vanilla style sheet that I was just showing as a demonstration. Let me write and then let me do space MEHO and get back to the brave browser. And here is that file exported using the read the org CSS. And it looks fantastic. Like this is gorgeous. And when we took a rather plain org document and made a really nice minimal website out of it. Now some things you may want to do, we have numbering here. So we have a lot of numbering going on because org typically numbers things if you do any kind of ordered list. So what I'm going to do is I'm going to go ahead and do a hash symbol plus options and options. Typically this is where most people would probably do num colon nil. So that's basically saying turn off the numbering. I don't want you to number things. You could also do TOC colon nil. Like if you had a table of contents, which we don't have a table of contents in the org document. But if I did and I didn't want the table of contents to also be exported to the HTML, you would add that here, but I don't have a table of contents in this document. But let me go ahead and write this and do the export again and see if in our new HTML file the numbering is gone. You see no numbering because this was the page before that had the numbering. I still got that tab open. The new page, no numbers. The last thing I want to do is I just want to verify that everything kind of works in org mode when you're exporting it to HTML. So I'm going to paste this section here that I titled Playground and I'm going to paste some code blocks. I'm going to paste some tables that are in org mode. I'm going to place some agenda items to do lists, scheduled appointments. I'm going to do a checkbox list here as well. I'm just going to add all of that. I'm going to write and then space MEHO one more time. And let's see how all of this gets displayed in HTML. If I click Playground, we will go there. The code block displays just fine. The table looks great. The agenda items with the highlighted to do out to the side. So those are things that are still needed to be done in my org agenda. The checklist looks great as well. Everything looks beautiful. This is almost perfect. I really wouldn't change a thing with this read the org CSS. If I really wanted to do some minor gripes, I would say I do like dark things. I still think this is a little bit too bright because it's essentially still black text on a white background here in the center. I might play with the colors a little bit just to change the colors. But as far as the actual style, as far as the fonts and the font sizes and things like that, I think all of this is perfect. So that was just a little bit about org export and the read the org style sheets. For those of you that want to try out some of these org HTML themes, I will link to this particular GitHub repository in the show description. So guys, just check that out. Now, before I go, I need to think a few special people. I need to think the producers of the show. I need to think Absi, Dallas, Gabe, Lou, Mitchell, Alan, Akami, Archfinger, David, the other David, Dylan, Gregory, Louis, Paul, Scott, Steven, Wes, and Willie. These guys, they are my highest tiered patrons over on Patreon. Without these guys, you wouldn't know how to convert org to HTML. You wouldn't know about it. The show is also brought to you by each and every one of these ladies and gentlemen as well. All these names you're seeing on the screen right now. These are all my supporters over on Patreon because the Distro Tube channel is sponsored by you guys, the community. If you'd like to support my work, look for Distro Tube over on Patreon. All right, guys. Peace. This video is going to make Vim users cry.