 Hi, I'm Denshi. In today's video, I'm gonna talk about my new website, comfy.guide. Many of you may have seen my comfy guide videos before on this channel. In fact, my Arch Linux, one of my Gen 2 one, are some of the best performing videos that I've ever made. And I've decided to finally make my text guides that I use in those videos as uniform as possible, at least any ones that I have to write because the existing documentation may not be good enough for the program I'm trying to use. Over the years, I've written a lot of guides and I've always wanted some comfy way to organize all of them. And this is pretty much the answer. So if you go to comfy.guide, you can read all of the text guides from my videos. Now there are a few missing that I'm still working on, things I want to improve. And in today's video, I'm gonna show you how you can contribute to comfy.guide, add your own guides, make corrections, stuff like that, so we can have the best technology guides on the internet for Linux and self-hosting and all that stuff. Even more, everything that I cover on my videos. To begin with, if you go to the comfy.guide website, pretty simple, that's the link, you can click on any of these guides, let's say the Mumble one that I used in my latest video on Mumble. You can see that there's a bunch of information like the ports you need to install the software to run it effectively on your server, if it's a server piece of software. There's a table of contents for every single header that's present in the article and there's tutorials on the commands you gotta run and explanations and there's even images and stuff like that. So I'm gonna show you how to make your own little guide. The first thing you'll notice at the bottom of every single guide is that there's a button that says edit this source. Now, this is actually all hosted on GitHub, so if you click on this, it'll open up the actual markdown file on GitHub so you can go and edit it directly. If you have a GitHub account, you can literally just click the edit button and start working on it and then it'll prompt you to fork the repository and start working on the file and whatnot. Now, we're gonna learn how to do all that on the command line now. As you can see, the article's written entirely in markdown which is a pretty simple markup language to learn. There's code examples, all that kind of stuff and I'm gonna show you how to start editing and writing these articles in just a second. So if you go to the actual comfy.guide GitHub page, this will be linked in the description or you can find it directly by clicking a link on the actual comfy guide website. You can see all the contents of this website. Now, this is actually something called a Hugo site. I'm planning on making a guide on Hugo at some point but it's just so big and complicated and just got so many different ways of doing things that that's probably gonna take a while. Who knows? Maybe you can help me write one on this repository. But anyways, the way the website works is that all the content is written in markdown and then the Hugo templates I've included in here will automatically turn that into a publishable website. Now, you don't have to worry about doing any of that because I'm always doing the publishing and the correcting on my end. So you don't have to worry about actually rendering the site but I will show you how to preview what the site will look like when you edit it, when you're editing an article for it. So anyways, there's a little helpful tutorial on how to contribute that's written over here in text. So I'm basically gonna go over this. So I'm gonna open up my terminal over here and the first thing I'm gonna do is I'm gonna clone the repository. You can basically just copy paste these commands up until here. So as you can see, it says cloning the repository and going into the folder of the repository. So here we are. As you can see, there's a bunch of different folders. The only one you really have to worry about is content. Everything else, it's not super important. I guess the static folder has icons in it. If you wanna add a new icon, so you might want to look at that if you're adding a new guide and you wanna add an icon. But apart from that, most everything you're gonna be doing will be in the content directory. So here's what we're gonna do. The first thing you wanna do is start previewing the website. So what I'm actually gonna do is I'm gonna open up a new terminal on a different window, you know, a different virtual desktop or whatever. There's basically a new terminal that's gonna run in the background. And I'm gonna run this command by going into the comfy-to-guide repository. I'm gonna run this command that's listed over here. Hugo server dash dash no HTTP cache. This will help reload the website faster. And dash capital D. So dash capital D will make it so that even if your article is marked as a draft, like it's incomplete, you can still preview it. So I'm gonna press enter over here. It might give some errors, you can ignore these for now. And it'll tell you to go to localhost 1313 since it bound to 127001. So what that basically means is if we go to localhost 1313 in our browser, the comfy-guide website will preview. Now, you might notice there's actually some difference between this website and the actual official website. There's a few things that are a bit weird, like the title doesn't seem to be working on this copy. I'll probably get that fixed by the end of this video. But the most important thing is you'll see there's a bunch of other articles which are not listed on the real comfy-guide website. These are all draft articles I'm working on in the background. Like, for example, a KissLinux article or an encryption article where I explain the basics of encryption or there's one where I talk about how to host stuff on tour. Look out for that video, by the way. This video will probably be coming out pretty soon. Anyways, these are all the draft articles they post up in the order of when they were made. So the oldest one here is the PureTube article and they just go up from there basically. Anyways, to make a new article, if you wanna start completely from scratch, what we wanna do is run the following command from the comfy-guide repository. You wanna run hugo new and then content. And then the folder you wanna make the content is. There's two folders. There's server and client and that's these server self-hosting guides and client more like Linux oriented home computer guides. Let's say I wanna make a new server guide, server, and then you gotta give it a name. So I don't know. Let's say I wanna make a guide to, I don't know, something basic like HTML, something like that. And then I'm gonna end it with .md which is Markdown. So this will create the template file which you can start editing. So now open up your editor. In this example, I show Vim, you can use Nano, whatever your favorite editor is, you can go to Vim, Content, and then server and then HTML, just whatever you name the file. And as you can see, it will contain a bunch of template information. So it'll automatically try to guess the title based off the file name. I mean, it got pretty close. It capitalized the H but I'm gonna actually make this to full HTML acronym. You can give this a description. I don't know, a simple guide to the hypertext markup language which is what HTML actually stands for. Icon. So you can give this article on the icon. I guess we can look for one of those. Ideally, you wanna look for an SVG icon. So normally you can find these on Wikimedia. So like if you search for SVG icons, yeah, here you go, HTML5 logo and wordmark. Yeah, stuff like this. You normally find it on Wikimedia Commons or websites that have good SVG sources. So vector images. Sometimes this is impossible. If it really is impossible, try making your own icon, try making your own custom little thing if you think it'll look cool. So we're gonna click over here and click original file. I don't know if you can see that. It says original file SVG file. We're gonna click on that. And there you go. There's the file. We can just basically right click on it and I think save page as, and there you go. So we're gonna just call this HTML.SVG. So in the actual comfy.guide folder, where you wanna save this is in static and then icons. So you wanna save it among all these other SVGs. At least that's what you generally want to do. So if you go to icon, you can rename that to HTML.SVG, just like that. So that way, there you go. The entry will show up on the comfy guide preview which we have with localhost 1313. The article will show up. It will be linked and it will have the icon which we specified. So opening it up, as you can see, it'll open up the article. It's got the icon, but it doesn't really have anything. It doesn't even have a table of contents because we don't have any content at all. Before I do actually start writing the article, I wanna say that if you want yourself to be credited in the actual article, then you can add your name over here. Let's say, I don't know, I'm Billy. I wanna have my name Billy over here. And it'll say this page is made by Billy. You can also have website, a bunch of other variables here, but the main ones are like email. Let's say Billy at Billy.org or something like that. And then it'll have a little email icon. If you have like a matrix, it'll have a matrix icon at Billy colon Billy.org, something like that. And there you go. Oh wait, it might give, yeah. You can't have an at, so you have to put it in quotation marks. Sorry about that. But there you go. Then it'll show a matrix icon. So all your messaging and context can be at the bottom here if you want somebody to contact you. You can also have a Monero address. I'm not gonna put a real one, but like, you know, four, eight, something like that. That's probably a good Monero address. And then it'll say you can donate with Monero. So yeah, you can have this metadata here so you can be credited properly for your work. With all that done, all the boring stuff done, let's actually write the article. So just in case you don't know Markdown, you can create subheadings. I recommend creating subheadings by using two hashtags instead of regular headings with a normal hashtag because a regular heading in HTML, I don't know, let's say how to write paragraphs, something like that, right? It'll show as like a title and you don't really want that in your article. So change it to a double hashtag or double pound symbol, whatever you call this. So you can have a nice little properly formatted subheading. Once you have your subheading, you can have your guide. So this is how we write paragraphs in HTML. And so that'll be like a paragraph when you write a paragraph like that in Hugo or sorry, in Markdown. If you want to include a code example, you have to do three little like backup philosophies like that and then three little ones to end it. This is like a code block. And then you can have, you know, the actual example. This is a paragraph in HTML. Just like that, close the tag. And if you want to have proper formatting for the code, so if I put this in, as you can see, it'll just be black and white. Like there won't be any coloring, but it can actually be colored by Hugo if you specify the language. So you can put a HTML over here after the first three back, I don't know what these are like, you know, back apostrophes. And then as you can see, it'll color it appropriately just like that. So that's how you do code. If you want to do like a list, you could say this is the first item of the list. This is the second one like that. You can do these little dashes for a bullet point list and you can do one, first, two, second. So like a number with a dot after that'll make an ordered list just like that. I think if you do like the wrong number, it actually goes to three. So it always assumes that you're going in the right order. So you can technically just do one, one, one on your markdown and then it'll show up as one, two, three on HTML. So you don't have to worry about getting the numbers always right. You can just put them in whatever order you want or, you know, with whatever number at the beginning you want. I guess you can put a comment with a little angled bracket like this. So this is a comment, a warning for some kind of block text. So the way to use comments on guides like these, because they kind of pop out, I recommend using them as little warnings or things like that. So I love using these for warning people like, oh, this is gonna take up a lot of space on your server or, you know, this process could easily take like a few days to complete. When there's a big thing you wanna notify the reader about, you should probably use the angled bracket like this. I'd also mention, if you wanna have subsections within your subtitles, you can have little triple pound signs and even quadruple pound signs for even subsections. So if this is like a section, right? Section, just like that. Section, I don't know, two. And then you're like, this is my cool second section. There's a paragraph right there and mark down. And then let's say there's like a subsection, subsection one. Here is a subsection which goes into more detail on a specific step. So that'll show up as like a little separate thing on the table of contents. And as you can see, it's a smaller little text. It's like a triple heading, basically. It's like a sub-subheading. And you can also do quadruple headings, sub-subsection one, just like that. And I mean, you can get silly with it. You could do like five of these sub-sub-subsection. One, not really practical. Realistically, you're never, yeah, they're not even gonna be listed on the actual table of contents because even that's a bit of a little bit too extreme. I think the most realistic one you're probably gonna be using is the number three, possibly the number four. But yeah, one last thing I wanna cover on mark down is how you can do lines. So if I write, this is some text over here, mark down. As you can see, it'll render as this is some text as one sentence. It won't actually split it like I've done here. To split it properly, you have to put two spaces after the lines you want a new line after. So just like that, that will insert a line break. So as you can see, it'll do this is some text. Now this is different from doing this and then a space like that or a new line like that is some text. In this case where there's a line separating them, those are all considered separate paragraphs. As you can see, there's a lot of space between them. But for this one, it's considered one paragraph just with a bunch of line breaks. So double spaces and mark down just like that. Those do line breaks. Okay, there is one last thing I didn't mention which is images and links. So with a link, you wanna do two squared brackets like that or just two brackets, that's what they're called. And then put this is a link text. And then that'll create just a normal little square bracket thing. It won't actually make a link. What you have to do is put two round brackets like that and that'll turn it into a link. And then in the round brackets themselves, you wanna put the contents of the link. So HTVS, example.org for example. You can put any link in here. If you wanna link to another article, you can actually just put something like forward slash server and then porosity, that's the porosity article. If you were to click that link, it would go to the porosity article. So that's how you link other articles. For images, it's the same syntax as for a link, but you put an exclamation mark in front. So this is the image text. So this is the kind of text which goes on the image that kind of describes it if you wanna include that. And then you put the two little brackets. And as you can see, we don't have an image in here so it won't render anything here. It'll just render the text if the image is missing. So to have an image, what you wanna do is create a folder for your article and put the article in it. I know it sounds like a bit of a convoluted process, but let me explain. So let's look for an image online, first of all. I'm gonna just do like some, I don't know, example. I wanna find like some really old, here we go, some old footage of HTML editors, like an old image of an HTML editor. I'm gonna save this image. I'm gonna put it in comfy.guide, content, and then server. And I'm gonna make a new folder here for my guide. So going back to my terminal over here, I'm gonna go into content server. And as you can see at the moment, we have this HTML file, right? The HTML.md, well, it's not a HTML file. It's a markdown file about HTML. That's the article we were working on. Let's make a new folder called HTML, just like that. So in that folder, we're gonna actually insert our image. So I'm gonna call this example.jpg, basically. So putting it in there, back to our article. If we go and start editing the text to our article, or not the folder, sorry, the text, the markdown text, and go to the image. If we type the name of the image now, since it's in a folder of the same name as our article, we can put the name example.jpg, and as you can see, it'll actually show in our article. It'll also format correctly. It'll size correctly to everything. So you don't have to worry about resizing images unless you really want to. That's how you put an image in. There is one more recommendation, which is you should probably go and move the HTML markdown file into the HTML folder, and rename it to index.md. This is mostly to help with RSS generation, and to make sure images are displaying correctly on the RSS feed, which for this website is still a work in progress, but basically, you want to rename it as the index of the HTML folder. So doing that, as you can see, the page is still intact. Everything's fine, but this helps you go in the background with stuff like RSS feed. So yeah, that's pretty much it when it comes to providing the guide. If you actually want to add your content to the guide after you've written it on the terminal, all you have to do is go back to the comfy guide folder to the root of the repository and do git add dot, and then there you go. And then git commit dash m, and then put something in like added HTML guide, just like that. So that'll show you the changes you made. As you can see, those are all the changes that we made. 56 insertion, so we added 56 lines to the code of the repository. And finally, we want to run git push. So this will ask you for your GitHub username and the passwords have put something like, I don't know, Billy or something bad. Obviously, I don't know Billy's actual password. It puts something random in here. Now, just to be clear for GitHub, you don't really put a password in. You put an authentication token in and you have to go to your GitHub settings and scroll down to developer settings right over here. And if you can see that, there you go, developer settings. And you want to generate something called a personal access token. You can probably do a classic one. I have a few, but you can just click generate new token, classic probably, then, you know, well, I have to authenticate for mine, but you know, you get the idea. Basically, you want to copy paste the token. If you were to put like a password in here, yeah, it would give an authentication error. But if I were to put my actual password from an actual account, it would tell me any token. That's just a GitHub thing. I don't know why it does that. It's a bunch of weird security measures. I mean, I'm sure it might help some people, but I just find it annoying. I think if you know your password, your account's probably screwed anyways. So yeah, especially because people use the same password all across. But that's the process for adding an article to Configade. Once it was submitted to probably your copy of the repository, you can make a merge request on the actual GitHub interface and do all that kind of stuff. You can click through the GUI. It basically does everything for you. And I'll review your edits and I'll do it. There's already been a few people who've done some stuff. So if you go to pull requests, there's one closed one by, I think it is, yeah, I'm inter CX. I don't really know how to pronounce this name, but he fixed the typo in a variable. Anything you'd be for making the website. But yeah, the one last thing I'm gonna leave this video with is the issue pages. If you have an issue with an article or you're having a problem with something and you don't want to fix it directly, you just wanna ask for help, open up an issue over here. There's one issue at the moment, number one, which is the Configade logo. I just want to select some kind of logo. If anybody's got any ideas or wants to draw up some art or vector art, stuff like that, feel free to put it down in this issue. If you're an artist, if you're somebody who likes making logos. But yeah, as for that, I've been Denshi. I hope you enjoyed this video on Configade. And I really hope you check out the website and start making contributions and leave any suggestions, stuff like that, corrections to articles. If you think there's anything to correct, that's pretty much it. Goodbye.