Application Note #1 - Creating a static web site

Posted on Edited on In Views:
Symbols count in article: 3.4k Reading time ≈ 3 mins.

Objectives

  • Create a static website using hexo
  • Implement procedures from various articles, tutorials and other references
  • Provide a summary of instructions and procedures in the form of bash scripts

References

  1. https://jamstack.org/generators/
  2. https://jamstack.org/generators/hexo/
  3. https://hexo.io/docs/#Installation
  4. https://hexo.io/docs/#
  5. https://github.com/hexojs/hexo
  6. https://hexo.io/docs/setup

Platform

Arch Linux

1
2
uname -a
Linux archy 5.9.9-arch1-1 #1 SMP PREEMPT Wed, 18 Nov 2020 19:52:04 +0000 x86_64 GNU/Linux

Procedures

Step 1

Requirements

1
2
3
4
5
6
7
8
9
10
11
# 
#   Requirements
#     Installing Hexo requires:
#     Node.js (Should be at least Node.js 10.13, recommends 12.0 or higher)
#     Git
# on arch assume AUR nvm is installed and Node.js >=10.13 is installed (confirm with nvm ls)
node --version
v12.9.0 # we good to go!
# check git
# 
git --version # git version 2.29.2 we good to go!

Step 2

Install hexo detailed instructions…, quickstart…

1
npm install -g hexo-cli

Step 3

Setup site…

1
2
3
4
mkdir -p ~/static_web_sites/hexo/uu3.gitlab.io
cd ~/static_web_sites/hexo/uu3.gitlab.io
hexo init 
npm install

Step 4

Start the server

Start it

1
hexo server

View it

  • in another terminal, confirm default site was created
1
google-chrome-stable http://localhost:4000

Step 5

Add content

Create a new post

1
hexo new "My Projects Blog..."

Generate static files

1
hexo generate

Reload

1
google-chrome-stable http://localhost:4000

TADA works…

Step 6

configure hexo

markdown

1
"hexo-renderer-marked": "^3.0.0",
  • edit _config.yml as described here…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
marked:
  gfm: true
  pedantic: false
  breaks: true
  smartLists: true
  smartypants: true
  quotes: '“”‘’'
  modifyAnchors: 0
  anchorAlias: false
  autolink: true
  mangle: true
  sanitizeUrl: false
  headerIds: true
  lazyload: false
  prependRoot: false
  postAsset: false
  external_link:
    enable: false
    exclude: []
    nofollow: false
  disableNunjucks: false
  descriptionLists: true

hexo-renderer-marked uses marked as the rendering engine and it supports various flavors of marked

Step 8

Push site to gitlab

Create/initialize git repo

  • Create the repo on gitlab in the usual way, but observe the following…
    • NOTE **
    • NOTE **
      • you must create a group without “.” in it, otherwise you’ll get SSL/TLS issues when you deploy the website.
      • “When using Pages under the general domain of a GitLab instance (\.example.io), you cannot use HTTPS with sub-subdomains.”* details…
      • also read this…
    • To ensure our website has the URL https://uu3.blog.gitlab.io/
      • DO THIS!! first I created a group called “uu3”
      • DO THIS!! then created a project called “uu3.gitlab.io” WITHOUT a README.md
      • make the group uu3 is private (dont have to but security…)

Create a README.md, .gitignore and push to the repo

1
2
3
4
cat > README.md << EOF
## uu3 blog
### A hexo based blog for my IOT, ESP32, 3D Printing and other projects...
EOF

Confirm .gitignore was created

NOTE ** .gitignore should be made for us.

1
2
3
4
5
6
7
cat .gitignore 
  .DS_Store
  Thumbs.db
  db.json
  *.log
  node_modules/
  public/

Push to repo

1
2
3
4
5
6
7
git config --global user.name "Fred Carella"
git config --global user.email "fred.carella@gmail.com"
git init
git remote add origin https://gitlab.com/uu3/uu3.gitlab.io.git
git add .
git commit -m "Initial commit"
git push -u origin master

back to Series…