2019-12-15-your-corner-of-the-internet.html (7681B) - raw
1 <!-- title: Your corner of the Internet --> 2 <!-- slug: your-corner-of-the-internet --> 3 <!-- categories: Decentralization, Personal domain --> 4 <!-- lastmod: 2019-12-06T00:00:00Z --> 5 <!-- date: 2019-12-15T00:00:00Z --> 6 7 <p> 8 We tend to have online accounts across different social networks and services. We upload our 9 projects in some sites, we post on different ones and we follow different people on all of them. 10 Our online identities—along with everything we share—are all over the place, but there is a way to 11 solve this (and many other problems): personal websites.</p> 12 <!-- /p --> 13 14 <p> 15 Creating a personal website is a great way to share our projects, experiences, thoughts, etc. 16 under our own terms, without being limited to a given theme or a couple of available options in a 17 certain service. A personal website allows you to customize it as you want, whether that is 18 quickly setting up a simple website with a portfolio, spending time creating the perfect CSS file 19 or even setting up a service to share files with your friends using a password.</p> 20 <!-- /p --> 21 22 <p> 23 You can buy a personal domain at a considerably cheap price (less than $12 a year for a 24 <code>.me</code>, <code>.org</code> or <code>.com</code> domain), but it will provide you with 25 something much more valuable: your corner of the Internet. Nobody can shut down your domain 26 because it is no longer profitable and if your host can't continue to provide you with what you 27 need, or they change their terms, you can simply switch companies, and still show your website 28 under the same URL. You can change anything on the "backstage", and others will always find you at 29 the same place.</p> 30 <!-- /p --> 31 32 <h2>Building the website</h2> 33 34 <p> 35 If you don't have any experience with programming or using plain text and you don't want to spend 36 time getting familiar with it, you can use WordPress<sup id="fnref1"><a href="#fn1">1</a></sup> to 37 create your site. It is a free (as in freedom) <a 38 href="https://en.wikipedia.org/wiki/Content_management_system">content management system</a> that 39 will allow you to build a site without much HTML/CSS knowledge. If you are more comfortable with 40 plain text and the terminal or want to get in touch with them, building a static site that 41 supports Markdown will probably be a much better option.</p> 42 <!-- /p --> 43 44 <h3>What is a static site?</h3> 45 46 <p> 47 Most of the websites we visit are dynamic. That means that the server we are retrieving the pages 48 from is executing a program, and the pages we see are the results of that web application. Dynamic 49 sites can be useful when we want users to be able to edit data. For instance, if users can log in 50 and publish posts, that would require a dynamic site.</p> 51 <!-- /p --> 52 53 <p> 54 On the other hand, there are static websites. In this case, the server simply serves files that 55 are already stored on the server. So, for a given URL, everybody sees the same HTML (and 56 JavaScript and CSS). You probably won't require a dynamic personal website, since you'll probably 57 be publishing information about you, your projects, etc., without the need of a server that does 58 real-time calculations to serve a page<sup id="fnref2"><a href="#fn2">2</a></sup>.</p> 59 <!-- /p --> 60 61 <p>Why am I talking about static sites? Well, they offer some advantages over dynamic ones.</p> 62 63 <ul> 64 <li> 65 <strong>More efficient</strong>: since serving a page doesn't need any extra server-side 66 operation, static sites use way fewer resources, which can benefit you when considering 67 self-hosting the site. It will also make your site more environmentally friendly.</li> 68 <!-- /li --> 69 <li> 70 <strong>More secure</strong>: since there isn't an app server, potential vulnerabilities are 71 reduced drastically.</li> 72 <!-- /li --> 73 <li> 74 <strong>Faster</strong>: because the server doesn't need to do operations, it can respond to 75 requests faster, hence accelerating the loading time.<br/> <em>That is a general claim, by using 76 proper caching and using content delivery networks, speeds can change considerably. It also 77 depends on the number of plugins installed (or other operations made by the server).</em></li> 78 <!-- /li --> 79 </ul> 80 81 <p> 82 Because of these advantages, you can find free hosting for static sites and lower prices when 83 self-hosting or using shared-hosting because of the lower amount of resources needed. Furthermore, 84 since everything is stored in plain text and not in a database, you can easily use a version 85 control system (such as Git) to keep a history of all your changes and easily share the source 86 code of your site.</p> 87 <!-- /p --> 88 89 <h2>Generating a multi-page site</h2> 90 91 <p> 92 To create a static website with multiple pages, you can use a static site generator. There are a 93 lot of static site generators, and I use Hugo (for a couple of reasons that I might write about 94 some other time). With the use of Hugo—most other generators also offer this functionality—, you 95 can code your navigation bar in a file, your footer in a different one and include both of them in 96 multiple templates. These templates will then gather the content from your Markdown (or HTML) 97 files, put it all together and output all the HTML files of your site. Now that I have an 98 operative site, when I want to publish a new post, I create a file with some metadata and the post 99 content, and Hugo does the rest. Post files look like the following:</p> 100 <!-- /p --> 101 102 <pre><code><!-- 103 -->--- 104 <!-- -->title: "Post title" 105 <!-- -->categories: category 106 <!-- -->tags: [ "tag1", "tag2" ] 107 <!-- -->--- 108 109 <!-- -->Post content.</code></pre> 110 111 <p> 112 Thanks to Hugo, it is very easy to add content to a website, and the source code is neatly 113 organized. Hugo also lets you minify the content to reduce file sizes—although some people might 114 argue against it, I find it useful and some files get reduced by up to 30% (CSS files)<sup 115 id="fnref3"><a href="#fn3">3</a></sup>.</p> 116 <!-- /p --> 117 118 <h2>Conclusion</h2> 119 120 <p> 121 Since my recent exit from multiple services because of privacy terms concerns, I realized having a 122 personal website can substitute social networks. I get to share anything I want on my own terms 123 (and with my own theme!), ensuring privacy to anybody who wants to read, and I get to keep the 124 copyright over my content. I now have my corner of the Internet, where everyone can find me, 125 contact me and read what I have to share.</p> 126 <!-- /p --> 127 128 <!-- footnotes --> 129 <hr /> 130 131 <ol> 132 <li id="fn1"> 133 I use WordPress as the dynamic alternative because it has a free license, it is 134 beginner-friendly, it can easily be configured to run a personal website with a blog and a 135 portfolio and because it is very popular. However, if you are thinking about creating a dynamic 136 personal site, you should consider other options that are also interesting. <a href="#fnref1" 137 title="Jump back to footnote 1 in the text">↩</a></li> 138 <!-- /li --> 139 <li id="fn2"> 140 You can still change the contents in a static site, however, you will have to edit the text 141 files manually and then upload them to the server (this can be automated). It is less 142 complicated than it sounds once you learn Markdown (which is very simple). <a href="#fnref2" 143 title="Jump back to footnote 2 in the text">↩</a></p></li> 144 <!-- /li --> 145 <li id="fn3"> 146 On top of that, you can always find the source code well indented in the repository, by clicking 147 on <em>Inspect element</em> or by using a prettifier. <a href="#fnref3" title="Jump back to 148 footnote 3 in the text">↩</a></li> 149 <!-- /li --> 150 </ol>