Omar Al-Mashjari // Recent content on Omar Al-Mashjari Hugo -- en-us Copyright © 2019, Omar AlMashjari; all rights reserved. Mon, 24 Dec 2018 22:29:49 +0400 Lessons From Minimist // Mon, 24 Dec 2018 22:29:49 +0400 // <p>So I released my first Hugo them few days ago, Minimist. A minimal theme I developed for my blog and <a href="">open-sourced it</a>. It currently supports Google Analytics, RSS, Favicon, code highlighting and it is responsive and SEO friendly. However, It&rsquo;s still a beta release. So I&rsquo;m working on adding some needed features like Disqus support, contact/newsletter forms, RTL support, internationalization and many more.</p> <p>I&rsquo;m not going to talk about the process of developing Minimist here (I may do it later), instead I want to pinpoint few of the things I learned in this project for future reference.</p> <h2 id="project-wise">Project-wise</h2> <h3 id="makefiles">Makefiles</h3> <p>A <code>Makefile</code> is a file that holds sequences of shell commands that can be triggered with one command. <code>make 'keyword'</code>.</p> <pre><code class="language-Makefile">build: clean hugo --source exampleSite demo: hugo server --buildDrafts --source exampleSite clean: rm -rf public rm -rf demo </code></pre> <p>If you tend to forget specific commands or flags that are important to your project, then Makefiles can be used to create aliases. If you want to run build commands for an automated continuous deployment line then Makefiles can organize your build commands.</p> <h3 id="netlify-s-build">Netlify&rsquo;s build</h3> <p><a href="">Netlify</a> can host your static websites for free, not only that, but also can be used as continuous deployment platform. You can deploy branches, pull requests or production ready versions automatically. <a href="">I currently use Netlify</a> to host Minimist&rsquo;s demo. It loads the content from <code>./exampleSite</code> and uses the repo theme files to build the site once I commit to master.</p> <h3 id="npm-scripts">NPM scripts</h3> <p>If you&rsquo;re using NPM to manage your dependencies, then you must utilize the <a href="">scripts field</a> in the project&rsquo;s <code>package.json</code>. Scripts object holds multiple one-line commands (concatenate paralleled commands with an <code>&amp;</code> ). NPM scripts have specific names, and specific roles. For example I usually start my development server with <code>npm run start</code> which runs my webpack dev-server <code>webpack-dev-server --mode=development</code>. Or start instances of Pug + Sass compilers <code>pug -P --watch src/index.pug &amp; sass --watch src/main.sass src/main.css</code> with <code>npm run dev</code>.</p> <h3 id="try-yarn">Try yarn</h3> <p>They say it has some cool features. Idk for now.</p> <h3 id="how-to-tag-software-releases-in-github">How to tag software releases in Github</h3> <p>There are two ways to add a release tag to a specific version of a software. One is general and used for all <a href="">Git based systems</a>. The other is to specify it within Github interface (from the releases tab choose &lsquo;Draft a new release&rsquo;). I found the latter to be better if your repository is on Github, especially if you are using version badges in README.</p> <h3 id="hugo-docs-is-your-friend">Hugo docs is your friend</h3> <p>In case you&rsquo;re developing for Hugo. The documentation has almost all of what you need, just understand the fundamentals first.</p> <h3 id="hugo-single-vs-list">Hugo Single vs List</h3> <p>A list page template represents a section&rsquo;s homepage, it usually lists all single pages within it (think a blog section). A single page template represents your regular content page (think a blog post). Now, you need to understand how content organization matter in Hugo:</p> <pre><code class="language-bash">/content //&lt;- single page template, /blog //&lt;- list page template, //&lt;- single page template, /special-posts //&lt;- list page template, //&lt;- single page template, /blog-without-index-md //&lt;- list page template, //&lt;- single page template, </code></pre> <p><strong>Rule of thumb:</strong> A folder will use the list template, an &lsquo;.md&rsquo; file will use the single template. (<a href=""> is a special file in Hugo</a>)</p> <h3 id="learn">Learn</h3> <p>If you are developing a theme for the first time for a specific platform, then use existing open-source themes for that platform to learn how to accomplish specific parts or the general management of a project.</p> <h3 id="teach">Teach</h3> <p>Once you feel comfortable developing for a specific platform, help others.</p> <ul> <li>Answer questions on StackOverflow, it will help you too.</li> <li>Open-source your theme and add it to <a href="">Hugo themes</a>.</li> <li>Contribute to <a href="">Hugo docs</a>.</li> </ul> <h2 id="css-wise">CSS-wise</h2> <h3 id="css-methodologies">CSS Methodologies</h3> <p>If you are using CSS, then invest some time in learning at least one CSS writing methodology and stick to it within your project. Spaghetti CSS is the worst. Search google for &ldquo;CSS methodologies&rdquo; as a start.</p> <h3 id="flexbox-vs-grid">Flexbox vs. Grid</h3> <p>The rule of thumb to know which to use is that Flexbox used for laying out one-dimension elements (think columns OR rows), Grid is used for two-dimensions (think columns AND rows). So it is actually fine to style your page&rsquo;s main elements using flex.</p> <h3 id="auto-margins-and-flexbox">Auto margins and Flexbox</h3> <p>Here is a quick trick, if you want an element to be positioned at the end of your flex direction, then add an auto margin between the element and the rest of the elements. I use this trick to stick the page&rsquo;s footer to the end of the page even if the main content is shorter than screen size.</p> <p>If you have a correction/suggestion, please tweet me.</p> <p>&ndash; Omar</p> About // Tue, 27 Nov 2018 00:01:58 +0400 // <p>A web developer based in Abu Dhabi, UAE. Specializing in UI, UX, web animations, web performance and web administration.</p> <p>Graduated recently with a BSc of Science in Information Technology and currently spending the time building my <a href="">portfolio</a>, creating &amp; contributing to <a href="">open-source</a> and <a href="">writing</a>.</p> <p>If you need a hand with a web development project, contact me at <a href=""></a>.</p> <p>— Omar <br> <em>November, 2018</em></p> SSL Certificate Mess // Tue, 23 Oct 2018 09:34:04 +0400 // <p>I don&rsquo;t usually focus on lectures, especially if I did not know how I&rsquo;m going to benefit from them. However, I admit that I should have paid more attention at networking classes.</p> <p>I&rsquo;m currently managing different domains and subdomains that points to different hosting servers or landing pages while also using CloudFlare on some of them. I&rsquo;ve usually depended on paid SSL certificates but never took the time to research what are the different options to secure my websites. In an effort to cut costs, I decided to get my hands dirty and learn what are the different options and what they offer.</p> <p>After a basic research I discovered a new war in the list of internet wars. Apple vs. Samsung, Angular vs. React, Linux vs. the world, &hellip; and Self-Signed vs. Certificate Authority. Many names and abbreviations raised up like Domain-Validation, Extended-Validation, certificate authority, self-signed certificates, Let&rsquo;s Encrypt, wildcard certificates, multi-domain certificates, CloudFlare Origin certificates, CloudFlare Edge certificates, AutoSSL and OpenSSL. It took me few days to get things straightened out and figure which is which, and I will try in this article to save you some of that time.</p> <h2 id="know-your-requirements">Know your requirements</h2> <p>To consider the options, start by choosing the type of certificate you need.</p> <h3 id="1-dv-ov-ev">1: DV / OV / EV</h3> <p><strong>Domain-Validation (DV):</strong> is a certificate that provides encryption to your website&rsquo;s connection. All you need to get a DV certificate is to prove you have control over the domain name.<br> <strong>&gt; Encryption.</strong></p> <p><strong>Organization-Validation (OV):</strong> A certificate that proves the organization&rsquo;s existence and its control over the domain name.<br> <strong>&gt; Encryption + Identification.</strong></p> <p><strong>Extended-Validation (EV):</strong> An OV certificate with higher authentication standards in addition to the browser green address bar.<br> <strong>&gt; Encryption + Identification + Browser green address bar.</strong></p> <figure> <img src="../../uploads/greenAddressBar.png" alt="Green Address Bar"/> <figcaption> <p>Browser&rsquo;s green address bar - credits</p> </figcaption> </figure> <h3 id="2-wildcard-or-not">2: Wildcard or not</h3> <p>A wildcard certificate covers all subdomains of a website. (*</p> <h3 id="3-multi-domain-san-ssl-or-not">3: Multi-domain (SAN SSL) or not</h3> <p>A multi-domain certificate covers multiple domains on one certificate. This certificate can be installed on the different domains (even with different hosting servers).</p> <p>One thing to note here, the less domains on a certificate; the better. The number of domains can slow down the process of validating the certificate on each session.</p> <h2 id="consider-the-options">Consider the options</h2> <p>If you chose to go with OV or EV then your options are limited to the different certificate authorities and their offers.</p> <p>In the case you decided Domain-Validation (DV) is good enough for your needs, then you&rsquo;ll have plenty of options to choose from.</p> <h3 id="certificate-authorities">Certificate Authorities</h3> <p>Certificate Authorities (CA) like GeoTrust, Thawte, Comodo, DegiCert and Symantec are entities where you can buy digital certificates from. They usually offer all different types of certificates for different prices. DV, OV, EV, single-domain, multi-domain, wildcard, &hellip;etc under different brand names like PositiveSSL, EssentialSSL, InstantSSL. DV is the cheapest, most common, and covers most websites needs.</p> <h3 id="self-signed-certificates">Self-signed certificates</h3> <p>Self-signed certificates are digital certificates signed by the same person who it certifies (say I generate and sign a certificate for This kind of certificate offers same-level encryption features as certificates signed by a certificate authority. However, it does not verify control over the domain. Thus, Chrome and many browsers will show the infamous &lsquo;not secure site&rsquo; error to the visitors of a page with self-signed certificate.</p> <h3 id="let-s-encrypt">Let&rsquo;s Encrypt</h3> <p><a href="">Let&rsquo;s Encrypt (LE)</a> is a CA that issues DV certificates for free. It is an initiative supported by major companies like Mozilla, Google, and many more. However, there are few restrictions that comes with LE for now. If you are hosting your website on a shared hosting plan (or do not have root access for any reason) then you&rsquo;ll be at a disadvantage. Since you don&rsquo;t have root access you won&rsquo;t be able to install a Let&rsquo;s Encrypt client like Certbot on the server. A client helps you manage issuance and renewals of LE&rsquo;s certificates. You&rsquo;ll still have the option to issue, renew, and install certificates manually every 90 days, however, no wildcard support for manually issued certificates <a href="#notes">[2]</a>.</p> <h3 id="autossl">AutoSSL</h3> <p>AutoSSL is a feature of cPanel dashboard. It lets you automate issuing and and installing free DV SSL certificates powered by either Comodo or Let&rsquo;s Encrypt <a href="#notes">[3]</a>. However it only works on a Virtual Private Servers (VPS) but not on shared hosting plans. This is a great option in case you prefer working with GUIs.</p> <h3 id="cloudflare">CloudFlare</h3> <p>Cloudflare (CF) is a service that act as an intermediary between your visitors&rsquo; browsers and your server. Basically a <a href="">CDN</a>. CloudFlare also offers many features (for free) that helps you admin all aspects of your website, from DNS records, Caching, forcing HTTPS, SSL certificates, DDoS protection and many more.</p> <h4 id="cf-edge-certificates">CF Edge Certificates</h4> <p>Since visitors to your website are served through CF servers, CF offers to serve free SSL certificates to your users, meaning it will secure the connection between your visitors and CF servers.</p> <figure> <img src="../../uploads/edgeSSL.png" alt="Green Address Bar"/> <figcaption> <p>Secure connection between visitors and CF servers only - credits</p> </figcaption> </figure> <p>Accordingly, a shared SSL certificate will be present for your visitors, which means this certificate will include a list of different domains, that will also include your domain. In case you want CloudFlare to show your visitors a dedicated SSL certificate for you only, then you can choose between two paid options (5$ for one domain and 10$ for multi-domain per month).</p> <h4 id="origin-certificates">Origin Certificates</h4> <p>Even though you&rsquo;ve secured the connection between your visitors&rsquo; browsers and CF servers, the connection to your origin server (hosting server) is not secure yet. This means any data being transferred back to your origin server from CF is not encrypted.</p> <figure> <img src="../../uploads/originSSL.png" alt="Green Address Bar"/> <figcaption> <p>CF origin certificates secures the connection to your website&rsquo;s hosting server - credits</p> </figcaption> </figure> <p>CloudFlare gives you the option to generate a self-signed certificate from its dashboard and install it manually on your origin server. You&rsquo;d think think, why would I install a self-signed certificate on my server when most browsers do not trust it? When using CloudFlare services, browsers do not communicate with your origin server directly <a href="#notes">[4]</a>. Instead, only CloudFlare communicates with your origin server, thus you only need CloudFlare&rsquo;s trust. This certificate will allow you to secure the connection to your origin server for up to 15 years without expiry.</p> <h2 id="my-personal-take">My personal take</h2> <p>In my opinion, DV is enough for most use cases, this includes personal websites, professional forums, and even start-up e-commerce sites. Wildcard support is quite important for me, because I do not prefer managing different certificates for one website. Nevertheless, I prefer not to use multi-domain certificates, it just makes it easier to manage and it also keeps other domains from being exposed to visitors of another domain. EV in e-commerce can be beneficial if you have the budget for it.</p> <p>On a completely different topic, I know that VPS can provide many options that shared hosting plans do not offer, yet I can&rsquo;t recommend either because it depends on your website&rsquo;s needs and your expertise. If your hosting a static site, just like this blog, a shared or even free hosting plan is way cheaper and easier to set up.</p> <h2 id="a-id-notes-a-notes"><a id="notes"></a>Notes</h2> <ol> <li><p>SSL (Secure Sockets Layer) abbreviation has been deprecated since 1999, and TLS (Transport Layer Security) came to replace it. However, &lsquo;SSL&rsquo; is still commonly used on the internet.</p></li> <li><p>There is actually a way to issue Let&rsquo;s Encrypt wildcard certificates manually through docker. Look <a href="">here</a> for reference.</p></li> <li><p>Let&rsquo;s Encrypt is not enabled by default in cPanel&rsquo;s AutoSSL, <a href="">here</a> is how to enable it.</p></li> <li><p>Your DNS routing has to be enabled through CloudFlare (The orange cloud symbol next to the DNS record in dashboard&rsquo;s DNS page).</p></li> <li><p>Many people believe that SSL Certificate Authorities are a scam, and they do not provide any value for the internet. You can read about it <a href="">here</a> &amp; <a href="">here</a>.</p></li> </ol> <p>&ndash; Omar</p> On Writing // Sat, 06 Jan 2018 21:14:47 +0400 // <p>This is an informal chatter about non interconnected ideas.</p> <p>During this time that I&rsquo;ve been absent, I had multiple experiences. Many things that I could&rsquo;ve shared in this blog. However, all of them ended once I finished them, and I stopped thinking about them immediately. Hackathons/ideas/events/projects.. etc.</p> <p>To be able to write your reflections about something, and derive your conclusions, you shall give it the time it deserves. Moving from an experience to another, without putting the time to think and derive lessons will make you as educated as you were before the experience.</p> <p>Ideas and experiences need to ferment (تتخمر) just like anything else before it&rsquo;s learned, and then released after.</p> <p>I worked on multiple projects, tried different things, went to festivals, picnics, rides, and more. Yet couldn&rsquo;t write about any of the lessons I learned because they were following each other. I&rsquo;m not saying you have to write about anything you experience, but you need to write more to get better at writing.</p> <p>One more thing, whenever starting a draft, write your objectives somewhere on the side because when you come back to it you&rsquo;ll probably forget what you were writing for. I learned this the hard way.</p> <p>&ndash; Omar</p> Deploying Hugo Website Using Rsync // Tue, 15 Aug 2017 00:35:17 +0400 // <p>In my first post I mentioned that I&rsquo;m planning to write a script to automate the deployment to this static blog built using Hugo. What I was expecting at first is that I&rsquo;m going to write a script similar to:</p> <pre><code class="language-bash">ftp user useridhere passwordhere put index.html </code></pre> <p>But after searching I just realized FTP sessions cannot be automated this way. Instead it can be done using Powershell, cURL, or a scripting language like Python. Then I came to <a href="">this github repo</a> and discovered rsync.</p> <p>Rsync is a synchronization tool (or &lsquo;file-copying&rsquo; as described in their website), can be used locally or with remote servers. What makes rsync so popular is that it only syncs the portions of files that have been changed. Means less data to transfer and less time to sync. &mdash;you know you don&rsquo;t have to upload your whole website every time you edit a typo!</p> <h3 id="how-to-automate-your-static-site">How to automate your static site</h3> <p>you can find a similar guide <a href="">here</a>. I had some issues with it, so here is what I did.</p> <h4 id="1-enable-ssh-on-your-hosting-server">1. Enable SSH on your hosting server</h4> <p>In my case I&rsquo;m using a shared hosting plan from <a href="">Namecheap</a>, so I just had to chat&rsquo;em up to enable it for me. If you have a dedicated server, make sure to install/enable <a href="">OpenSSH</a>.</p> <p>If you are hosting your project on Github, you can easily host your whole static website for free on <a href="">Github Pages</a>, and set up <a href="">Travis CI</a> for automated builds and deployment. Check out this <a href="">tutorial</a>.</p> <h4 id="2-install-rsync">2. Install rsync</h4> <p>Most probably you already have it installed, to make sure, run in your terminal:</p> <pre><code class="language-bash">rsync --version </code></pre> <p>If it showed the version details, then skip this step. In case it&rsquo;s not installed, use the following commands to install using Homebrew package manager on mac OS:</p> <pre><code class="language-bash">brew tap homebrew/science brew install rsync </code></pre> <p>If you have a windows machine, <a href="">this guide</a> should be helpful.</p> <h4 id="3-test-your-ssh">3. Test your SSH</h4> <p>Before you start with the script make sure that your ssh is working without errors (better than debugging later). Connect to your server using the following command:</p> <pre><code class="language-bash">ssh -p {port number} {user}@{server IP} </code></pre> <p>then enter your password.</p> <p>If it worked then,</p> <pre><code class="language-bash">exit </code></pre> <figure> <img src="../../uploads/sshConnect.png" alt="SSH connection"/> <figcaption> <p>SSH connection should look something like this</p> </figcaption> </figure> <h4 id="4-write-the-bash-script">4. Write the Bash script</h4> <p>To do that, head to your terminal, then run the follwoing commands one by one</p> <pre><code class="language-bash">cd {your website directory} nano deploy </code></pre> <p>then copy &amp; paste this script and fill in the arguments in the curly brackets.</p> <pre><code class="language-bash">#!/bin/sh USER={yourUsername} HOST={HostServerIP} DIR={DirectoryOfYourPublicWebsiteFiles} hugo &amp;&amp; rsync -avz -e 'ssh -p {portNumber}' --delete public/ ${USER}@${HOST}:~/${DIR} exit 0 </code></pre> <p>DIR variable can be left empty if you want to copy to the root folder of your server.</p> <p>What the script does is deleting the &lsquo;public&rsquo; folder (which is the old copy of your generated site) then builds your website (hugo command) and copies the contents of the new generated public directory to your server.</p> <p>Because rsync keeps track of the copied folder, it will only copy the portions that have changed in your website. It&rsquo;s should be fast, rest assured.</p> <figure> <img src="../../uploads/deployScript.png" alt="SSH connection"/> <figcaption> <p>After filling the arguments looks like this</p> </figcaption> </figure> <p>after pasting the script exit the editor using (ctrl + x) on mac, and save the changes to the file. On the terminal again run the follwoing command:</p> <pre><code class="language-bash">chmod +x deploy </code></pre> <p>to make it an executable script.</p> <h4 id="5-run-the-script">5. Run the script</h4> <p>Now that your have everything set up, whenever you make changes or want to puplish a new article just head up to your website directory in the terminal and run the script:</p> <pre><code class="language-bash">./deploy </code></pre> <p>or</p> <pre><code class="language-bash">source deploy </code></pre> <h3 id="links">links</h3> <ul> <li><a href="">Here is a great guide about rsync</a></li> <li><a href="">Rsync documentation</a></li> <li><a href="">Netlify</a> also offers free hosting and continuous deployment plans for static websites.</li> </ul> <p>&ndash; Omar</p> Thoughts On Maslow's Hierarchy Of Needs // Mon, 31 Jul 2017 16:03:19 +0400 // <p>In a psychology class, and after discussing Maslow&rsquo;s hierarchy of needs and how it explains how motivation in humans works, the professor asked &ldquo;<em>How do explain the people who became artists/musicians/..etc and achieved a level of fulfillment and happiness but also has been poor and did not having all life essentials?</em>&rdquo;. This question triggered me, maybe because it&rsquo;s linked to the topics of happiness and satisfaction and how do we define them and most importantly how can I apply them in my life.</p> <h3 id="what-is-maslow-s-hierarchy">What is Maslow&rsquo;s hierarchy?</h3> <p>Maslow&rsquo;s hierarchy as defined in Wikipedia is a theory proposed to explain human acts&rsquo; motivations, and how do our motivations grow and move-through to reach the top level which he called &lsquo;self transcendent&rsquo; or &lsquo;self actualization&rsquo;.</p> <p>Ultimately the theory pictures the shape of a pyramid consists of five levels (or six in some graphs). The levels starts with our most basic needs to survive at the bottom then goes through the human needs ranking them by their importance to our lives.</p> <figure> <img src="../../uploads/MaslowsPyramid.png" alt="Maslow&#39;s Pyramid"/> <figcaption> <p>Maslow&rsquo;s pyramid as his Hierarchy Of Needs theory explains it</p> </figcaption> </figure> <h3 id="how-did-i-explain-it">How did I explain it?</h3> <p>Going back to the question of the professor. Let&rsquo;s rephrase the question as follows, &ldquo;<em>How do you explain people who can reach a level of self actualization and fulfillment without achieving the lower levels of the pyramid?</em>&ldquo;</p> <p>How I see it is that people have different definitions of what is &ldquo;enough&rdquo;, and &ldquo;enough&rdquo; is the keyword here. What is enough food for one person maybe not enough for another. An artist or a musician who finds his joy in painting or playing instruments without really caring if he is does have food for his dinner or not, sees that it&rsquo;s enough for him to eat what will keep him alive. For another person &ldquo;enough&rdquo; means being assured to get three meals on his table everyday. For another, it&rsquo;s the three meals plus desserts, appetizers and maybe chocolate bars every once in a while. &ldquo;Enough&rdquo; is our basic requirement that if we fulfilled we&rsquo;ll step up in Maslow&rsquo;s pyramid looking for our next need. This example applies to the rest of the needs as well. Love and belonging is not a necessity for everyone, the minimum of it is enough for some people. Self esteem and acceptance can be attained by different things, maybe the creative work produced by a creator, that open-source application you contributed to, or your regular contribution to charities and so on.</p> <p>Humans are greedy by nature, and being satisfied with what is currently achieved in one level is not actually a nature of us. Even if you can fulfill the first level of physiological needs by eating a sandwich of falafel from a food truck for instance, yet a rich person would like to eat a better meal, maybe an expensive one in a good restaurant with good service. So if this rich person did not get his requirement as he want it; he won&rsquo;t be satisfied. One more, it is possible to survive by drinking water only, yet neither I nor you would feel satisfied if we were banned from drinking juices and refreshments for example. The whole point I want to say is that if you have less requirements you&rsquo;ll be able to achieve them easily.</p> <p><strong>To portray that, the smaller the height of your levels, the easier it becomes to fulfill them and reach the top of the pyramid.</strong></p> <p>I&rsquo;m sure this is not a new idea, it has been around since the existence of the first philosophers probably. Religions also have encouraged the idea of having less needs in &ldquo;Dunya&rdquo; or the first life, known in Islam as &ldquo;Zuhd&rdquo;. Also it&rsquo;s linked to the recent hype of &ldquo;minimalism&rdquo;.</p> <p>I don&rsquo;t say a person should have smaller goals, but I say a person should have less requirements. Having less load to carry will make it easier for you to climb the pyramid.</p> <p>To sum up, always keep your &ldquo;enough&rdquo; less than what is possible for you to afford. Also take a look at <a href="">Tim Urban&rsquo;s article</a>, I think he tackled the topic better than me. And if you&rsquo;re interested in human&rsquo;s motivations theories, <a href="">Wikipedia&rsquo;s page</a> is a good start.</p> <p>&ndash; Omar</p> First Post & Hugo Site Generator // Sat, 29 Jul 2017 18:40:55 +0400 // <p>For a long time I&rsquo;ve been planning to have my own blog and publish the articles that have been living on my desktop for a while, until three days ago when I was going back and forth between tutorials and examples teaching Webpack for myself (I&rsquo;ll post about it soon) and visited a blog which is built using Hugo. Of course I noticed because I use a <a href="">chrome extension</a> for that. Without giving it a thought I headed to &lsquo;<a href="">Quick Start</a>&rsquo; page in Hugo docs and started building.</p> <p>Guess what? 10 minutes and I already have my own blog (it shouldn&rsquo;t take more than 3 minutes from you, but because of how perfectionist I am, I had to update everything).</p> <p>Let&rsquo;s cut to the chase. I&rsquo;ve tried <a href="">Jekyll</a>, <a href="">Cactus</a>, and played with <a href="">Middleman</a> before, and now Hugo, and I&rsquo;m impressed. Although I know nearly zero things about Go language (which Hugo is built in) I was able to install the themes and customize it with almost no problem at all. I like how the config file is so clear and simple (toml rocks!), folder structure too. The commands used to build the website are straightforward and debugging errors is easy. Even if you have zero experience with the command-line you would be able to do it in a matter of minutes. I&rsquo;m not kidding, it&rsquo;s easy to the extent that you can create a website blindfolded (I tried it!). Best thing? <a href="">Themes</a> 😍. +100 themes are ready to be installed with one command.</p> <p>I don&rsquo;t want to sound like a fanboy but the errors I had to debug when building with Jekyll really made me think that it has to be a tiresome process to customize a static site theme, especially if you don&rsquo;t know the templating language used. This time I had no problem.</p> <h3 id="my-setup">My setup</h3> <p>Currently I use <a href="">Hugo-Cactus-Theme</a>. Which is one of the default Themes in Cactus. It&rsquo;s quite simple and clean. Still I had to tweak it a bit. I moved the social links to be inside the &lsquo;profile&rsquo; div so it becomes on top of posts. Added few dots separator between the description and the links because it looks nice. duh! And added more width to the main container on desktop screens.</p> <h3 id="deployment">Deployment</h3> <p>IMPORTANT: If you&rsquo;re going to use this same theme, edit the absolute paths to relative. It&rsquo;s going to solve your problem I know it! To do this use your editor&rsquo;s Replace functionality to search for &lsquo;absURL&rsquo; in all the files inside &lsquo;themes/hugo-cactus-theme/layouts&rsquo; and replace it to &lsquo;relURL&rsquo;, then set &lsquo;relativeURLs = true&rsquo; in your &lsquo;config.toml&rsquo;.</p> <p>Next, just go and remove your &lsquo;/public&rsquo; directory and rebuild your blog, and the public folder will be created again all new and shiny. Copy the contents of &lsquo;/public&rsquo; to your web server and you&rsquo;re all set up.</p> <h3 id="plans">Plans</h3> <p>Because I&rsquo;m the perfectionist and lazy person I am, I will probably write a bash or ruby script to automate the deployment process so posting can be easier. I should also think about integrating Webpack for no reason at all.</p> <p>Hope this become a good start for it. Keep coming back!</p> <p>&ndash; Omar</p> AboutV2 // Mon, 01 Jan 0001 00:00:00 +0000 // <p>Web developer based in Abu Dhabi, UAE. Currently working at <a href="">schoolvoice</a>.</p> <p>I like to <a href="//">write</a>, though I don&rsquo;t always find the time to. I like to contribute to <a href="">open-source</a> and I freelance on the side. If you need a hand with a project, let me know at <a href="">[email]</a>.</p> <p>— Omar <br> <em>May, 2019</em></p>