<?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: Manuel Figueroa</title>
    <description>The latest articles on DEV Community by Manuel Figueroa (@manuelfs12).</description>
    <link>https://dev.to/manuelfs12</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%2F185171%2Fcfe00e0a-ca8c-47a5-bc0a-9a3dfd54a389.png</url>
      <title>DEV Community: Manuel Figueroa</title>
      <link>https://dev.to/manuelfs12</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/manuelfs12"/>
    <language>en</language>
    <item>
      <title>Setting up a Palworld server in AWS</title>
      <dc:creator>Manuel Figueroa</dc:creator>
      <pubDate>Mon, 12 Feb 2024 13:00:00 +0000</pubDate>
      <link>https://dev.to/manuelfs12/setting-up-a-palworld-server-in-aws-4m26</link>
      <guid>https://dev.to/manuelfs12/setting-up-a-palworld-server-in-aws-4m26</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://www.freepik.com/free-vector/developers-using-laptop-smartphone-working-with-cloud-data-multimedia-big-data-architecture-database-cloud-computing-cloud-platform-concept-vector-isolated-illustration_11668705.htm#query=cloud%20computing&amp;amp;position=44&amp;amp;from_view=search&amp;amp;track=ais&amp;amp;uuid=0109b806-3110-4f5a-826a-945232136c9b"&gt;Image by vectorjuice&lt;/a&gt; on Freepik&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A couple of weeks ago, a game called Palworld released and took the gaming world by storm. My brother and I wanted to play it co-op, but due to issues with the multiplayer server, we couldn't. Luckily, we found that Palworld has a &lt;a href="https://tech.palworldgame.com/dedicated-server-guide#deploy"&gt;dedicated server&lt;/a&gt; that we can host it anywhere we want. I took this opportunity to try and host it myself using AWS.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setting up the EC2 instance
&lt;/h2&gt;

&lt;p&gt;The first step is to spin up a virtual server using Amazon Elastic Compute Cloud (EC2), amazon's on demand virtual servers. For the image, I decide on Ubuntu since it was easier to set up the required dependencies for the Palworld server.&lt;/p&gt;

&lt;p&gt;According to the recommended server specs we need at least 16GB of RAM, for this, I opt for the &lt;strong&gt;t3.xlarge&lt;/strong&gt; instance and for the Elastic Block Storage (EBS) I put 30GB of storage.&lt;/p&gt;

&lt;p&gt;Before moving on to the installation of SteamCMD and the Palworld dedicated server, I decided to create a specific Security Group and an Elastic IP address for this EC2 instance.&lt;/p&gt;

&lt;h3&gt;
  
  
  Security Groups
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;A security group controls the traffic allowed to reach and leave the resources that it is assigned to.&lt;/strong&gt; For my instance, I created a new security group called &lt;strong&gt;Palworld Server Security Group&lt;/strong&gt; and then edit the inbound rules for this group. I enabled SSH to accept connections from my local IP address and allowed UDP port 8211 to accept any IPv4 requests. This will let anyone with the server IP address and port connect to the Palworld server using the in game server browser.&lt;/p&gt;

&lt;h3&gt;
  
  
  Elastic IP
&lt;/h3&gt;

&lt;p&gt;&lt;em&gt;Before February 1st, 2024, Elastic IP Addresses assigned to an instance were free, but now, they charge US$0.005/hour, you can read more about it &lt;a href="https://aws.amazon.com/blogs/aws/new-aws-public-ipv4-address-charge-public-ip-insights/"&gt;here.&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;IP addresses in the cloud are dynamic by nature; every time I stop an EC2 instance and then start it up again, it gets a new IP address. Due to this, I opted to use an Elastic IP address.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Elastic IP is a static IPv4 address designed for dynamic cloud computing.&lt;/strong&gt; My main motivation to use an Elastic IP was so that I didn't have to share the server IP address every time my brother or cousins wanted to play.&lt;/p&gt;

&lt;p&gt;That's all the setup as far as AWS console goes, now we will SSH into the EC2 instance to install everything we need to run the Palworld dedicated server.&lt;/p&gt;

&lt;h2&gt;
  
  
  Installing SteamCMD and Palworld server
&lt;/h2&gt;

&lt;h3&gt;
  
  
  SteamCMD
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://developer.valvesoftware.com/wiki/SteamCMD"&gt;SteamCMD&lt;/a&gt; is a Steam client CLI tool for installing and updating dedicated servers, to install it on ubuntu as per the documentation we run:&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="nb"&gt;sudo &lt;/span&gt;add-apt-repository multiverse&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;sudo &lt;/span&gt;dpkg &lt;span class="nt"&gt;--add-architecture&lt;/span&gt; i386&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;sudo &lt;/span&gt;apt update
&lt;span class="nb"&gt;sudo &lt;/span&gt;apt &lt;span class="nb"&gt;install &lt;/span&gt;steamcmd
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After the setup is complete, we can type in the following command:&lt;br&gt;
&lt;/p&gt;

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

&lt;/div&gt;



&lt;p&gt;If everything works, you should be inside a SteamCMD prompt&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="nv"&gt;$ &lt;/span&gt;steamcmd
tid&lt;span class="o"&gt;(&lt;/span&gt;931&lt;span class="o"&gt;)&lt;/span&gt; burning pthread_key_t &lt;span class="o"&gt;==&lt;/span&gt; 0 so we never use it
Redirecting stderr to &lt;span class="s1"&gt;'/home/ubuntu/Steam/logs/stderr.txt'&lt;/span&gt;
Logging directory: &lt;span class="s1"&gt;'/home/ubuntu/Steam/logs'&lt;/span&gt;
&lt;span class="o"&gt;[&lt;/span&gt;  0%] Checking &lt;span class="k"&gt;for &lt;/span&gt;available updates...
&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;----&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt; Verifying installation...
Steam Console Client &lt;span class="o"&gt;(&lt;/span&gt;c&lt;span class="o"&gt;)&lt;/span&gt; Valve Corporation - version 1705108307
&lt;span class="nt"&gt;--&lt;/span&gt; &lt;span class="nb"&gt;type&lt;/span&gt; &lt;span class="s1"&gt;'quit'&lt;/span&gt; to &lt;span class="nb"&gt;exit&lt;/span&gt; &lt;span class="nt"&gt;--&lt;/span&gt;
Loading Steam API...dlmopen steamservice.so failed: steamservice.so: cannot open shared object file: No such file or directory
OK

Steam&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's all for the SteamCMD setup, now we move on to install and configure the Palworld server.&lt;/p&gt;

&lt;h3&gt;
  
  
  Palworld dedicated server
&lt;/h3&gt;

&lt;p&gt;Our first step is to download and install the dedicated server, to do this we run the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;steamcmd +login anonymous +app_update 2394010 validate +quit
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;+login anonymous&lt;/code&gt; let us log in into steam as anonymous user.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;+app_update &amp;lt;app_id&amp;gt;&lt;/code&gt; installs or updates the installation of the given &lt;code&gt;app_id&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;validate&lt;/code&gt; checks the server files to make sure they match with SteamCMD files.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;+quit&lt;/code&gt; logs off from the Steam servers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After the download is complete, we go to the download directory, which, in my case, it was in my user's home directory.&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="nb"&gt;cd&lt;/span&gt; ~/Steam/steamapps/common/PalServer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we simply run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./PalServer.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;On the first run, it will throw the following error:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;.steam/sdk64/steamclient.so: cannot open shared object file: No such file or directory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As per the documentation, we can fix this with the following commands:&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="nb"&gt;mkdir&lt;/span&gt; &lt;span class="nt"&gt;-p&lt;/span&gt; ~/.steam/sdk64/
steamcmd +login anonymous +app_update 1007 +quit
&lt;span class="nb"&gt;cp&lt;/span&gt; ~/Steam/steamapps/common/Steamworks&lt;span class="se"&gt;\ &lt;/span&gt;SDK&lt;span class="se"&gt;\ &lt;/span&gt;Redist/linux64/steamclient.so ~/.steam/sdk64/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;It creates a folder called sdk64.&lt;/li&gt;
&lt;li&gt;It installs the Steamworks SDK Redistributable.&lt;/li&gt;
&lt;li&gt;Copy the file &lt;code&gt;steamclient.so&lt;/code&gt; to &lt;code&gt;~/.steam/sdk64/&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;With that out of the way, we can run this command again:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./PalServer.sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we get the following line after running the previous command, the server is up and running successfully:&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;[&lt;/span&gt;S_API] SteamAPI_Init&lt;span class="o"&gt;()&lt;/span&gt;: Loaded &lt;span class="s1"&gt;'/home/ubuntu/.steam/sdk64/steamclient.so'&lt;/span&gt; OK.  &lt;span class="o"&gt;(&lt;/span&gt;First tried &lt;span class="nb"&gt;local&lt;/span&gt; &lt;span class="s1"&gt;'steamclient.so'&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We are almost done. The last thing we need to do is to change some of the server settings.&lt;/p&gt;

&lt;h3&gt;
  
  
  Configuring the Palworld server
&lt;/h3&gt;

&lt;p&gt;Running the server for the first time will generate a configuration file in the following location:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;steamapps/common/PalServer/Pal/Saved/Config/LinuxServer/PalWorldSettings.ini
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As per the documentation found &lt;a href="https://tech.palworldgame.com/optimize-game-balance"&gt;here&lt;/a&gt;, we need to copy the default settings found in &lt;code&gt;steamapps/common/PalServer/DefaultPalWorldSettings.ini&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;There are many server parameters we can edit, but for now we only need to change the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;ServerName&lt;/strong&gt;: We type in the name of our saver, in our case, we called it &lt;em&gt;Eternia&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ServerPassword&lt;/strong&gt;: We can set a server password here.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PublicIP&lt;/strong&gt;: We need to type in the Elastic IP address we set up earlier.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PublicPort&lt;/strong&gt;: We can specify a port number here, the default is 8211.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With those final steps, we are all set to begin our journey into Palworld.&lt;/p&gt;

&lt;p&gt;Nice!👍🏻&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing thoughts
&lt;/h2&gt;

&lt;p&gt;Setting up a game dedicated server with AWS was a really fun experience, from the proper setup of the EC2 instance, to the correct setup of the security group and the allocation of the Elastic IP while also installing and configuring all the dependencies needed to host the Palworld server.&lt;/p&gt;

&lt;p&gt;With this little project under my belt, I'm looking forward to set up all kinds of dedicated servers, from Minecraft to Enshrouded and anything else that comes in between.&lt;/p&gt;

&lt;p&gt;Hope to see you again as I continue my journey towards the cloud.&lt;/p&gt;

</description>
      <category>aws</category>
    </item>
    <item>
      <title>Hugo website CMS</title>
      <dc:creator>Manuel Figueroa</dc:creator>
      <pubDate>Thu, 25 Jun 2020 11:29:49 +0000</pubDate>
      <link>https://dev.to/manuelfs12/hugo-website-cms-4dna</link>
      <guid>https://dev.to/manuelfs12/hugo-website-cms-4dna</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In my previous post, I successfully deployed a Hugo static site through Netlify, you can read all about it &lt;a href="https://dev.to/manuelfs12/the-road-to-the-first-blog-75i"&gt;here&lt;/a&gt;. I managed to create the post with ease using Markdown, but, despite the relative simplicity, it got me thinking. Is there some kind of Content Management System (CMS) for static sites? To my surprise, YES there is, but before we get all excited and dive in into this, lets put up some context of what a CMS is, and why it could help you with your own blogs.&lt;/p&gt;




&lt;h2&gt;
  
  
  What is a Content Management System?
&lt;/h2&gt;

&lt;p&gt;A Content Management System (CMS for short) is a software application that allows users to build and manage a website without having to code it from scratch, one of the big ones in the CMS space is Wordpress, you can easily create a websites and also content for it. The CMS are usually a little to no code solution for people who wants to have a website without dealing with the complexities of web technologies like HTML/CSS, JavaScript, PHP etc.&lt;/p&gt;

&lt;p&gt;In this case, I’m looking for a different way of managing my content, don’t get me wrong, I like how I set my blog site up, and writing in Markdown is really cool, but if I can find a way to enhance it, I’m all in for it. The Hugo website has some recommendations for CMS, you can check out in the &lt;a href="https://gohugo.io/tools/frontends/" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;After glancing over the different suggestions, the one that caught my eye was &lt;strong&gt;Netlify CMS&lt;/strong&gt;, it is funny because I am starting to feel like a Netlify fanboy, but hey, they make interesting stuff.&lt;/p&gt;




&lt;h2&gt;
  
  
  Netlify CMS
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sounds fun, for this experiment I’ll be implementing it on an existing Hugo site.&lt;br&gt;
If you want to learn more about Netlify CMS you can check it out &lt;a href="https://www.netlifycms.org/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Adding the CMS on an existing Hugo site
&lt;/h3&gt;

&lt;p&gt;For the purpose of this post, I’ll use the Hugo &lt;a href="https://gohugo.io/getting-started/quick-start/" rel="noopener noreferrer"&gt;quickstart&lt;/a&gt; site, you should have something like this.&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/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F8p416olz2s5w3k3l8790.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%2Fi%2F8p416olz2s5w3k3l8790.png" alt="Basic Hugo website"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, let’s deploy our site through Netlify, I went with it due to its ease of use and the fact that I deployed &lt;a href="https://manudevbits.com/" rel="noopener noreferrer"&gt;my blog&lt;/a&gt; through it. You can use Netlify CMS with other hosting solutions, but I’ll be using Netlify since I already know the very basics of it. If you want to know how I did it for my blog, check out this &lt;a href="https://manudevbits.com/the-road-to-the-first-blog/" rel="noopener noreferrer"&gt;post&lt;/a&gt;, or you can always check the documentation &lt;a href="https://docs.netlify.com/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;With the site deployed, It’s time to start implementing Netlify CMS.&lt;/p&gt;

&lt;p&gt;I followed the &lt;a href="https://www.netlifycms.org/docs/add-to-your-site/" rel="noopener noreferrer"&gt;instructions&lt;/a&gt; from the documentation, and I have to say, it was really easy to implement, the documentation was easy to follow, and I had the CMS on production very quickly. Keep in mind that I did host the site on Netlify which made it easier, so you millage may vary depending on the host you choose.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Here is the admin panel working on the website&lt;/strong&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/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F44ftw4kghf4hfpcmnlob.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%2Fi%2F44ftw4kghf4hfpcmnlob.png" alt="Admin panel on the website"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Create Post page&lt;/strong&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/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2l8o9tkew0j9ec500rjv.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%2Fi%2F2l8o9tkew0j9ec500rjv.png" alt="Create post page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I also tested the &lt;strong&gt;Editorial Workflow&lt;/strong&gt; which is available on GitHub hosted repositories and it is on beta for GitLab and Bitbucket. This lets me save drafts, review changes and publish when the article is ready.&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/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fpextvoujhlnxg74s5jjf.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%2Fi%2Fpextvoujhlnxg74s5jjf.png" alt="Workflow page"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, I will hit publish, this will create a new commit on our master branch, that Netlify will take and deploy.&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/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fvlcag0uhjw9l8cv7a668.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%2Fi%2Fvlcag0uhjw9l8cv7a668.png" alt="Live site"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A great success!!&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Closing thoughts
&lt;/h2&gt;

&lt;p&gt;I enjoyed this experiment a lot, a CMS can certainly help you if you need some visual aid while editing content, or you simply don’t want to deal with Markdown directly. Netlify CMS was a surprise for me, because I thought it would be way harder to implement, but thankfully it wasn’t, and I will have on the back of my head if I ever need to make another website with a static site generator and need a CMS. Maybe in the future, I’ll try another CMS, or another static site generator, but for now, I’m really happy with my current setup, Hugo, Markdown, VS Code and Netlify.&lt;/p&gt;

&lt;p&gt;Hope to see you around for my next post.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>hugo</category>
      <category>netlify</category>
      <category>go</category>
    </item>
    <item>
      <title>The Road to the First Blog</title>
      <dc:creator>Manuel Figueroa</dc:creator>
      <pubDate>Wed, 17 Jun 2020 22:26:50 +0000</pubDate>
      <link>https://dev.to/manuelfs12/the-road-to-the-first-blog-75i</link>
      <guid>https://dev.to/manuelfs12/the-road-to-the-first-blog-75i</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;After doing some pet projects here and there, learning the basics of git and GitHub, I started to think what I could do as a little pet project to publish on the web, no matter how small.&lt;/p&gt;

&lt;p&gt;A friend of mine suggested I should try to create a blog using a static site generator like &lt;a href="https://jekyllrb.com/"&gt;Jekyll&lt;/a&gt;, &lt;a href="https://hexo.io/"&gt;Hexo&lt;/a&gt;, &lt;a href="https://gohugo.io/"&gt;Hugo&lt;/a&gt;, &lt;a href="https://www.gatsbyjs.org/"&gt;Gatsby&lt;/a&gt; etc. Then it occurred to me that I should write a blog documenting my learning process.&lt;/p&gt;

&lt;p&gt;With that in mind, let us get started.&lt;/p&gt;

&lt;p&gt;In the past, I’ve made a couple of WordPress websites and for this project I was leaning towards that, but it felt like overkill for a pet project, and I also wanted to experiment with something that I haven’t touch before.&lt;br&gt;
I wanted a simple site generator that was not dependent of a JavaScript library like React, or a framework like Angular or Vue, my search led me to Hugo.&lt;/p&gt;


&lt;h2&gt;
  
  
  Hugo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--N3ogG7YS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/eixlhp8g040qg229312y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--N3ogG7YS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/eixlhp8g040qg229312y.png" alt="Hugo logo" width="800" height="210"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Hugo is a general-purpose website framework. Technically speaking, Hugo is a static site generator. Unlike systems that dynamically build a page with each visitor request, Hugo builds pages when you create or update your content. Since websites are viewed far more often than they are edited, Hugo is designed to provide an optimal viewing experience for your website’s end users and an ideal writing experience for website authors”.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;
  
  
  Features
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/bep/hugo-benchmark"&gt;Extremely fast&lt;/a&gt; build times&lt;/li&gt;
&lt;li&gt;Renders changes on the fly with &lt;a href="https://gohugo.io/getting-started/usage/"&gt;LiveReload&lt;/a&gt; as you develop&lt;/li&gt;
&lt;li&gt;&lt;a href="https://gohugo.io/themes/"&gt;Powerful theming&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://gohugo.io/hosting-and-deployment/"&gt;Host your site anywhere&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Straightforward &lt;a href="https://gohugo.io/getting-started/directory-structure/"&gt;organization for your projects&lt;/a&gt;, including website sections&lt;/li&gt;
&lt;li&gt;Customizable &lt;a href="https://gohugo.io/content-management/urls/"&gt;URLs&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Support for configurable &lt;a href="https://gohugo.io/content-management/taxonomies/"&gt;taxonomies&lt;/a&gt;, including categories and tags&lt;/li&gt;
&lt;li&gt;Automatic &lt;a href="https://gohugo.io/content-management/toc/"&gt;table of contents&lt;/a&gt; generation&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://gohugo.io/templates/menus/"&gt;Dynamic menu&lt;/a&gt; creation&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://gohugo.io/content-management/urls/"&gt;Pretty URLs&lt;/a&gt; support&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://gohugo.io/content-management/urls/#permalinks"&gt;Permalink&lt;/a&gt; pattern support&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For the full list of features, click &lt;a href="https://gohugo.io/about/features/"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;With that in mind, and my curiosity picked, I installed Hugo following these &lt;a href="https://gohugo.io/getting-started/installing/"&gt;instructions&lt;/a&gt;, after that, I looked up a theme, and choose one called &lt;a href="https://themes.gohugo.io/hyde-hyde/"&gt;hyde-hyde&lt;/a&gt;, then a couple of minutes later and some tinkering, I have this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0bUf6-1X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/wkklbwbrit28b2ydkbih.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0bUf6-1X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/wkklbwbrit28b2ydkbih.png" alt="Picture of the first website run" width="800" height="632"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;GREAT! I have something working on my machine, I will add some more customization like a profile picture, a little description, social links etc. this looks really promising. Before editing some of the CSS, I decided that I want to deploy the site to the web, my choice for this was &lt;strong&gt;Netlify&lt;/strong&gt;.&lt;/p&gt;


&lt;h2&gt;
  
  
  Deployment
&lt;/h2&gt;

&lt;p&gt;Before Netlify can do anything, I need to create a Git repository on a Git hosting solution like GitHub. How Git and GitHub works is out of the scope of this post, but if you want to know more about Git you can click the following &lt;a href="https://git-scm.com/"&gt;link&lt;/a&gt;, and for GitHub you can go &lt;a href="https://github.com/"&gt;here&lt;/a&gt;. With the project now on GitHub, we can go to Netlify and start the deployment process.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.netlify.com/"&gt;Netlify&lt;/a&gt; is a web host that offers a simple way to deploy sites on the web with the always loved git workflow. I registered using my GitHub account, in the Netlify console I clicked &lt;strong&gt;“new site from git”&lt;/strong&gt;, I choose GitHub, but it also supports GitLab and Bitbucket, configured some basic deployment settings and hit publish, a couple of minutes later, my very basic site was deployed successfully on Netlify, with Continuous Delivery(CD) already set up, this means that every time I push a change to my master branch on GitHub, Netlify will deploy automatically the changes to the website, this is awesome for a blogging website. For more info on how to deploy on Netlify you can go to the Netlify &lt;a href="https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git"&gt;documentation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Now, let’s create our first blog post, I will run the following command on my terminal:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;    hugo new web/0001-test/index.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We will have the following structure inside our &lt;strong&gt;content&lt;/strong&gt; folder&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;    .
    └── content
        └── web
        |    └── 0001-test
        |           └── index.md
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;index.md is the file we will work on. By default, Hugo comes with a default.md in the archetypes folder, this will be use when you create a new file using the command we used previously. Since I did setup some archetype for my content, here is how my index.md looks like.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;    &lt;span class="s"&gt;---&lt;/span&gt;
    &lt;span class="s"&gt;title&lt;/span&gt;&lt;span class="err"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;0001&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;Test"&lt;/span&gt;
    &lt;span class="na"&gt;slug&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;0001&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;Test"&lt;/span&gt;
    &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;2020-06-10T14:20:53-04:00&lt;/span&gt;
    &lt;span class="na"&gt;tags &lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;
        &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Web"&lt;/span&gt;
    &lt;span class="pi"&gt;]&lt;/span&gt;
    &lt;span class="na"&gt;categories &lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;
        &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Web&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;Development"&lt;/span&gt;
    &lt;span class="pi"&gt;]&lt;/span&gt;
    &lt;span class="na"&gt;layout&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;post&lt;/span&gt;
    &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;  &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;web"&lt;/span&gt;
    &lt;span class="na"&gt;highlight&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
    &lt;span class="na"&gt;draft&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;
    &lt;span class="s"&gt;---&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I will type some text and just below the end of the front matter&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;    # Hello World!!!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, the moment of truth&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Homepage View&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ec7RWs-v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/461vvbfhnbtl4fkaguqe.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ec7RWs-v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/461vvbfhnbtl4fkaguqe.png" alt="Homepage with post" width="800" height="632"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Post View&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---FHXAt8C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/akhio1g9tc47mmkapdhm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---FHXAt8C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/i/akhio1g9tc47mmkapdhm.png" alt="Post page with hello world text" width="800" height="632"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; if you check on top of your index.md, you will notice the following&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;draft: true&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 this means that the content will not be displayed on the website if you deploy it right now. To change this, just replace&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;draft: true&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 with&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;draft: false&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;




&lt;h2&gt;
  
  
  Organization
&lt;/h2&gt;

&lt;p&gt;Before we wrap up, let’s talk about Hugo content organization, Hugo supports content nested at any level, however the top levels &lt;code&gt;(i.e. content/&amp;lt;DIRECTORIES&amp;gt;)&lt;/code&gt; are special in Hugo and are considered the content type used to determine layouts etc. Knowing this, I did the following structure:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;    .
    └── content
        └── web
        |    └── &lt;span class="nt"&gt;&amp;lt;PostDirectory&amp;gt;&lt;/span&gt;
        |           └── index.md
        └── mobile
        |    └── ...
        |
        └── gamedev
        |    └── ...
        | ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Why I did it this way?
&lt;/h3&gt;

&lt;p&gt;First of all, I wanted to leverage the power of Hugo archetypes, second, since I’ll be touching different topics about programming, I split the content in broad categories, like web development, mobile development, game development etc. this helps me with my file organization while also giving me room to grow.&lt;/p&gt;




&lt;h2&gt;
  
  
  Closing thoughts
&lt;/h2&gt;

&lt;p&gt;This journey has been very fun, I created a little blog site in a couple of days, deployed it through Netlify, while I also wrote my first blog post ever documenting my steps and a bit of my struggles, learned a lot about static site generators, deployment experience through Netlify, Markdown file editing, and a bit of wizardry with the terminal, all and all, a cool experience.&lt;/p&gt;

&lt;p&gt;Hope to see you around for my next post.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>hugo</category>
      <category>netlify</category>
      <category>devblog</category>
    </item>
  </channel>
</rss>
