3sky's notes

Minimal blog about IT

Build static blog on GitHub Pages #2

2020-02-26 4 min read 3sky

Welcome

In the previous episode, I have created a short blog post about short blog post. That was quite interesting for me, in meantime, I configure my VSC for English support, add some small fixes in the Markdown file then I realized that the manual reload of configuration is a huge mistake in the context of productive. What is the first tool when we start thinking about automation? In Linux environment of course. For me, it’s Bash. Let’s begin then.

Tools used in this episode

  • Bash
  • GitHub Pages

Bash

Bash is an sh-compatible shell that incorporates useful features from the Korn shell (ksh) and C shell (csh)

Why Bash

Bash is everywhere, on almost every modern *nix system. Maybe it’s not most readable language, but if you have at least small idea what you want to achieve, then that’s enough to automate it with Bash

Let’s code - Bash

  1. Go inside 3sky.io and open a new file

    cd <page-name>
    vim <script>.sh
    
    # Example
    # cd 3sky.io
    # vim deploy.sh
    
  2. Write a script

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    
    #!/bin/bash
    set -e
    # -e = Exit immediately if a command exits with a non-zero status
    
    # Set as hardcode, it's easier
    PROJECT_DIR=/home/kuba/3sky.io
    
    # Cleanup public directory
    # Always be sure what you delete
    rm -rf $PROJECT_DIR/public
    
    # Generate static
    cd $PROJECT_DIR
    hugo
    
    # Copy directory
    sudo cp -R $PROJECT_DIR/public /var/www/
    
    # Change owner of file
    sudo chown -R \
    $(ps aux|grep nginx|grep -v grep| grep -v master| cut -d" " -f1).\
    /varwww/public/
    
    # Restart Nginx
    sudo systemctl restart nginx.service
    

    It’s very similar to steps from the previous post, isn’t it?

  3. Add execution permission

    chmod +x <script>.sh
    
    # Example
    #chmod +x deploy.sh
    
  4. Check how it works

    ./deploy.sh
    

Summary - Bash

After that small intervention, I cat reload my developer service after every update without any problems or manual work. The important fact is that the bash script works and is stable. Not everything is as pleasant as not repeating boring work. Now it’s time for go-live.

GitHub Pages

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website. You can see examples of GitHub Pages sites in the GitHub Pages examples collection.

Why GitHub Pages

We already talk about that, it’s free and till writing this series I didn’t hear any complaints. Also, I have a simple documentation. So why not?

Let’s code - GitHub Pages

  1. Create a GitHub

    git clone https://github.com/username/username.github.io
    
    # Example
    # git clone https://github.com/3sky/3sky.github.io
    
  2. Great, now we should treat this directory as Nginx’s public directory.

    cp -R public/* username.github.io
    
    # Example
    # cp -R public/* 3sky.github.io
    
  3. Now just push it

    1. Go to directory

      cd 3sky.github.io
      
    2. Add all file under tracking

      git add -A
      
    3. Configure user and email

      git config --global user.name "FIRST_NAME LAST_NAME"
      git config --global user.email "[email protected]"
      
      # Example
      # git config --global user.name "3sky"
      # git config --global user.email "[email protected]"
      
    4. Add commit message

      git commit -m 'my first blog commit'
      
    5. Push it

      git push
      
    6. Now provide some credentials I can recommend tokens for machines like GCP.

      1. Use this guid - it’s better to use original docs.

      2. Type you’re user and token.

        [email protected]:~/3sky.github.io$ git push
        Username for 'https://github.com': 3sky
        Password for 'https://[email protected]':
        
      3. And I’m done blog is live, but…

Summary - GitHub Pages

It’s working very slow. My first deployment lasted more than 1hour, so take a breath and just go for a walk, I can recommend a long walk. What will be next? CD system, but which one? And what about automatic test? You can ask now why the heck I need automatic tests?. Because if something takes so long, it’s better to deploy a stable and tested version.