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

Go inside 3sky.io and open a new file

cd <page-name>
vim <script>.sh

# Example
# cd 3sky.io
# vim deploy.sh

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?

Add execution permission

chmod +x <script>.sh

# Example
#chmod +x deploy.sh

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

Create a GitHub

git clone https://github.com/username/username.github.io

# Example
# git clone https://github.com/3sky/3sky.github.io

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

Now just push it

Go to directory
```
cd 3sky.github.io
```
Add all file under tracking
```
git add -A
```

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]"

Add commit message
```
git commit -m 'my first blog commit'
```
Push it
```
git push
```
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.
```
kuba@app-9545cd49c0a34f27:~/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.