<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Andreas Pappas</title>
    <description>The latest articles on DEV Community by Andreas Pappas (@andrewpap22).</description>
    <link>https://dev.to/andrewpap22</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F481119%2F3db90f31-963e-4f52-8f5f-55c76dad90b6.png</url>
      <title>DEV Community: Andreas Pappas</title>
      <link>https://dev.to/andrewpap22</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/andrewpap22"/>
    <language>en</language>
    <item>
      <title>A 97.7% JavaScript Template Blog Website</title>
      <dc:creator>Andreas Pappas</dc:creator>
      <pubDate>Tue, 17 Aug 2021 11:19:40 +0000</pubDate>
      <link>https://dev.to/andrewpap22/a-97-7-javascript-template-blog-website-3onc</link>
      <guid>https://dev.to/andrewpap22/a-97-7-javascript-template-blog-website-3onc</guid>
      <description>&lt;p&gt;Hi there 👋&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;/// NOTE❗ This will be a large post&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;em&gt;For 🌩️ fast instructions to get up and running with the project follow the 👇 README on the repo&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;As mentioned in the &lt;code&gt;&lt;a href="https://github.com/andrewpap22/andreaspappas/blob/main/README.md" rel="noopener noreferrer"&gt;README.md&lt;/a&gt;&lt;/code&gt; page&lt;br&gt;
of this repo, this post will serve to provide, detailed information and instructions about making this particular project your own.&lt;br&gt;
i.e. modify it as you see fit, (to make it your own personal Blog or Portfolio page), learn which parts you should and shouldn't modify,&lt;br&gt;
how to run and develop it locally, the prerequisites for doing so, how to deploy it using free hosting services like GitHub pages and netlify, how to&lt;br&gt;
change the default domain name of those services and apply your own custom one and eventually get familiar enough with it so you could contriubute to it,&lt;br&gt;
by implementing stuff from the &lt;code&gt;&lt;a href="https://github.com/andrewpap22/andreaspappas/blob/main/README.md#project-roadmap" rel="noopener noreferrer"&gt;Project Roadmap&lt;/a&gt;&lt;/code&gt;, if you feel like it! 😀&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.netlify.com/sites/andreaspappas/deploys" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fapi.netlify.com%2Fapi%2Fv1%2Fbadges%2F33071dfc-5c6d-4963-a927-4a9f7b8cb57a%2Fdeploy-status" alt="Netlify Status"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://opensource.org/" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fbadges.frapsoft.com%2Fos%2Fv1%2Fopen-source.svg%3Fv%3D103" alt="Open Source"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://opensource.org/licenses/MIT" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLicense-MIT-yellow.svg" alt="License: MIT"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;😰 Stuck?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Try &lt;a href="${data.pkg.bugs.url}"&gt;submitting an issue on GitHub&lt;/a&gt; where friendly folks can try to help.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  🏇 Let's get started
&lt;/h2&gt;

&lt;p&gt;But first, &lt;em&gt;let me take a selfie 🤳&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Ok no.&lt;/p&gt;

&lt;p&gt;First of all we need to discuss about &lt;em&gt;what programs you need to have on your machine&lt;/em&gt; in order&lt;br&gt;
to get this project up and running on a &lt;em&gt;Local Development Environment&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;But what is a &lt;em&gt;Local Development Environment&lt;/em&gt;?&lt;/p&gt;

&lt;p&gt;A local development environment allows you to run an &lt;em&gt;exact copy&lt;/em&gt; of a project on your own computer. And, thanks to &lt;a href="//${data.pkg.homepage}"&gt;Git&lt;/a&gt;, you can sync your local copy with the published copy online too.&lt;/p&gt;

&lt;p&gt;In other words, you—and whoever else you may want to collaborate with on your project—can break your project, then fix it, then break it some more, all on your own computer. Feel free to test and tinker to your heart’s content before ever releasing the new (and hopefully improved) version to the public.&lt;/p&gt;
&lt;h3&gt;
  
  
  ⬇️ What Software Programs You will Need to Install
&lt;/h3&gt;

&lt;p&gt;🦁's Blog uses a program called &lt;a href="https://11ty.dev/" rel="noopener noreferrer"&gt;Eleventy&lt;/a&gt; (11ty) to build websites. Eleventy is a type of program known as a &lt;em&gt;static site generator&lt;/em&gt;, which basically builds a fresh copy of your site everytime you save a change.&lt;br&gt;
Both 🦁's Blog and Eleventy run on a program called &lt;a href="https://nodejs.org/" rel="noopener noreferrer"&gt;Node.js&lt;/a&gt; under the hood. Node.js gives you a local &lt;em&gt;&lt;a href="https://www.codecademy.com/articles/introduction-to-javascript-runtime-environments#:~:text=A%20runtime%20environment%20is%20where,(like%20Chrome%2C%20or%20Firefox)" rel="noopener noreferrer"&gt;JavaScript runtime environement&lt;/a&gt;&lt;/em&gt;, which basically means you can use software written in JavaScript on your computer.&lt;br&gt;
Before programs like Node.js, JavaScript was pretty much confined to the browser. But now, thanks to Eleventy, you can use the same progmramming language to run a server, write your content, generate your site, and interact with users.&lt;/p&gt;

&lt;p&gt;All three programs—Node.js, Eleventy, and 🦁's Blog—are &lt;em&gt;free and open source software&lt;/em&gt; (FOSS), meaning the code is publicly avaialble.&lt;br&gt;
In fact, you’re encouraged to remix your own local copy, create something new and worthwhile with it, and even suggest changes to the original source code.&lt;/p&gt;

&lt;p&gt;Before getting to the installation part, first I suggest that you try to get familiar to using the so called 😱 &lt;em&gt;Terminal&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fi.imgur.com%2FMzXZZri.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/http%3A%2F%2Fi.imgur.com%2FMzXZZri.gif" alt="artixDesktop"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  💻 Accessing Your Terminal
&lt;/h3&gt;

&lt;p&gt;Every operating system (Windows, macOS, Linux, etc.) comes with a text-based command line interface (CLI, console, or terminal) to enter commands you want your computer to run.&lt;br&gt;
The CLI is a powerful tool for interacting with your personal workstation beyond the graphical user interface (GUI) with which you may be more familiar.&lt;br&gt;
Of course, if you’ve ever used a computer without a mouse or touchpad, then you might feel right at &lt;em&gt;127.0.0.1&lt;/em&gt; in the command line.&lt;br&gt;
Intead of “pointing and clicking” with a mouse or touchpad 🖱️, you can “talk” to your computer from your keyboard ⌨️.&lt;br&gt;
Keyboard commands are a really expressive and efficient way to accomplish a lot of tasks that are often outside the reach of the GUI.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;What would be easier, searching on google for a program that you might want to install and click, scroll, drag, type stuff or,&lt;/p&gt;

&lt;p&gt;simply, write a command on your terminal emulator by providing the name of the program that you want to install and let it do it's thing for you?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Here’s a 📝 list of the command line tools that come preinstalled with some of the most popular operating systems:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;On 🐧 Linux, the default console is called &lt;a href="https://ubuntu.com/tutorials/command-line-for-beginners" rel="noopener noreferrer"&gt;Terminal&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;On 🍏 macOS, the default console is called &lt;a href="https://support.apple.com/guide/terminal/welcome/mac" rel="noopener noreferrer"&gt;Terminal.app&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;On 🏢 Windows, the default console has been &lt;a href="https://support.microsoft.com/en-us/help/4027690/windows-powershell-is-replacing-command-prompt" rel="noopener noreferrer"&gt;Command Prompt&lt;/a&gt; for ages, but since Windows 10, you can now use a Linux-based tool called &lt;a href="https://devblogs.microsoft.com/commandline/introducing-windows-terminal/" rel="noopener noreferrer"&gt;Windows Terminal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;If you’re on Windows, then I’ll assume you’re able to access the newer Linux-based Windows Terminal for entering commands.&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  ⌨️ Entering Commands
&lt;/h3&gt;

&lt;p&gt;Now that you have an idea of how useful your terminal is and how to access it, you can start learning your way around the command line interface.&lt;br&gt;
Some of the most important skills to learn involve listing the contents of a folder or “directory” and moving from one directory to another.&lt;br&gt;
Many commands depend on the directory in which you happen to be working at the time.&lt;br&gt;
You can use the &lt;code&gt;ls&lt;/code&gt; command to &lt;em&gt;list&lt;/em&gt; the files in the current “working directory.”&lt;br&gt;
Likewise, you can use the &lt;code&gt;cd&lt;/code&gt; command the &lt;em&gt;change&lt;/em&gt; from one directory to another:&lt;br&gt;
Typing only &lt;code&gt;cd&lt;/code&gt; will change to the top-level directory in your directory tree (often referred to as your &lt;em&gt;home&lt;/em&gt; 🏡 directory).&lt;br&gt;
To go &lt;em&gt;down&lt;/em&gt; ⬇️ 📂 from the current directory to one inside it, you can type &lt;code&gt;cd&lt;/code&gt; followed by the name of the directory you want to open.&lt;br&gt;
For example, &lt;code&gt;cd ./Downloads&lt;/code&gt;.&lt;br&gt;
To go &lt;em&gt;up&lt;/em&gt; ⬆️ 📂 from the current directory to another one outside it, you can type &lt;code&gt;cd ../&lt;/code&gt;.&lt;br&gt;
This command will go up one level from the current directory, for example, from &lt;code&gt;Downloads&lt;/code&gt; back up to the directory from which you just came.&lt;br&gt;
You can repeat the sequence &lt;code&gt;../&lt;/code&gt; as many times as you need. Say you wanted to go up two levels: you could type &lt;code&gt;cd ../../&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Once you’re comfortable listing a directory’s contents and moving from one directory to another, you have all the basic command line skills you’ll need to start setting up your local development environment&lt;br&gt;
and install all the programs via it that we'll talk from now and on finally 😶.&lt;/p&gt;
&lt;h3&gt;
  
  
  ⬇️ Installing git
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;I do strongly recommend that you learn what &lt;a href="https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control" rel="noopener noreferrer"&gt;Version Control&lt;/a&gt; is.&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Once you do that, I again strongly recommend that you learn to use and get as familiar as possible with the &lt;a href="https://git-scm.com/" rel="noopener noreferrer"&gt;git&lt;/a&gt; version control system.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Git is widely used and a very very very strong tool and skill for a Software Engineer (and not only) to have.&lt;br&gt;
Also you'll need it to get on your machine this very project itself! 🦁&lt;/p&gt;

&lt;p&gt;The following 2 guides are the &lt;em&gt;official&lt;/em&gt; ones and probably the best that explain simply and clearly how to get git installed,&lt;br&gt;
based on the operating system that you're using.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;1️⃣ &lt;a href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git" rel="noopener noreferrer"&gt;link&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;2️⃣ &lt;a href="https://github.com/git-guides/install-git" rel="noopener noreferrer"&gt;link&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  📚 Learning git
&lt;/h4&gt;

&lt;p&gt;The following 👉 &lt;a href="https://github.com/git-guides/" rel="noopener noreferrer"&gt;GitHub git guide&lt;/a&gt; is a really good guide to get you started into learning git and how you can combine it with a git online service like &lt;a href="https://github.com/" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;But, you can also use browser based online 👉 &lt;a href="https://learngitbranching.js.org/" rel="noopener noreferrer"&gt;games&lt;/a&gt; to keep your attention a bit more while diving into the more advanced parts of it.&lt;/p&gt;

&lt;p&gt;Now that you're familiar with git and GitHub it's time to get 🦁's Blog copy from it's &lt;a href="//${data.pkg.homepage}"&gt;repository&lt;/a&gt;.&lt;br&gt;
Or you can fork it as well and then git clone it from your own fork.&lt;/p&gt;

&lt;p&gt;The procedure to do so would like like this 👇 (but I'm sure at this point you already knew how to do it, it's just an excuse to use &lt;a href="https://github.com/asciinema/asciinema" rel="noopener noreferrer"&gt;asciinema&lt;/a&gt;).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/n4ARs8hjUj2x91YHmr/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/n4ARs8hjUj2x91YHmr/giphy.gif" alt="clone blog instructions gif"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Alright, so what's next?&lt;/p&gt;
&lt;h3&gt;
  
  
  ⬇️ Getting Node.js
&lt;/h3&gt;

&lt;p&gt;Now that we have cloned the project locally on our machine we need Node.js to get it running on our &lt;em&gt;Local Development Environment&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;This again depends on the operating system that you're using but you can follow the official instructions via this 👉 &lt;a href="https://nodejs.org/en/download/" rel="noopener noreferrer"&gt;link&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;At this point I will provide some instructions that I personally know works best to get the latest stable version of Node.js and npm on Linux operating systems (whichever distribution you might be using).&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;/// NOTE❗&lt;/strong&gt;&lt;br&gt;
The following instructions might look a bit advanced or complicated but they're not. Read 'em and follow carefully and you should be good to go.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;
  
  
  ℹ️ About
&lt;/h3&gt;

&lt;p&gt;nvm is a version manager for &lt;a href="https://nodejs.org/en/" rel="noopener noreferrer"&gt;node.js&lt;/a&gt;, designed to be installed per-user, and invoked per-shell. &lt;code&gt;nvm\&lt;/code&gt; works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on these platforms: unix, macOS, and windows WSL.&lt;/p&gt;
&lt;h3&gt;
  
  
  ⬇️ Install &amp;amp; Update Script
&lt;/h3&gt;

&lt;p&gt;To &lt;strong&gt;install&lt;/strong&gt; or &lt;strong&gt;update&lt;/strong&gt; nvm, you should run the [install script]&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;curl &lt;span class="nt"&gt;-o-&lt;/span&gt; https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;wget &lt;span class="nt"&gt;-qO-&lt;/span&gt; https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Running either of the above commands downloads a script and runs it. The script clones the nvm repository to &lt;code&gt;~/.nvm\&lt;/code&gt;,&lt;br&gt;
and attempts to add the source lines from the snippet below to the correct profile file (&lt;code&gt;~/.bash_profile\&lt;/code&gt;, &lt;code&gt;~/.zshrc\&lt;/code&gt;, &lt;code&gt;~/.profile\&lt;/code&gt;, or &lt;code&gt;~/.bashrc\&lt;/code&gt;).&lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  ❗ The following is &lt;strong&gt;ONE&lt;/strong&gt; command, copy paste it as a whole.
&lt;/h3&gt;


&lt;/blockquote&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;NVM_DIR&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="si"&gt;$(&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="nt"&gt;-z&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\$&lt;/span&gt;&lt;span class="s2"&gt;{XDG_CONFIG_HOME-}"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nb"&gt;printf&lt;/span&gt; %s &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\$&lt;/span&gt;&lt;span class="s2"&gt;{HOME}/.nvm"&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nb"&gt;printf&lt;/span&gt; %s &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="se"&gt;\$&lt;/span&gt;&lt;span class="s2"&gt;{XDG_CONFIG_HOME}/nvm"&lt;/span&gt;&lt;span class="si"&gt;)&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;
&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="nt"&gt;-s&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$NVM_DIR&lt;/span&gt;&lt;span class="s2"&gt;/nvm.sh"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="se"&gt;\.&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$NVM_DIR&lt;/span&gt;&lt;span class="s2"&gt;/nvm.sh"&lt;/span&gt; &lt;span class="c"&gt;# This loads nvm&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  🗒️ Additional Notes
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;If the environment variable &lt;code&gt;$XDG_CONFIG_HOME\&lt;/code&gt; is present, it will place the &lt;code&gt;nvm\&lt;/code&gt; files there.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can add &lt;code&gt;--no-use\&lt;/code&gt; to the end of the above script (...&lt;code&gt;nvm.sh --no-use\&lt;/code&gt;) to postpone using &lt;code&gt;nvm\&lt;/code&gt;&lt;br&gt;
until you manually &lt;code&gt;use\&lt;/code&gt; it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can customize the install source, directory, profile, and version using the &lt;code&gt;NVM_SOURCE\&lt;/code&gt;, &lt;code&gt;NVM_DIR\&lt;/code&gt;, &lt;code&gt;PROFILE\&lt;/code&gt;, and &lt;code&gt;NODE_VERSION\&lt;/code&gt; variables.&lt;br&gt;
Eg: &lt;code&gt;curl ... | NVM_DIR="path/to/nvm"\&lt;/code&gt;. Ensure that the &lt;code&gt;NVM_DIR\&lt;/code&gt; does not contain a trailing slash.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The installer can use &lt;code&gt;git\&lt;/code&gt;, &lt;code&gt;curl\&lt;/code&gt;, or &lt;code&gt;wget\&lt;/code&gt; to download &lt;code&gt;nvm\&lt;/code&gt;, whichever is available.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  🧰 Troubleshooting on Linux
&lt;/h4&gt;

&lt;p&gt;On Linux, after running the install script, if you get &lt;code&gt;nvm: command not found\&lt;/code&gt;&lt;br&gt;
or see no feedback from your terminal after you type &lt;code&gt;command -v nvm\&lt;/code&gt;, simply close your current terminal,&lt;br&gt;
open a new terminal, and try verifying again.&lt;br&gt;
Alternatively, you can run run the following commands for the different shells on the command line:&lt;/p&gt;

&lt;p&gt;&lt;em&gt;bash&lt;/em&gt;: &lt;code&gt;source ~/.bashrc\&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;zsh&lt;/em&gt;: &lt;code&gt;source ~/.zshrc\&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;ksh&lt;/em&gt;: &lt;code&gt;. ~/.profile\&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;These should pick up the &lt;code&gt;nvm\&lt;/code&gt; command.&lt;/p&gt;
&lt;h3&gt;
  
  
  ☑️ Verify Installation
&lt;/h3&gt;

&lt;p&gt;To verify that nvm has been installed, do:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;command&lt;/span&gt; &lt;span class="nt"&gt;-v&lt;/span&gt; nvm
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;which should output &lt;code&gt;nvm\&lt;/code&gt; if the installation was successful. Please note that &lt;code&gt;which nvm\&lt;/code&gt; will not work, since &lt;code&gt;nvm\&lt;/code&gt;&lt;br&gt;
is a sourced shell function, not an executable binary.&lt;/p&gt;
&lt;h2&gt;
  
  
  ⬇️ Installing node with nvm
&lt;/h2&gt;

&lt;p&gt;To get the latest LTS version of node and migrate your existing installed packages, use&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;nvm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="s1"&gt;'lts/*'&lt;/span&gt; &lt;span class="nt"&gt;--reinstall-packages-from&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;current
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then you should have the latest and stable version of nodejs on your system&lt;br&gt;
as long as the npm package manager that comes with it.&lt;/p&gt;
&lt;h3&gt;
  
  
  ✅ Verify installations:
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;node &lt;span class="nt"&gt;-v&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;npm &lt;span class="nt"&gt;-v&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;At this point we have node on our system. It's finally time to get our project running locally.&lt;/p&gt;

&lt;p&gt;Get into the project's directory (as showcased in the previous gif above after cloning) and then:&lt;/p&gt;
&lt;h2&gt;
  
  
  ⬇️ Install the project dependencies with npm
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  🏃 Run the project locally and head to the browser to view it
&lt;/h2&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Open your browser and type in the address bar:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; http://localhost:8080/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here's a video demonstrating the above instructions:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://asciinema.org/a/8cZmovcbjkhmlQjttUmO1oDTI" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fasciinema.org%2Fa%2F8cZmovcbjkhmlQjttUmO1oDTI.svg" alt="asciicast"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Congratulations❣️&lt;/strong&gt; after all this 🎉 you managed to get the project running locally on your machine!&lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;So, we managed to install all the dependencies, learn about git, GitHub and version control and a bunch more stuff,&lt;br&gt;
as well as run the project on our machines, in our Local Development Environment.&lt;/p&gt;

&lt;p&gt;What are the next steps 👣 to take you might ask?&lt;/p&gt;

&lt;p&gt;Well, the first thing to do is to get your hands dirty and dive into the project itself, experimenting and playing with it.&lt;br&gt;
As the project is written entirely with 🍦 JavaScript, you might want to learn some of it, if not already familiar with it,&lt;br&gt;
so you can swim 🏊 a little easier into the code itself. As mentioned before the project itself is hugelyy documented,&lt;br&gt;
either on the GitHub repository (inside every repository you should find a seperate README.md file explaining what's important to know),&lt;br&gt;
as well as the code itself contains inline documentation!&lt;/p&gt;

&lt;p&gt;So with knowing some basics of the JavaScript programming language, reading the available documentation and playing / experimenting with the code itself&lt;br&gt;
you should be good to go!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;/// NOTE ❗&lt;/strong&gt; On my following 👉 &lt;a href="https://github.com/andrewpap22/DearJavaScript" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;br&gt;
you should find the basics of the JavaScript programming language, written in a tutorial-like form&lt;br&gt;
which should get you able while reading it, to get more familiar with it and learn it.&lt;br&gt;
Currently it is written in a fast pased style and it's not hugely detailed, but I do plan making it a free e-book&lt;br&gt;
for the very purpose of learning the JavaScript programming language and diving deep into it as possible&lt;br&gt;
So, stay tuned 📻 for it!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now, as this blog post has already become huge, I want to mention fast 2 last things that you might want to do with the project.&lt;/p&gt;

&lt;p&gt;First you might want to customize it a bit and make it more personal.&lt;br&gt;
You'll have to get your hands dirty as mentioned to be able to do that, but as a fast reference you can try the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📝 Edit &lt;code&gt;./_data/site.json&lt;/code&gt; with your site’s information.
Don’t be scared. You can change just about any text inside single quotes without breaking anything (&lt;code&gt;'Safe to edit'&lt;/code&gt;).
If you get stuck, please file an &lt;a href="//${data.pkg.bugs.url}"&gt;issue on GitHub&lt;/a&gt; where someone friendly can help.&lt;/li&gt;
&lt;li&gt;(Optionally) 📝 Edit &lt;code&gt;.eleventy.js&lt;/code&gt; with your configuration preferences.&lt;/li&gt;
&lt;li&gt;❌ Delete the contents inside the quotes after the return statement in the &lt;a href="https://github.com/andrewpap22/andreaspappas/blob/main/_includes/shortcodes/getting-started.js" rel="noopener noreferrer"&gt;/shortcdes/getting-started.js&lt;/a&gt; file.&lt;/li&gt;
&lt;li&gt;Basically this is the terminal that you see on the home page. If you want to keep it but put your own information instead go down on the file and edit the text inside the &lt;code&gt;.then()&lt;/code&gt; methods.&lt;/li&gt;
&lt;li&gt;Else, you can delete it completely and write markdown inside the backticks of the return statement or do write whatever HTML, CSS, JavaScript you want, as I've already done.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In &lt;code&gt;./content/pages&lt;/code&gt; and &lt;code&gt;./content/posts/&lt;/code&gt;, you can edit or delete any of the files ending with the &lt;code&gt;.11ty.js&lt;/code&gt; or &lt;code&gt;.md&lt;/code&gt; extensions.&lt;br&gt;
To create a new page or post, I recommend copying and pasting one of these files to a new one until you get the hang of it.&lt;/p&gt;

&lt;p&gt;To preview your changes in the browser you'll have to do run the project as we did above. (see the terminal video) 👆&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Simply run:&lt;br&gt;
&lt;/p&gt;


&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$ &lt;/span&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;And head to &lt;strong&gt;&lt;a href="http://localhost:8080/" rel="noopener noreferrer"&gt;http://localhost:8080/&lt;/a&gt;&lt;/strong&gt; in your browser&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For publishing your own copy of the project as well as using your own custom domain name,&lt;br&gt;
I'll write detailed instructions on a separate blog post and reference it here when it's done,&lt;br&gt;
as this already got huge enough.&lt;/p&gt;

&lt;p&gt;For a fast reference you can have a look 👉 &lt;a href="https://github.com/andrewpap22/andreaspappas#-publish-your-own-copy-of-the-project" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Or use the following button 👇 which will create a fork of the repository on your own GitHub profile and publish that fork directly to your netlify account to which you will have to login via your GitHub profile.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://app.netlify.com/start/deploy?repository=https://github.com/andrewpap22/andreaspappas" rel="noopener noreferrer"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.netlify.com%2Fimg%2Fdeploy%2Fbutton.svg" alt="Deploy to Netlify"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Enjoyed the article? Did you like the project? Learned something from it? &lt;/p&gt;

&lt;p&gt;If so, &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A ⭐ on the &lt;a href="https://github.com/andrewpap22/andreaspappas" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt; page, would be of a great help and much appreciated! &lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;Thank you. 🙏&lt;/p&gt;

&lt;p&gt;©️ 2021 &lt;a href="https://andrewpap22.github.io/" rel="noopener noreferrer"&gt;&amp;lt;Andreas&amp;gt;&amp;lt;\Pappas&amp;gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>showdev</category>
    </item>
    <item>
      <title>The #include &lt;&gt; preprocessor statement.</title>
      <dc:creator>Andreas Pappas</dc:creator>
      <pubDate>Fri, 30 Jul 2021 19:22:11 +0000</pubDate>
      <link>https://dev.to/andrewpap22/the-include-preprocessor-statement-10lh</link>
      <guid>https://dev.to/andrewpap22/the-include-preprocessor-statement-10lh</guid>
      <description>&lt;p&gt;Hi there 👋 &lt;/p&gt;

&lt;p&gt;The first sentence that I want to write here is the following, &lt;/p&gt;

&lt;p&gt;The &lt;code&gt;#include&lt;/code&gt; preprocessor statement, all that it does is literally &lt;strong&gt;copy and paste&lt;/strong&gt; the contents of the header file specified after the #include &amp;lt;&amp;gt; into our file, on the particular line of our file that we placed that statement. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/6JB4v4xPTAQFi/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/6JB4v4xPTAQFi/giphy.gif" alt="literally_amazed" width="325" height="294"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🙃 Alright then, keep reading and you might do so! &lt;/p&gt;

&lt;p&gt;Remember my first sentence that the preprocessor statement &lt;code&gt;#include&lt;/code&gt; all that does is take the file that is specified after it and literally copy paste it's content into our &lt;code&gt;.cpp&lt;/code&gt; file?&lt;/p&gt;

&lt;p&gt;Well let's prove that. &lt;/p&gt;

&lt;p&gt;Let's say we have the following C++ code, &lt;/p&gt;

&lt;p&gt;File: &lt;code&gt;addNumbers.cpp&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="nf"&gt;addNumber&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Simply we wrote a function that takes as input 2 integers and returns their sum. &lt;/p&gt;

&lt;p&gt;If we try to compile the above code, it should compile successfully without any errors. &lt;/p&gt;

&lt;p&gt;Now let's say that we forget the closing brace at the end of our code, so it looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="nf"&gt;addNumber&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
                        &lt;span class="c1"&gt;/// &amp;lt;--- notice the closing curly brace missing on this line.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we compile the below code we should get an error that we do miss a closing curly brace on line 4. &lt;/p&gt;

&lt;p&gt;How can we fix that? &lt;/p&gt;

&lt;p&gt;Either we can simply edit the file and add back our closing curly brace, or we can get a bit crazy and prove our very first statement of the &lt;code&gt;#include&lt;/code&gt; preprocessor statement literally copy pasting into our &lt;code&gt;addNumbers.cpp&lt;/code&gt; file the content of the header file that is after our include statement. &lt;/p&gt;

&lt;p&gt;So let's create a header file. &lt;/p&gt;

&lt;p&gt;File: &lt;code&gt;closingBrace.h&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Yeah, exactly, our closingBrace.h file simply contains one character. The closing curly brace itself --&amp;gt; &lt;code&gt;}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Now take a look at the below code,&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="nf"&gt;addNumber&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="cp"&gt;#include&lt;/span&gt; &lt;span class="cpf"&gt;"closingBrace.h"&lt;/span&gt;&lt;span class="cp"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;What do you think will happen if we compile this file? &lt;/p&gt;

&lt;p&gt;Well, it will compile properly without any errors. &lt;/p&gt;

&lt;p&gt;Why is that? &lt;/p&gt;

&lt;p&gt;Well, if you create the 2 files above in Microsoft Visual Studio and compile them, you can then see in your project a file with the extension &lt;code&gt;.i&lt;/code&gt; in particular you will see a file called: &lt;code&gt;closingBrace.i&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;What this file is, is simply a file that is generated by the Microsoft Visual Studio compiler and it simply contains the contents of the output of the preprocessor instead of directly creating the object file from our C++ source file.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;How to generate the &lt;code&gt;.i&lt;/code&gt; preprocessed file? &lt;/p&gt;
&lt;/blockquote&gt;




&lt;p&gt;To generate a preprocessed file (.i file), just add "-EP -P" to the compile option, and recompile the original .cpp file. You can also generate a .i file directly from the "Prepocessor" property in Visual Studio*:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Right click the file name, and click properties&lt;/li&gt;
&lt;li&gt;Click Preprocessor\Generate Preprocessed File\Without Line Numbers (/EP /P)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you recompile from a command window, the .i file will be created under the current directory. if you recompile from within the Visual Studio* IDE, the .i file will be created under the directory where the original source file is located.&lt;/p&gt;




&lt;p&gt;Well if you go on and open that file you will see the following contents: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/3orieUe6ejxSFxYCXe/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/3orieUe6ejxSFxYCXe/giphy.gif" alt="see" width="480" height="362"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight cpp"&gt;&lt;code&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="nf"&gt;addNumber&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; 
&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Does it remind you of anything? &lt;/p&gt;

&lt;p&gt;Well that was the proof that the preprocessor translated our &lt;code&gt;#include "closingBrace.h"&lt;/code&gt; statement into a simple &lt;code&gt;}&lt;/code&gt; character. And that is because it literally copy pasted the contents of the closingBrance.h file and replaced our #include statement with that content, and since we simply had only a &lt;code&gt;}&lt;/code&gt; inside that file, that's what it copy pasted on that particular line that we placed our statement. &lt;/p&gt;

&lt;p&gt;And that's all there is to it about the &lt;code&gt;#include&lt;/code&gt; preprocessor statement and also about how we do use header files aka &lt;code&gt;.h&lt;/code&gt; files in C++!&lt;/p&gt;




&lt;p&gt;I hope you enjoyed the article and learned something new today as I myself did! &lt;/p&gt;

&lt;p&gt;I've also started writing down a C++ course on my GitHub account on the following 👉🏻 &lt;a href="https://github.com/andrewpap22/DearCplusplus"&gt;repository&lt;/a&gt;, so you can check it out if you want to learn more cool stuff about how C++, it's compiler and linker do work and also best practices about writing fast and efficient C++ code. &lt;/p&gt;

&lt;p&gt;I will be doing blog posts on several parts of the above course like this one in general, but if you want the A-Z of it then you can check the above repository mentioned! &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Obviously contribution and corrections are much more than welcome! &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You can also check if you wish so my recently made 📖 &lt;a href="https://andreaspappas.xyz/"&gt;Blog website&lt;/a&gt; for more computer science but not limited to, related content and keep an eye 👀 on it as soon, I will make it's repository public with in depth detail on how you can also use that particular Blog website to customize it and use it as a template to make it your own if you like it and wish to do so❗&lt;/p&gt;




&lt;p&gt;Thank you. 🙏&lt;/p&gt;

&lt;p&gt;©️ 2021 &lt;a href="https://andrewpap22.github.io/"&gt;&amp;lt;Andreas&amp;gt;&amp;lt;\Pappas&amp;gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>cpp</category>
      <category>computerscience</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Install Artix Linux</title>
      <dc:creator>Andreas Pappas</dc:creator>
      <pubDate>Fri, 26 Mar 2021 23:30:17 +0000</pubDate>
      <link>https://dev.to/andrewpap22/install-artix-linux-43el</link>
      <guid>https://dev.to/andrewpap22/install-artix-linux-43el</guid>
      <description>&lt;p&gt;Greetings, in this very first article of mine, I will try to showcase how to install an Arch like Linux distribution, in particular, &lt;a href="https://artixlinux.org/" rel="noopener noreferrer"&gt;Artix Linux&lt;/a&gt; aka &lt;code&gt;The Art Of Linux&lt;/code&gt; from scratch. (i.e. from a base .iso image)&lt;br&gt;
I will try to explain everything that is non trivial without getting into much depth. For that you can always reference the &lt;a href="https://wiki.artixlinux.org/" rel="noopener noreferrer"&gt;Artix wiki&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;The purpose of this article is to get your hands dirty, on trying and experimenting with installing a Linux Distribution from scratch and thus get a better understanding of the beauty of UNIX operating systems, in particular Linux and also get a better understanding on how operating systems work behind the scenes. (We're not going to do an Operating Systems computer science course here and of course we're not gonna use C to modify or even write a Linux kernel here, but you will get the point later on...)&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;As this is a minimal Linux installation, I've kept this article minimal as well. (i.e. without any pictures (except the one below ^.-)). The reason for that being is, that you need to dive in, reading carefully what's going on and experiment in your own machine and not simply follow an image slideshow and copy paste some commands. If you fail your very first installation that's totally perfect. Everyone fails! Get your hands dirty and try all over again, fail again and try again. That is exactly how it will stick to your brain and thus you'll gain the knowledge! &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I will also showcase at the end of this article how to install a bootstrapping script for those who want a &lt;em&gt;ready to go&lt;/em&gt; graphical environment after a minimal / base Linux installation. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6tjhaau67o7bxof2rttl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6tjhaau67o7bxof2rttl.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  And the journey begins...
&lt;/h2&gt;

&lt;p&gt;So, first thing to do is go to Artix Linux Download page and choose a base install .iso image. (since we want to build it from scratch). ~&amp;gt; &lt;a href="https://artixlinux.org/download.php" rel="noopener noreferrer"&gt;link&lt;/a&gt;&lt;br&gt;
You could also select an image with an already installed desktop environment, but we're not going to do that here. &lt;/p&gt;

&lt;p&gt;There are 3 base images to download: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;openrc&lt;/li&gt;
&lt;li&gt;runit&lt;/li&gt;
&lt;li&gt;s6 &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;And basically those are 3 different init systems of the Artix distribution. (you can find more info on the Artix wiki)&lt;/p&gt;

&lt;p&gt;Once we download an image, we then want to put it onto a usb drive and make it bootable. &lt;br&gt;
If we open a tty (terminal) and run in: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;lsblk


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;We should see the hard drives that we already have in our system. After we can put into our computer the usb stick and run again the same command to find out how is our system labeling the usb stick. Usually it's something like &lt;code&gt;sd&lt;/code&gt; followed by another letter. So for example, our main hard drive would have the label of &lt;code&gt;sda&lt;/code&gt; and when we put into our usb then it might be named &lt;code&gt;sdb&lt;/code&gt;. And so it's file location should then be: &lt;code&gt;/dev/sdb&lt;/code&gt;. To make sure we can also check the capacity of each drive. &lt;/p&gt;

&lt;p&gt;Now, once we make sure that we have recognized which is our usb drive, then we want to make it bootable with our .iso image. &lt;br&gt;
To do that, we first need sudo privileges and then we can run the following command: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;dd &lt;/span&gt;&lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;our_iso_image_here.iso &lt;span class="nv"&gt;of&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;output_file_to_write_the_image &lt;span class="nv"&gt;status&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;'progress'&lt;/span&gt; &lt;span class="c"&gt;#if we want to see a progress bar&lt;/span&gt;

&lt;span class="c"&gt;# so an example of the above explanation: &lt;/span&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;dd &lt;/span&gt;&lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;arix-base-runnit-20200214-x86_64.iso &lt;span class="nv"&gt;of&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;/dev/sdb &lt;span class="nv"&gt;status&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;'progress'&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And now we have a bootable usb stick with the Artix runnit image and we can boot from it from our computer and begin the installation. &lt;/p&gt;

&lt;p&gt;First, we have to login as root and the credentials for that are: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

Username: root
Password: artix


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Or we could login as the artix user and then do: &lt;code&gt;sudo su&lt;/code&gt;&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

Username: artix
Password: artix


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;So once we have done that, we first have to make sure if our computer is running &lt;code&gt;UEFI&lt;/code&gt; or &lt;code&gt;Legacy Boot&lt;/code&gt;.&lt;br&gt;
Most new machines will have uefi but to make 100% sure we should run the following command: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; /sys/firmware/efi/efivars


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;If you SEE stuff come up then the computer is using UEFI&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;If you DON'T see stuff come up then the computer is using Legacy Boot&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So if you get something like: ls: cannot access &lt;code&gt;/sys/firmware/efi/efivars&lt;/code&gt;: No such file or directory, then &lt;strong&gt;YOU ARE NOT&lt;/strong&gt; using UEFI. &lt;/p&gt;

&lt;p&gt;At this point we need to make sure that we are connected to the internet! Strongly recommended to be hooked via ethernet cable, but in case you don't have one you can use the command: &lt;code&gt;iwd&lt;/code&gt; to be connected to a wifi network and it should come already pre-installed on the iso image. &lt;/p&gt;

&lt;p&gt;To check if you have internet connection, you can ping a website like: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;ping artixlinux.org


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;and it should return responses and thus that mean you're connected to the internet.&lt;/p&gt;

&lt;p&gt;Now by running &lt;code&gt;lsblk&lt;/code&gt; we should find the hard drive of the computer that we want to install the Artix Linux on. Again we can recognize it by it's capacity size. &lt;/p&gt;

&lt;p&gt;Once we find it we should run the following command to begin the disk partitioning. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;fdisk /dev/sda

&lt;span class="c"&gt;# /dev/sda is the (example) disk that we want to install Artix on&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;In our example guide here, we're going to delete EVERYTHING from the hard drive and partition everything from scratch, but you could if you want keep your home partition (if you haven't backed it up) and just create in the next steps the root and the boot partition. &lt;/p&gt;

&lt;p&gt;Now, after executing the &lt;code&gt;fdisk&lt;/code&gt; command a prompt will come up asking us which partitions we want to delete. &lt;br&gt;
If we simply type in: &lt;code&gt;d&lt;/code&gt;, it will delete the default partition mentioned inside the parenthesis and then we should type in &lt;code&gt;d&lt;/code&gt; 2 more times to delete the remaining partitions as well. &lt;/p&gt;

&lt;p&gt;If we type in: &lt;code&gt;p&lt;/code&gt; at any given time it should display us our partitions. Of course if we delete them all we won't have any. &lt;/p&gt;

&lt;p&gt;Now we're going to make our new partitions. &lt;/p&gt;

&lt;p&gt;First type in: &lt;code&gt;n&lt;/code&gt; to start creating a new partition. &lt;/p&gt;

&lt;p&gt;The first partition that we always want to make is the &lt;strong&gt;boot&lt;/strong&gt; partition. &lt;br&gt;
First it asks for partition number ~&amp;gt; &lt;strong&gt;&lt;code&gt;just press enter without typing anything&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
Then it asks for first sector ~&amp;gt; &lt;strong&gt;&lt;code&gt;again simply press enter without typing anything&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
And now it asks for the Last sector and how big you want it to be, usually here people give 512M but we're going to give 1G, so we just have to type in: &lt;code&gt;+1G&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Then it will ask us if we want to remove a signature. If the disk you're installing in was empty from the beginning just press no, but if it contained something before and you're re-partitioning it, you gotta type in: &lt;code&gt;Y&lt;/code&gt;. &lt;/p&gt;

&lt;p&gt;Now, if we press &lt;code&gt;p&lt;/code&gt; we can view the partition we just created. &lt;/p&gt;

&lt;p&gt;Next, we're going to make 2 more partitions. &lt;/p&gt;

&lt;p&gt;The next one is the &lt;strong&gt;root&lt;/strong&gt; partition.&lt;/p&gt;

&lt;p&gt;So, we first type in &lt;code&gt;n&lt;/code&gt; to make a new partition, then on partition number and first sector we simply press enter without typing anything and on the last sector which asks the size of the root partition, we're going to give ~&amp;gt; &lt;strong&gt;&lt;code&gt;+40G&lt;/code&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Now, it might or might not ask again to remove the signature and the same thing as mentioned above applies. &lt;/p&gt;

&lt;p&gt;Now, we're going to create our 3rd and last partition which is our home partition. &lt;/p&gt;

&lt;p&gt;So, again type in &lt;code&gt;n&lt;/code&gt; and press &lt;code&gt;enter&lt;/code&gt; 3 times and then it will automatically fill the rest of the space for the home partition and at this point if we press &lt;code&gt;p&lt;/code&gt; we can see the 3 partitions we created. &lt;/p&gt;

&lt;p&gt;And now we can type in: &lt;strong&gt;&lt;code&gt;w&lt;/code&gt;&lt;/strong&gt; to write the newly created partitions and now we have an empty hard drive with the 3 partitions we created and we should be back to the shell logged in as root. &lt;/p&gt;

&lt;p&gt;Now, we can type in &lt;code&gt;lsblk&lt;/code&gt; and see our hard drive and the partitions that we formated with their respective sizes. &lt;/p&gt;

&lt;p&gt;The next thing we want to do is start putting file systems on these partitions so we can put files on them. (note that everything in linux works with files)&lt;/p&gt;

&lt;p&gt;So now we will start by making our home partition and that should be: &lt;code&gt;/dev/sda3&lt;/code&gt; to be in ext4 file system format. &lt;br&gt;
To do that, type in: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;mkfs.ext4 /dev/sda3


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Important note&lt;/strong&gt;: we're going to format everything in this particular guide in an ext4 file system format, BUT if you're using an UEFI system (you can find that out by the command we run above) then you want to format the BOOT partition in &lt;code&gt;fat&lt;/code&gt; file system format and then the home, root partitions in ext4. &lt;br&gt;
But in our case we're going to follow the Legacy boot system and we're going to format all the 3 partitions in ext4 file system format. &lt;/p&gt;

&lt;p&gt;Alright, and now it will take a while and once finished then we can make the root partition to be in ext4 file system format by running: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;mkfs.ext4 /dev/sda2


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And once that is finished as well we're going to do the same for our boot partition by running: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;mkfs.ext4 /dev/sda1


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;!!&lt;/strong&gt; If you're using UEFI then to format your boot partition in fat file system format you can use: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;mkfs.fat &lt;span class="nt"&gt;-F32&lt;/span&gt; /dev/sda1


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And now we're done creating our file systems on our partitions and we're ready to start adding files on them!&lt;/p&gt;

&lt;p&gt;And so now basically we're going to mount our partitions the way we want them to be mounted and then install our operating system which is basically one command and after that we're going to make a couple of changes and we're done! &lt;/p&gt;

&lt;p&gt;Now, we first want to take the &lt;code&gt;root&lt;/code&gt; partition and mount it to &lt;code&gt;/mnt&lt;/code&gt; &lt;br&gt;
To do that we run: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;mount /dev/sda2 /mnt


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And now we're going to make 2 directories inside /mnt, one for the home and on for the boot partitions. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;mkdir&lt;/span&gt; /mnt/home
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;mkdir&lt;/span&gt; /mnt/boot


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And now we can mount our other 2 partitions. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;mount /dev/sda1 /mnt/boot
&lt;span class="nv"&gt;$ &lt;/span&gt;mount /dev/sda3 /mnt/home


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And now we can run &lt;code&gt;lsblk&lt;/code&gt; and we'll see our partitions mounted to where we mounted them. (basically where it's supposed to be mounted)&lt;/p&gt;

&lt;p&gt;And now basically we're ready to install our operating system, and we will do that with the following command in which basically we're going to tell it where exactly to install the operating system and then we're going to tell it what exactly we want to install. (remember that you should be connected to the internet)&lt;br&gt;
Note that the below command is for the runit init system of the Artix Linux. You will need to install different things for s6 or openrc. (Head to the installation guide on artix linux wiki to find out what should be done)&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;basestrap /mnt base base-devel runit elogind-runit linux linux-firmware vim curl gcc git &lt;span class="c"&gt;# and basically whatever other program you want here to be installed.&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And now once the above command is done, we basically have an operating system installed on our hard drive, but we can't boot to it because we haven't set yet a bootloader and a couple of other things, so we're going to first set a bootloader. &lt;/p&gt;

&lt;p&gt;So basically when we reboot our computer it we need to tell it in what ourder our moun points should be. i.e. in simple manners the boot partition to the boot mounting point, the home partition to the home mounting point etc... &lt;/p&gt;

&lt;p&gt;So, if we run: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;fstabgen /mnt


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;We will see where everything should be mounted. &lt;br&gt;
Now we want to give a couple of options to this command: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;fstabgen &lt;span class="nt"&gt;-U&lt;/span&gt; /mnt &lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; /mnt/etc/fstab


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;What &lt;code&gt;-U&lt;/code&gt; tells it it's that it should read the partitions based on their UUID and not on the sda,sdb,sdc letters because those might be different on different computers but their UUID's are unique and so we definetely want it to be like that, and then we append that to the fstab file in the /etc so each time we reboot the computer knows where everything is mounted when it boots again. &lt;/p&gt;

&lt;p&gt;And now we need to run the following command, and basically we then should be inside the actual installed operating system and not on the bootable usb drive. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;artix-chroot /mnt


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Probably we'll get prompted to the default shell which is sh but if we run: &lt;code&gt;bash&lt;/code&gt; we should get to the bash shell with all it's features etc...&lt;/p&gt;

&lt;p&gt;Now, what we want to do is edit the mirrorlist file and basically what we want to do in that file is move on top of the file the mirrors which are closer to the country we live in. (simply for better pings and ms and so on...)&lt;br&gt;
To do that: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;vim /etc/pacman.d/mirrorlist


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Now we might want to set our local time zone. &lt;br&gt;
To do that we'll create a simlink to the /etc/localtime and the command for that is: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;ln&lt;/span&gt; &lt;span class="nt"&gt;-sf&lt;/span&gt; /usr/share/zoneinfo/your_time_zone_here /etc/localtime


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And now if we run: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;ls&lt;/span&gt; &lt;span class="nt"&gt;-l&lt;/span&gt; /etc/localtime


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;It will display our local time, actually where we set our system to be located...&lt;/p&gt;

&lt;p&gt;And we might also want to update our hardware clock to be in sync with what we set above.. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;hwclock &lt;span class="nt"&gt;--systohc&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And now we're going to open up the following file: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;vim /etc/locale.gen


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;To set our system and keyboard main language. &lt;br&gt;
How? &lt;br&gt;
Simply uncomment the one that corresponds to your language, for example en_US (both UTF-8 and ISO)&lt;/p&gt;

&lt;p&gt;And then you save the file and run: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;locale-gen


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And then we're going to create a new file: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;vim /etc/locale.conf


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And basically you want to type in: &lt;code&gt;LANG=en_US.UTF-8&lt;/code&gt; and then save the file.&lt;/p&gt;

&lt;p&gt;And now we're going to install some essential packages. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;pacman &lt;span class="nt"&gt;-S&lt;/span&gt; networkmanager networkmanager-runit 


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Now we want to tell Artix to start network manager every time we boot up. (This again will be different for runit, s6, openrc)&lt;/p&gt;

&lt;p&gt;To do that: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;ln&lt;/span&gt; &lt;span class="nt"&gt;-s&lt;/span&gt; /etc/runit/sv/NetworkManager /etc/runit/runsvdir/default/


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And basically that's how you tell runit to automatically start a service every time you boot up. &lt;br&gt;
Also, inside the directory ~&amp;gt; &lt;code&gt;/etc/runit/sv/&lt;/code&gt; you can find all the services that you can tell runit to start automatically on boot and that's where the NetworkManager is located. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Important note&lt;/strong&gt; Actually the only time that you link a service to the &lt;code&gt;/etc/runit/runsvdir/default/&lt;/code&gt; is on the very first installation time as we're doing right now. BUT, you should from the moment the system is installed and on to simlink services only to the: &lt;strong&gt;&lt;code&gt;/run/runit/service&lt;/code&gt;&lt;/strong&gt;!!! &lt;/p&gt;

&lt;p&gt;Now, we want to edit the following: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;vim /etc/hostname


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And basically we add on the 1st line (the file should be empty) the name of the computer that we want it to have. ex: &lt;code&gt;desktop&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Save the file and then edit: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;vim /etc/hosts


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And add in there the following lines: &lt;br&gt;
(you can find more info on the details on the Artix wiki installation guide)&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

127.0.0.1    localhost
::1          localhost
127.0.0.1    desktop.localdomain desktop # &amp;lt;~ desktop is the name we gave to our computer in the hostname file.


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Save the file. &lt;/p&gt;

&lt;p&gt;And now finally we're going to make our machine bootable by installing a bootloader. &lt;/p&gt;

&lt;p&gt;i.e. grub in this particular guide but you can choose any bootloader that you like. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;pacman &lt;span class="nt"&gt;-S&lt;/span&gt; grub 

&lt;span class="c"&gt;# note here that if you want to sometime do a dual boot on your machine you need to install the program: os-prober as well.&lt;/span&gt;
&lt;span class="c"&gt;# also if you run UEFI instead of Legacy Boot you need to install as well: efibootmgr&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Now we need to set up grub (this command will again be different for UEFI vs Legacy Boot)&lt;/p&gt;

&lt;p&gt;For Legacy Boot: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;grub-install &lt;span class="nt"&gt;--target&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;i386-pc /dev/sda &lt;span class="c"&gt;# &amp;lt;~ your hard drive that you're installing the system, check with: lsblk&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;For UEFI: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;grub-install &lt;span class="nt"&gt;--target&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;x86_64-efi &lt;span class="nt"&gt;--efi-directory&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;/boot &lt;span class="nt"&gt;--bootloader-id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;GRUB


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h3&gt;
  
  
  Dual boot with windows 10 (optional)
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;at this point I want to add a couple of steps in case you want to dual boot your artix (arch) linux installation with windows 10. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;It is a prerequisite that you have already installed windows 10 in a separate partition from our above 3 created Linux partitions BEFORE starting the Linux installation.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;So for example you could have a /dev/sda4 partition with windows 10 installed in it. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;It's best practice when you want to dual boot, to first install Windows 10 on your empty disk drive and then allocate from inside windows some free space for your Linux installation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But, if you had already Linux installed, then it's still possible to do the dual boot. First backup your /home directory to an external hard disk drive by providing the following command: &lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;rsync &lt;span class="nt"&gt;-a&lt;/span&gt; &lt;span class="nt"&gt;--delete&lt;/span&gt; &lt;span class="nt"&gt;--quiet&lt;/span&gt; &lt;span class="nt"&gt;--progress&lt;/span&gt; /path/to/backup /location/of/backup


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;-a&lt;/strong&gt;, indicates that files should be archived, meaning that most of their characteristics are preserved (but not ACLs, hard links or extended attributes such as capabilities)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;--delete&lt;/strong&gt;, means files deleted on the source are to be deleted on the backup as well&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Here, /path/to/backup should be changed to what needs to be backed-up (e.g. /home) and /location/of/backup is where the backup should be saved (e.g. /media/disk).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And after doing so you should then boot with your bootable artix usb stick and delete the /home partition with &lt;code&gt;fdisk&lt;/code&gt; so you can create some free space for your windows 10 installation. After deleting the /home partition, you should have some empty free space of some GB's and you can create 2 new primary partitions as we did above, 1 for the new /home directory for Linux and the other 1 for the Windows installation. So assuming that the 4th partition is named &lt;code&gt;/dev/sda4&lt;/code&gt; (you know now how to find that), you should boot from your Windows 10 bootable usb stick and install Windows on that particular partition. After doing so, windows will take over Grub so you want be able to see your Linux installation and your computer will automatically boot to windows, now is the time to use your Linux bootable usb stick again and follow the procedure of the Linux installation of this article from the beginning (deleting the 1,2,3 partitions and re-creating them again without touching at all the partition 4 (which is the windows one) and then follow the following 3 last commands and you will have both operating systems on your machine). Then you can use your /home backup to bring everything back on your Linux installation.&lt;/p&gt;

&lt;p&gt;As mentioned above, if you want to dual boot any arch distribution with any other operating system, you need the program: &lt;strong&gt;os-prober&lt;/strong&gt;. You can install it either earlier when we installed our base programs with basestrap or even at this point we're right now by typing: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;pacman &lt;span class="nt"&gt;-S&lt;/span&gt; os-prober


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;!!!&lt;/strong&gt; NOTE, there is a case that os-prober might not detect your Windows 10 installation automatically (in our next steps), so for it to do so you need to install as well the following program as well: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;pacman &lt;span class="nt"&gt;-S&lt;/span&gt; ntfs-3g


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Now, at this point if we run the command &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;os-prober


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;We should see that it detects our Windows 10 installation on your 4th partition and then after generating the grub configuration file with the below command we should see that it contains our Linux installation and our Windows installation and we're good to go! &lt;/p&gt;

&lt;p&gt;If we reboot now, we should see grub with our Linux, Windows installations!&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;grub-mkconfig &lt;span class="nt"&gt;-o&lt;/span&gt; /boot/grub/grub.cfg


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And last thing to do is to set up a password! &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;passwd 


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;And at this point we're done and you just managed to install Artix linux from scratch, congratulations! &lt;/p&gt;

&lt;p&gt;Now... after all this work your face should be like ~&amp;gt; 😑 &lt;br&gt;
Because you'll find out that you booted up and you just have a plain dark tty (terminal). &lt;br&gt;
But! That is exactly the magic of installing a linux operating system without a pre-installed desktop environment and have all the setup we did above be made automatically by the image, just to get a better understanding of what's exactly going on behind and the scenes and thus have a better "connection" with your own machine that you built from scratch (well not 100% from scratch, because obviously you didn't write all the C code of all the commands that we run and of course we already had a ready Artix Linux distribution image and thus a linux kernel, so the whole Kernel is written by someone else, but yeah you get the point...)&lt;/p&gt;

&lt;p&gt;And now what? Are we stuck with a plain tty? &lt;/p&gt;

&lt;p&gt;Well, no if we don't want to. We can now start installing a graphical environment or our own window manager and our preferable shell and a display manager (login screen) and basically whatever else program you want or even a desktop environment with those pre-installed just to learn how to play with them and how they operate and to be able to configure everything yourself and that's exactly the magic of Linux!  &lt;/p&gt;

&lt;p&gt;Or at this point you could even run a bootstrapping script that someone else has written and basically what this is, it's a shell script that installs automatically everything that is mentioned in the above lines + some extra configurations of the person that wrote the script + their dotfiles and so on... &lt;br&gt;
Basically this will get you up and running with a complete graphical environment, but of course with configurations of that person that you'll have to learn how to use or modify them to your liking. &lt;/p&gt;

&lt;p&gt;I'll provide right here a script that I personally really like as promised in the beginning of this article, and it's called LARBS and it is written by &lt;a href="https://lukesmith.xyz/" rel="noopener noreferrer"&gt;Luke Smith&lt;/a&gt;. &lt;br&gt;
You can find information on installation and more ~&amp;gt; &lt;a href="https://larbs.xyz/" rel="noopener noreferrer"&gt;here.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Basically, after you're done with the Artix installation you simply run the below commands and follow the UI and you'll have your fully nice and ready to go operating system with all the functionalities and configurations and programs that Luke had in his bootstrapping script! Of course you're free to change everything (recommended) to your liking or learn to use his system if you like it and keep it as is. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="c"&gt;# should be run as root&lt;/span&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;curl &lt;span class="nt"&gt;-LO&lt;/span&gt; larbs.xyz/larbs.sh
&lt;span class="nv"&gt;$ &lt;/span&gt;bash larbs.sh


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;or: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$ &lt;/span&gt;git clone https://github.com/LukeSmithxyz/LARBS.git
&lt;span class="nv"&gt;$ &lt;/span&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;LARBS/ 
&lt;span class="nv"&gt;$ &lt;/span&gt;./larbs.sh


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;




&lt;p&gt;&lt;em&gt;Author:                  &lt;a href="https://andrewpap22.github.io/" rel="noopener noreferrer"&gt;Andrew Pappas&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




&lt;p&gt;Thank you!&lt;/p&gt;

</description>
      <category>archlinux</category>
      <category>linux</category>
      <category>bash</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
