{"id":17435,"date":"2020-03-02T11:20:21","date_gmt":"2020-03-02T05:50:21","guid":{"rendered":"https:\/\/www.the-next-tech.com\/?p=17435"},"modified":"2020-03-03T18:17:58","modified_gmt":"2020-03-03T12:47:58","slug":"create-your-own-blog-for-5-dollars-a-month","status":"publish","type":"post","link":"https:\/\/www.the-next-tech.com\/development\/create-your-own-blog-for-5-dollars-a-month\/","title":{"rendered":"Create Your Own Blog for 5 Dollars a Month"},"content":{"rendered":"<p id=\"3716\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Blogging about tech is fun. Having your own blog allows you to help others, polish your skills, and maybe get you a job.<\/p>\n<p id=\"06c6\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Blogging on popular tech sites is great. Obviously you\u2019re reading this on Hackernoon, so you know I do it. It\u2019s fun. But having your OWN site to manage your content is important as well. This gives you the freedom to do things exactly as you want, try out weird applications and patterns, and experiment.<\/p>\n<p id=\"5c48\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">If you follow this tutorial, you can have your own statically hosted blog for $5 a month. All you need is a domain name.<\/p>\n<h2 id=\"cb46\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Creating a New Machine<\/h2>\n<p id=\"affb\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">We\u2019ll start by creating a virtual machine (they call it droplet)<strong class=\"ga hf\">.<\/strong><\/p>\n<p id=\"4be5\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Click \u201cCreate\u201d and select \u201cdroplet\u201d.<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"cy cz hk\">\n<div class=\"fr r df fs\">\n<div class=\"hq r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/453\/0*Z_4osgdJXFoQP6XH\" width=\"453\" height=\"279\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"dd93\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">I\u2019m choosing\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/hackernoon.com\/can-you-use-freebsd-for-a-developer-machine-in-2020-fc653bk5\" target=\"_blank\" rel=\"noopener nofollow\"><strong class=\"ga hf\">FreeBSD<\/strong><\/a>\u00a0for this, and if you decide to choose Linux, the instructions are pretty similar.<\/p>\n<p id=\"80b6\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Choose the\u00a0<strong class=\"ga hf\">$5 per month<\/strong>\u00a0option:<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hr\">\n<div class=\"fr r df fs\">\n<div class=\"hs r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/750\/0*_J-CpFGeZniO6HPX\" width=\"750\" height=\"376\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"b4d1\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">If this is a new blog, it will be plenty of power. Select the data center region that\u2019s closest to you.<\/p>\n<p id=\"7ce8\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">For authentication, I use ssh. This just means you\u2019ll need to generate keys on your machine and upload the keys to Digital Ocean. But it\u2019s a far more secure option for communicating with your machine.<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hr\">\n<div class=\"fr r df fs\">\n<div class=\"ht r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/750\/0*X5rqY2jP-24JwBbP\" width=\"750\" height=\"251\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"b76d\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><strong class=\"ga hf\">Note:\u00a0<\/strong><em class=\"hu\">Here\u2019s a good tutorial on\u00a0<\/em><a class=\"bh cq hg hh hi hj\" href=\"https:\/\/confluence.atlassian.com\/bitbucketserver\/creating-ssh-keys-776639788.html\" target=\"_blank\" rel=\"noopener nofollow\"><strong class=\"ga hf\"><em class=\"hu\">how to generate ssh keys<\/em><\/strong><\/a><em class=\"hu\">\u00a0in Windows, Linux, or Mac.<\/em><\/p>\n<p id=\"c07a\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Add in your SSH keys, and you\u2019re ready to go.<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"cy cz hv\">\n<div class=\"fr r df fs\">\n<div class=\"hw r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/630\/0*df_xlcnkE4qZnPat\" width=\"630\" height=\"466\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p><!-- Home page 728x90 --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: inline-block; width: 728px; height: 90px;\" data-ad-client=\"ca-pub-9864771813712812\" data-ad-slot=\"3152971286\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<h2 id=\"9e23\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Creating DNS Entries<\/h2>\n<p id=\"9b57\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">You\u2019ll need to create some DNS entries. I use\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/aws.amazon.com\/route53\/\" target=\"_blank\" rel=\"noopener nofollow\">Route53<\/a>\u00a0for DNS, but you can use\u00a0<a href=\"https:\/\/www.digitalocean.com\/\" target=\"_blank\" rel=\"noopener\">Digital Ocean<\/a>\u00a0for DNS into your droplet as well.<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hx\">\n<div class=\"fr r df fs\">\n<div class=\"hy r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/424\/0*F_Z5ci2w6K9vAAwu\" width=\"424\" height=\"465\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"0b85\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Just make sure your domain is mapped to the IP address of your droplet\/server.<\/p>\n<h2 id=\"d7ad\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Logging Into Your System<\/h2>\n<p id=\"2f75\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">Now let\u2019s log into the droplet. Since I\u2019m using FreeBSD, I\u2019m going to update it.<\/p>\n<p id=\"bac2\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">freebsd-update fetch install<\/code><\/p>\n<p id=\"7b58\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Next, we\u2019ll install Git and Nginx.<\/p>\n<p id=\"8c79\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">pkg install git<\/code><\/p>\n<p id=\"020d\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">pkg install nginx<\/code><\/p>\n<p id=\"edbf\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Then we\u2019ll run rehash, so the commands are available.<\/p>\n<p id=\"4d3c\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">rehash<\/code><\/p>\n<h2 id=\"3147\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Adding Firewall Rules<\/h2>\n<p id=\"e306\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">You\u2019ll want to set up a few rules for your firewall.<\/p>\n<p id=\"447d\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Use the following commands to make changes to your sysrc:<\/p>\n<p id=\"4160\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">sysrc nginx_enable=\"YES\"<\/code><\/p>\n<p id=\"6121\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">sysrc firewall_enable=\"YES\"<\/code><\/p>\n<p id=\"00db\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">sysrc firewall_type=\"workstation\"<\/code><\/p>\n<p id=\"a8e5\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">sysrc firewall_myservices=\"22\/tcp 80\/tcp 443\/tcp\"<\/code><\/p>\n<p id=\"5cd9\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">sysrc firewall_allowservices=\"any\"<\/code><\/p>\n<p id=\"fb69\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Then start up the firewall.<\/p>\n<p id=\"74cb\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">sudo nohup service ipfw start &gt;&amp;\/tmp\/ipfw.log<\/code><\/p>\n<p id=\"5283\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Start up Nginx:<\/p>\n<p id=\"5e19\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">sudo service nginx start<\/code><\/p>\n<p id=\"2eb7\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">You should see this:<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hr\">\n<div class=\"fr r df fs\">\n<div class=\"id r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/750\/0*ZIU1MGjkAVmca3Vu\" width=\"750\" height=\"419\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"57e7\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Now Nginx is up and running on your machine through an HTTP connection.<\/p>\n<h2 id=\"4742\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Setting up Your Development Machine<\/h2>\n<p id=\"4f82\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">We will use\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/gohugo.io\/\" target=\"_blank\" rel=\"noopener nofollow\"><strong class=\"ga hf\">Hugo<\/strong><\/a>\u00a0for static site generation. Depending on your development machine environment, the installation is a little different, so rather than repeat the install instructions for each platform (Windows\/Mac\/Linux\/BSD) just follow the instructions here:<\/p>\n<p id=\"b93b\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">You\u2019ll need to\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/golang.org\/doc\/install\" target=\"_blank\" rel=\"noopener nofollow\"><strong class=\"ga hf\">install Golang<\/strong><\/a>\u00a0on your system.<\/p>\n<p id=\"57b3\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Then\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/gohugo.io\/getting-started\/installing\/\" target=\"_blank\" rel=\"noopener nofollow\"><strong class=\"ga hf\">install Hugo<\/strong><\/a><\/p>\n<p id=\"cd0f\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Make sure\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/git-scm.com\/book\/en\/v2\/Getting-Started-Installing-Git\" target=\"_blank\" rel=\"noopener nofollow\"><strong class=\"ga hf\">Git<\/strong><\/a><strong class=\"ga hf\">\u00a0<\/strong>is installed on this machine as well.<\/p>\n<span class=\"seethis_lik\"><span>Also read:<\/span> <a href=\"https:\/\/www.the-next-tech.com\/gadgets\/apple-watch-not-connecting-to-phone-reasons-and-fixes\/\">Apple Watch Not Connecting To Phone: Here\u2019s The 5 Reasons and Fixes!<\/a><\/span>\n<h2 id=\"05da\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Creating a New Hugo Website<\/h2>\n<p id=\"e832\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">Now, let\u2019s create a new website. Mine is called \u201csillyblog\u201d so I run the following command:<\/p>\n<p id=\"3994\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">hugo new site sillyblog<\/code><\/p>\n<p id=\"10ad\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Hugo does not give you a default theme with your blog, so you will need to\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/themes.gohugo.io\/\" target=\"_blank\" rel=\"noopener nofollow\"><strong class=\"ga hf\">find a theme<\/strong><\/a>\u00a0that you like.<\/p>\n<p id=\"5647\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Then you just git clone your theme into the \/themes folder within the folder you just created.<\/p>\n<p id=\"de50\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">I\u2019m using the \u201cHugo Dusk\u201d theme so it looks like this:<\/p>\n<p id=\"bbb3\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">cd sillyblog\/themes<\/code><\/p>\n<p id=\"6b5b\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">git clone\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/github.com\/gyorb\/hugo-dusk.git\" target=\"_blank\" rel=\"noopener nofollow\">https:\/\/github.com\/gyorb\/hugo-dusk.git<\/a><\/code><\/p>\n<p id=\"6cf3\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Now, I need to add the theme to my config.toml file. This will depend on the name of the theme you install. Most of the time, it\u2019s the same name as the .git file.<\/p>\n<p id=\"f9bc\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">echo 'theme = \"hugo-dusk\"' &gt;&gt; config.toml<\/code><\/p>\n<p id=\"2226\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Now let\u2019s create our first post:<\/p>\n<p id=\"fdad\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">hugo new posts\/my-first-post.md<\/code><\/p>\n<p id=\"ab21\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Note the file name makes the URL. So my URL will be<\/p>\n<blockquote class=\"ie if ig\">\n<p id=\"91b5\" class=\"fy fz ca hu ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><em class=\"at\">domain.com\/posts\/my-first-post\/<\/em><\/p>\n<\/blockquote>\n<p id=\"b63d\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">This is important to keep in mind for SEO purposes.<\/p>\n<p id=\"dbfe\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Open up the file content\/helloworld.md<\/p>\n<p id=\"b5bb\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">It will look like this:<\/p>\n<p id=\"09cf\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">---<\/code><\/p>\n<p id=\"8dfd\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">title: \"Helloworld\"<\/code><\/p>\n<p id=\"f6dd\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">date: 2020-02-29T00:24:30-08:00<\/code><\/p>\n<p id=\"ed83\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">draft: true<\/code><\/p>\n<p id=\"e541\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">---<\/code><\/p>\n<p id=\"650d\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Here you can edit your first post.<\/p>\n<p id=\"6290\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">You want to change draft: true to draft: false when you\u2019re ready to publish.<\/p>\n<p id=\"b75f\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">hugo serve<\/code><\/p>\n<p id=\"a4ea\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Cool, now we have a blog running on our local machine.<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hr\">\n<div class=\"fr r df fs\">\n<div class=\"ih r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/750\/0*z2C8YpAgH-DMjcUf\" width=\"750\" height=\"425\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"95ba\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">You can cancel out of the service, and to generate a new site, just type in<\/p>\n<p id=\"73c9\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">hugo<\/code><\/p>\n<p id=\"cde2\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Your website will be generated into the \u201cpublic\u201d folder.<\/p>\n<h2 id=\"f67c\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Setting up Deployment<\/h2>\n<p id=\"f69a\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">create a\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/www.github.com\/\" target=\"_blank\" rel=\"noopener nofollow\">github<\/a>\u00a0repository<\/p>\n<p id=\"9a31\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">go back to the \/public directory of your blog (for me it\u2019s \u201csillyblog\u201d)<\/p>\n<p id=\"8a86\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Initialize the repository.<\/p>\n<p id=\"24c4\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">git init<\/code><\/p>\n<p id=\"3eb1\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Then, do your first commit.<\/p>\n<p id=\"616e\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">git commit -m \"first commit\"<\/code><\/p>\n<p id=\"9584\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">You will need to add the remote origin of your blog on github. For me, I named it \u201csimpleblog\u201d but your name will be different.<\/p>\n<p id=\"3aee\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">git remote add origin\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/github.com\/JeremyMorgan\/simpleblog.git\" target=\"_blank\" rel=\"noopener nofollow\">https:\/\/github.com\/JeremyMorgan\/simpleblog.git<\/a><\/code><\/p>\n<p id=\"0fda\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Then push the files up to Github. (Note you can remove the Github step if you want and push it directly to the server).<\/p>\n<p id=\"8fc7\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">git push -u origin master<\/code><\/p>\n<p id=\"b91d\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Now you should see your files pushed up to your Github repo.<\/p>\n<h2 id=\"5afe\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Setting up Our Server<\/h2>\n<p id=\"a4ed\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">Now we need to set up our server. Make a folder for the new site, and replace \u201cexample.com\u201d with the name of your website.<\/p>\n<p id=\"7e01\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">mkdir -p \/usr\/local\/www\/example.com\/html<\/code><\/p>\n<p id=\"9c7e\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Make sure and change the ownership of the directory to www for Nginx.<\/p>\n<p id=\"398c\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">sudo chown -R www:www \/usr\/local\/www\/example.com<\/code><\/p>\n<p id=\"ce87\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Now you can clone your site directly into that folder. (This is what you\u2019ll do every time you publish.)<\/p>\n<p id=\"41c4\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">git clone https:\/\/github.com\/JeremyMorgan\/simpleblog.git \/usr\/local\/www\/example.com\/html\/<\/code><\/p>\n<p id=\"97d7\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Finally, You\u2019ll need to edit your nginx.conf so that your domain name will be directed to that folder.<\/p>\n<p id=\"514a\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">vi \/usr\/local\/etc\/nginx\/nginx.conf<\/code><\/p>\n<p id=\"11af\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">And add in the following: (replace my domain name with yours)<\/p>\n<p id=\"4a02\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">server {<br \/>\naccess_log \/var\/log\/nginx\/sillyblog.jeremymorgan.com.access.log;<br \/>\nerror_log \/var\/log\/nginx\/sillyblog.jeremymorgan.com.error.log;<br \/>\nlisten 80;<br \/>\nserver_name sillyblog.jeremymorgan.com;<br \/>\nlocation \/ {<br \/>\nroot \/usr\/local\/www\/sillyblog.jeremymorgan.com\/html;<br \/>\nindex index.html index.htm<br \/>\n}<br \/>\n}<br \/>\n}<\/code><\/p>\n<p id=\"0b9c\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">This will likely be somewhere towards the bottom of the file:<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hr\">\n<div class=\"fr r df fs\">\n<div class=\"ii r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/750\/0*Qbs6mPCCUL_LTLrB\" width=\"750\" height=\"465\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"21d7\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Now save the file and reload Nginx:<\/p>\n<p id=\"0264\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">service nginx reload<\/code><\/p>\n<p id=\"2bd0\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">And Viola! Our site is up!!<\/p>\n<p id=\"bfbf\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">But it\u2019s\u00a0<strong class=\"ga hf\">HTTP on port 80<\/strong>. Can\u2019t have that.<\/p>\n<h2 id=\"de3e\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Installing Let\u2019s Encrypt for SSL<\/h2>\n<p id=\"5191\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">We\u2019ll install a certificate with\u00a0<a class=\"bh cq hg hh hi hj\" href=\"https:\/\/letsencrypt.org\/\" target=\"_blank\" rel=\"noopener nofollow\"><strong class=\"ga hf\">Let\u2019s Encrypt<\/strong><\/a>. One of the cool things about Let\u2019s Encrypt is the cert is free (though you should\u00a0<strong class=\"ga hf\">donate<\/strong>), and certbot will pretty much do all the configuration for you.<\/p>\n<p id=\"f290\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">You need to install certbot:<\/p>\n<p id=\"89dd\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">pkg install py37-certbot-dns-digitalocean<\/code><\/p>\n<p id=\"bc75\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">pkg install py37-certbot-nginx<\/code><\/p>\n<p id=\"fe81\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Then, run it with the \u2014 nginx flag:<\/p>\n<p id=\"cbfd\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\"><code class=\"fs hz ia ib ic b\">certbot certonly --nginx<\/code><\/p>\n<p id=\"2e3e\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">It will ask you some questions:<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hr\">\n<div class=\"fr r df fs\">\n<div class=\"ij r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/750\/0*rjymfeNu8NPNUdyp\" width=\"750\" height=\"249\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"9f50\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">Then it will automatically make modifications to your Nginx conf:<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hr\">\n<div class=\"fr r df fs\">\n<div class=\"ii r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/750\/0*eFjJO1dQ7T_VvyRF\" width=\"750\" height=\"465\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<p id=\"cc20\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">And finally, the site is up, with https!!<\/p>\n<figure class=\"hl hm hn ho hp fi cy cz paragraph-image\">\n<div class=\"fj fk df fl ak\">\n<div class=\"cy cz hr\">\n<div class=\"fr r df fs\">\n<div class=\"id r\">\n<div class=\"fm fn dh t u fo ak ee fp fq\"><\/div>\n<p><img loading=\"lazy\" class=\"la ne dh t u fo ak fx\" role=\"presentation\" src=\"https:\/\/miro.medium.com\/max\/750\/0*wW8VFjpfqYsWCBfw\" width=\"750\" height=\"419\" \/><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n<h2 id=\"684d\" class=\"gm gn ca at as go gp gq gr gs gt gu gv gw gx gy gz\">Conclusion<\/h2>\n<p id=\"4d8c\" class=\"fy fz ca at ga b gb ha gd hb gf hc gh hd gj he gl ex\" data-selectable-paragraph=\"\">In this tutorial, we:<\/p>\n<ul class=\"\">\n<li id=\"aaa4\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ik il im\" data-selectable-paragraph=\"\">Set up a Digital Ocean VM<\/li>\n<li id=\"a7ac\" class=\"fy fz ca at ga b gb in gd io gf ip gh iq gj ir gl ik il im\" data-selectable-paragraph=\"\">Installed Nginx<\/li>\n<li id=\"5bb5\" class=\"fy fz ca at ga b gb in gd io gf ip gh iq gj ir gl ik il im\" data-selectable-paragraph=\"\">Installed Hugo on our local machine<\/li>\n<li id=\"9501\" class=\"fy fz ca at ga b gb in gd io gf ip gh iq gj ir gl ik il im\" data-selectable-paragraph=\"\">Created a new site with Hugo<\/li>\n<li id=\"24e3\" class=\"fy fz ca at ga b gb in gd io gf ip gh iq gj ir gl ik il im\" data-selectable-paragraph=\"\">Used Git to push it to our new server.<\/li>\n<\/ul>\n<p id=\"d16f\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">This workflow can vary, but this is enough to get started. In this workflow, we build artifacts on a local machine and use Git to store the artifacts and move them to the server. Another (better) alternative for you might be to store the entire Hugo folder in a git repo, and then commit that to the server and build your artifacts after that.<\/p>\n<p id=\"b288\" class=\"fy fz ca at ga b gb gc gd ge gf gg gh gi gj gk gl ex\" data-selectable-paragraph=\"\">I didn\u2019t want to load up this tutorial too much, but in future tutorials, we\u2019ll set something like that up, and set up some CI\/CD tweaks to it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blogging about tech is fun. Having your own blog allows you to help others, polish your skills, and maybe get<\/p>\n","protected":false},"author":600,"featured_media":17441,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[133],"tags":[1380,1411,1410],"_links":{"self":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/17435"}],"collection":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/users\/600"}],"replies":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/comments?post=17435"}],"version-history":[{"count":9,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/17435\/revisions"}],"predecessor-version":[{"id":17530,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/posts\/17435\/revisions\/17530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/media\/17441"}],"wp:attachment":[{"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/media?parent=17435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/categories?post=17435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.the-next-tech.com\/rest\/wp\/v2\/tags?post=17435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}