[38;5;244m┌─[0m [38;5;40mroot@joaocosta:~#[0m [38;5;245mcat posts/2.md[0m [38;5;244m────────────────────────────────────────────[0m

[38;5;40m#[0m [1mHow I created this web page[0m
[38;5;245mpublished 2020-01-30 · 6 min read · https://joaocosta.dev/blog/2[0m

The blog is quickly approaching what I want it to be, so I can finally write
actual blog posts. So why not start by talking about how this page came to be
and how you can create a similar one.

[38;5;38m##[0m [1mInitial idea[0m

The blog is quickly approaching what I want it to be, so I can finally write
actual blog posts. So why not start by talking about how this page came to be
and how you can create a similar one.

I have had this domain for around a year by the time of writing but all the
plans I've had for it over the last few months never came to be (personal file
server, email server, etc...). Right now, I'm glad those plans/project ideas
never resulted in anything that used this domain because I'm enjoying writing
quite a lot.

The idea of creating a blog came from a [38;5;40mfriend of mine[0m
[38;5;244m(https://educorreia932.dev/)[0m that was starting to play around with some [1mhtml+css[0m
and [1mjava script[0m on his personal web page. It was a small page with a cute
spinning backdrop (the backdrop is controllable now). Anyway, I started by going
through a few tutorials at [38;5;40mw3schools[0m
[38;5;244m(https://www.w3schools.com/howto/howto_website.asp)[0m and was making some progress
when I started thinking about how I was going to host this thing.

[38;5;38m##[0m [1mGitHub pages and hosting[0m

This is where [38;5;40mgithub pages[0m [38;5;244m(https://pages.github.com/)[0m comes in. Since I was
looking to deploy a simple [1mpersonal static[0m page, [38;5;40mgithub pages[0m
[38;5;244m(https://pages.github.com/)[0m sounded like a great solution (I remembered it from
hosting the presentation slides for a [38;5;40mPython 3 workshop[0m
[38;5;244m(https://github.com/JoaoCostaIFG/Workshop-Introduction-Python-3)[0m I lectured).
Hosting it sounded much scarier than it actually is/was. I followed the
following steps:

[38;5;40m→[0m First, you create a repository for your website. Since I wanted it to be my
  personal website, I named it like instructed on the [38;5;40mgithub pages[0m
  [38;5;244m(https://pages.github.com/)[0m page, so [3mjoaocostaifg.github.io[0m in my case. It can
  be either private or public, you choose.

[38;5;40m→[0m [38;5;245m[image][0m Github pages repository name
[38;5;244mhttps://joaocosta.dev/_resources/971c999f8674953b23a338347bb7005e.png[0m

[38;5;40m→[0m After that, you go to your newly created github repository settings (probably
  at [38;5;38mgithub.com/user/user.github.io/settings[0m, where [38;5;38muser[0m is your github
  username) and activate [1mgithub pages function[0m. On the next steps, I'm gonna
  talk about using a custom domain, so the next steps and optional (if you don't
  have/don't want to use a custom domain, you're done with the hosting matter)
[38;5;40m→[0m Now that we've activated the [1mgithub pages function[0m, we can give it our domain
  in the [1mcustom domain section[0m. In my case, this is [38;5;38mjoaocosta.dev[0m. As you can
  see from the image below, the repository can be private.

[38;5;40m→[0m [38;5;245m[image][0m Github repository pages options
[38;5;244mhttps://joaocosta.dev/_resources/573bd2117c9de8e2783752c29eb56b11.png[0m

[38;5;40m→[0m This is the part that confused me a bit (I had no idea it worked like this).
  You need to go to your domain registrar's website and access your domain's DNS
  setting. When you're there, you need to create [1m4 A records[0m with the following
  [1mIP addresses[0m and optionally, a [1mCNAME Record[0m (185.199.108.153, 185.199.109.153,
  185.199.110.153, 185.199.111.153). The [1mCNAME Record[0m seems to improve [38;5;40mpage
  loading times[0m
  [38;5;244m(https://help.github.com/en/github/working-with-github-pages/about-custom-domains-and-github-pages#www-subdomains)[0m
  among other things (also, [1mwww[0m seems to be the common and recommended choice).
  I bought my domain at [38;5;40mnamecheap[0m [38;5;244m(https://www.namecheap.com/)[0m so my DNS
  settings' page look like this:

[38;5;40m→[0m [38;5;245m[image][0m Namecheap dns page
[38;5;244mhttps://joaocosta.dev/_resources/45eeb8940f90d1804ccb46fc52acf4cf.png[0m

[38;5;40m→[0m It should be all good now :D. Remember that if you're using a custom domain,
  it might take a few hours for your certificate to be issued.

Now the fun part begins :3

[38;5;38m##[0m [1mStatic page generators[0m

I'm not sure if you noticed, but there is a [1mTheme Chooser[0m field on the github
pages repository settings. While hosting the page I was working on at the time
(it was a simples html+css page that looked similar to [38;5;40mthis page[0m
[38;5;244m(https://suckless.org/)[0m, I noticed those theme options and got curious, so I
went to check it out. Turn out that there are a few [1mstatic page generators[0m
nowadays, and they are extremely popular. I started looking at some of the
options and the most popular seemed to be [38;5;40mHUGO[0m [38;5;244m(https://gohugo.io/)[0m and [38;5;40mJekyll[0m
[38;5;244m(https://jekyllrb.com/)[0m. I picked up [38;5;40mHUGO[0m [38;5;244m(https://gohugo.io/)[0m because the logo
looked cute.

To be honest, when I started thinking about creating my own blog, I never
expected I'd end up using a static page generator (especially considering I
didn't know they existed) but here I am. It still feels a bit like cheating
because they make the process of creating a web page extremely easy (especially
considering all the [38;5;40mthemes[0m [38;5;244m(https://themes.gohugo.io/)[0m freely available online)
but I'll probably get over it when I start editing the [38;5;40mtheme that I'm using[0m
[38;5;244m(https://themes.gohugo.io/hugo-theme-terminal)[0m (gotta feel like I did something
:/).

Anyway, using HUGO has been super simple and fun. It's easy to write in markdown
and HUGO has tons of features. I thought about talking about how I started using
it but I don't think I can do a better job at explaining stuff than this 2
guides: [38;5;40mHUGO Quick start[0m [38;5;244m(https://gohugo.io/getting-started/quick-start)[0m and
[38;5;40mHUGO Host on Github[0m
[38;5;244m(https://gohugo.io/hosting-and-deployment/hosting-on-github)[0m. BTW HUGO is cool
but Jekyll looked amazing too. Just pick the one you like the most or try both
(I'm too lazy to try both and I'm fairly happy with HUGO [3mfor now[0m). Oh ye,
there's also automatically set up RSS feeds with HUGO (it's under [1mShow more[0m on
the bar at the top).

[38;5;135m###[0m [1mMy 'deploy' script[0m

On the [38;5;40mHUGO Host on Github[0m
[38;5;244m(https://gohugo.io/hosting-and-deployment/hosting-on-github)[0m there's a script
called [38;5;38mdeploy.sh[0m that is used to commit the website builds to the website's
repository (using [1mgit submodules[0m). I had a problem with this script when
deleting pages because they weren't removed from the final build automatically,
so I adapted it to my needs. This is the script I'm using right now:

[38;5;244m┄──────────────────────────────────────────────────────────────────────── bash [0m
[38;5;245m│[0m #!/bin/sh
[38;5;245m│[0m 
[38;5;245m│[0m # If a command fails then the deploy stops
[38;5;245m│[0m set -e
[38;5;245m│[0m 
[38;5;245m│[0m printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"
[38;5;245m│[0m 
[38;5;245m│[0m # Delete old files
[38;5;245m│[0m cd public
[38;5;245m│[0m for i in $(find . -maxdepth 1 ! -name . ! -name .. ! -name '.git' ! -name 'CNAME'); do
[38;5;245m│[0m   rm -r "$i"
[38;5;245m│[0m done
[38;5;245m│[0m cd ..
[38;5;245m│[0m 
[38;5;245m│[0m # Build the project.
[38;5;245m│[0m hugo
[38;5;245m│[0m 
[38;5;245m│[0m # Go To Public folder
[38;5;245m│[0m cd public
[38;5;245m│[0m 
[38;5;245m│[0m # Add changes to git.
[38;5;245m│[0m git add .
[38;5;245m│[0m 
[38;5;245m│[0m # Commit changes.
[38;5;245m│[0m msg="rebuilding site $(date)"
[38;5;245m│[0m if [ -n "$*" ]; then
[38;5;245m│[0m   msg="$*"
[38;5;245m│[0m fi
[38;5;245m│[0m git commit -m "$msg"
[38;5;245m│[0m 
[38;5;245m│[0m # Push source and build repos.
[38;5;245m│[0m git push origin master
[38;5;244m┄──────────────────────────────────────────────────────────────────────────────[0m

This script deletes the old build files (only keeps the [1mCNAME file[0m needed by
github pages and the [1m.git[0m file/directory (it's a file in case we're using
submodule)), builds the website and commits the final build. Feel free to use it
and change it your needs.

[38;5;38m##[0m [1mClosing remarks[0m

Everything seems to be set up to work smoothly from now on, so I'll most likely
start posting more frequently. The most important thing I need to find now is a
tool to check my grammar i.e. if the sentences are constructed correctly (I'm
open to suggestions).

And with this, I end my first real blog post. Feels like this project is going
to be fun. Stay safe :P

[38;5;38m##[0m [1mEDIT (2020-02-23)[0m

I started using a [38;5;38mMakefile[0m to work and deploy the website, instead of my [1mdeploy
script[0m. After I finished writting my [38;5;40m[1mPlantUML[0m post[0m
[38;5;244m(https://joaocosta.dev/content/blog/plantuml.html)[0m, I decided to edit this post
to include it.

[38;5;244m┄──────────────────────────────────────────────────────────────────────── bash [0m
[38;5;245m│[0m # your output directory (e.g.: public)
[38;5;245m│[0m OUTPUT_DIR = public
[38;5;245m│[0m # your website url (e.g.: www.joaocosta.dev)
[38;5;245m│[0m CNAME = www.joaocosta.dev
[38;5;245m│[0m 
[38;5;245m│[0m default: server
[38;5;245m│[0m 
[38;5;245m│[0m .PHONY: clean
[38;5;245m│[0m clean:
[38;5;245m│[0m   @echo "cleaning"
[38;5;245m│[0m   @# clean all files (except hidden files like '.git')
[38;5;245m│[0m   rm -rf ${OUTPUT_DIR}/*
[38;5;245m│[0m   mkdir -p ${OUTPUT_DIR}
[38;5;245m│[0m   @# write the CNAME file
[38;5;245m│[0m   printf "%s" ${CNAME} > ${OUTPUT_DIR}/CNAME
[38;5;245m│[0m 
[38;5;245m│[0m .PHONY: build
[38;5;245m│[0m build:
[38;5;245m│[0m   @echo "building"
[38;5;245m│[0m   hugo -d ${OUTPUT_DIR}
[38;5;245m│[0m 
[38;5;245m│[0m .PHONY: commit
[38;5;245m│[0m commit:
[38;5;245m│[0m   git -C ${OUTPUT_DIR} add -A
[38;5;245m│[0m   git -C ${OUTPUT_DIR} commit -m "Deploy: $(shell date)"
[38;5;245m│[0m   git -C ${OUTPUT_DIR} push origin master
[38;5;245m│[0m 
[38;5;245m│[0m .PHONY: deploy
[38;5;245m│[0m deploy: clean build commit
[38;5;245m│[0m 
[38;5;245m│[0m .PHONY: server
[38;5;245m│[0m server:
[38;5;245m│[0m   hugo -D server
[38;5;244m┄──────────────────────────────────────────────────────────────────────────────[0m

[38;5;244m└─[0m [38;5;40m→[0m view online: [38;5;40mhttps://joaocosta.dev/blog/2[0m