0%

Objectives

  • update the static website (hexo)

References

  1. https://dandyxu.me/Hexo/How-to-update-Hexo-and-Hexo-theme-properly/

Procedures

Step 1

update hexo

  • Change into blog directory with package.json file
    • Run
      1
      npm update

Step 2

update hexo next theme

  • do nothing! Although the documentation… says to pull the repo, you dont have to npm update also updates the theme

  • package.json after update

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    "dependencies": {
    "hexo": "^5.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-searchdb": "^1.3.3",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.0.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-symbols-count-time": "^0.7.1",
    "hexo-theme-next": "^8.1.0"
    }

Step 3

update hexo config

  • we configured hexo by using the alternate configuration file which required copying "node_modules/hexo-theme-next/_config.yml" to "_config.next.yml"
  • when we update “next” theme, you have to recopy that file (so you are working with the newest version of the config) but it wont have all of the config changes you made to it. You have to go in and remake all the changes (first, search for “_config.next.yml” to find all the places you modified the config, then make a backup copy of the working _config.next.yml, then copy the new one (see app note 4) and lastly reapply all the config changes)

back to Series…

Objectives

References

  1. https://github.com/next-theme/hexo-theme-next
  2. https://jdhao.github.io/2017/02/26/hexo-install-use-issue/
  3. https://theme-next.js.org/docs/third-party-services/statistics-and-analytics.html?highlight=page+count
  4. https://lanvoyager.github.io/posts/2ef3ae62/
  5. https://lanvoyager.github.io/posts/66a6d538/#more (gitalk)
  6. https://dandyxu.me/Hexo/How-to-update-Hexo-and-Hexo-theme-properly/
  7. https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html
  8. https://github.com/hexojs/hexo-generator-sitemap

Procedures

Step 1: create configuration file

Step 2 : configure scheme

  • edit _config.next.yml
    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

Step 3 : configure word count and read time.

Note this plugin adds reading time info at the top of the article
Example
Creating a blog using hexo Posted on 2020-11-28
Symbols count in article: 2k Reading time ≈ 2 mins.

install plugin

1
npm install hexo-symbols-count-time --save

edit _config.yml

1
2
3
4
5
6
7
8
9
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false
awl: 4
wpm: 275
suffix: "mins."

install search tool

1
npm install hexo-generator-searchdb --save

edit _config.next.yml

1
2
local_search:
enable: true

Step 5 : enable table of contents in side bar

edit _config.next.yml

1
2
toc:
enable: true

Step 6 : firebase page counter

THIS FEATURE HAS BEEN DISABLED (FIREBASE RULES HAVE BEEN MODIFIED TO REQUIRE AUTHENTICATION) BECAUSE THESE INSTRUCTIONS LEAVE THE FIREBASE DATABASE INSECURE. DISABLED TILL I FIGURE OUT A FIX

  • instructions…

  • more detailed instructions…

    • Login to Firebase to get apiKey and projectId
    • Edit theme config file and add or change firestore section:
    • #NOTE** you need web api key, project_id, and to create a firestore database called blog_hits(for the collection) as described in web article above
    • #NOTE** this works. once setup, you’ll see hit counts for every post. You can see it at the top of the post and/or in the firebase database

      edit _config.next.yml

      1
      2
      3
      4
      5
      firestore:
      enable: true
      collection: blog_hits #required, a string collection name to access firestore database
      apiKey: # secret
      projectId: blog-page-counters
  • NOTE This guy (https://lanvoyager.github.io/categories/nerdyNotes/) has a lot of good tips, implement more of them… like sitemap, gittalk, leaflet, audio player etc…

Step 7 : enable disqus commenting

  • NOTE, ABORT!!!!
    • I did not like their privacy policy nor that users need a disqus account to comment
- follow instructions here: https://theme-next.js.org/docs/third-party-services/comments.html?highlight=disqus
- created a disqus account
- modify _config.next.yml
- maybe check out gittalk See https://lanvoyager.github.io/posts/66a6d538/#more

Step 8 - install utterances comment system

  • read about this new feature https://theme-next.js.org/next-8-1-0-released/
  • more…

    Install

  • NOTE ** create a github repo (logged in with fred.carella@gmail account) called blog_comments
    install instructions

    edit _config.next.yml

    1
    2
    3
    4
    5
    6
    7
    utterances:
    enable: true
    repo: fcarella/blog_comments # Github repository name
    # Available values: pathname | url | title | og:title
    issue_term: pathname
    # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
    theme: github-light

Step 9 - get blog indexed on google

follow these instructions…

NOTE ** even after doing all this it takes time for google to actually recognize the site.

See if your site is searchable. In a browser, enter
site:https://uu3.gitlab.io/

Generate Sitemap

  • use instructions from https://github.com/hexojs/hexo-generator-sitemap

    1. First, install plugin hexo-generator-sitemap with:
      1
      2
      # install plugin
      npm install hexo-generator-sitemap --save
    2. edit _config.xml
      1
      2
      3
      4
      5
      6
      7
      #  https://github.com/hexojs/hexo-generator-sitemap
      sitemap:
      path: sitemap.xml
      # template: ./sitemap_template.xml
      rel: false
      tags: true
      categories: true
    3. Then generate the sitemap
      1
      2
      3
      4
      # generate sitemap
      hexo generate
      # Then, there should be sitemap.xml in public folder under root directory.
      ls /home/fcarella/CodeProjects/static_web_sites/hexo/uu3.gitlab.io/public/sitemap.xml
    4. Enable sitemap in _config.next.yml
      1
      2
      3
      4
      5
      6
      7
      8
      9
      menu:
      home: / || fa fa-home
      #about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      #schedule: /schedule/ || fa fa-calendar
      sitemap: /sitemap.xml || fa fa-sitemap
      #commonweal: /404/ || fa fa-heartbeat
    5. Then deploy by pushing to gitlab
      1
      2
      3
      4
      5
      6
      #.... push to gitlab repo...
      git add .
      git commit -m "add sitemap and make page google searchable"
      git push origin master
      #...
      # then test that its visible
      test by visiting https://uu3.gitlab.io/sitemap.xml

Add robots.txt

Add robots.txt file to source folder. My example is given here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
cat >/home/fcarella/CodeProjects/static_web_sites/hexo/uu3.gitlab.io/source/robots.txt <<EOF
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /about/
Allow: /2020/

Disallow: /images/
Disallow: /js/
Disallow: /css/

Sitemap: https://uu3.gitlab.io/sitemap.xml
EOF

push to gitlab repo

1
2
3
git add .
git commit -m "add sitemap and make page google searchable"
git push origin master

Submit Sitemap to Google

NOTE** his instructions say to go here https://www.google.com/webmasters/
but, looks obsolete goes here https://developers.google.com/search now
So I went here…
Logged in to Google Search Console with your Google account.
https://search.google.com/search-console/welcome

Anyway, I just followed the new instructions at google.
Basically, it ask you to download an html file (filename_google_gave_you.html) and verify it (click verify button on their web page instructions). So I did, I downloaded into the source folder.
Next you have to tell hexo NOT to render the html file google sent you because google expects to see just the contents of the original file, not all the rendered stuff hexo does to it.
So disable rendering for that file:

  • edit _config.xml
    1
    2
    skip_render:
    - "filename_google_gave_you.html"
    Then you do this next…
    (NOTE **very important to hexo clean or it won’t verify)
    1
    2
    3
    4
    5
    hexo clean
    hexo generate
    git add .
    git commit -m "add sitemap and make page google searchable"
    git push origin master
    Then I committed and pushed to gitlab and verified as the search console asked me to

You can also verify yourself
https://uu3.gitlab.io/filename_google_gave_you.html

My search console:
https://search.google.com/search-console?resource_id=https%3A%2F%2Fuu3.gitlab.io%2Fblog%2F

Step 10 - build and test it

  • note you might have to kill hexo server first

    build

    1
    2
    3
    hexo clean # if you dont clean you get NaN article reading time
    hexo generate
    hexo server

    test

  • in another terminal
    google-chrome-stable http://localhost:4000

Step 11 - Push Your Website to GitLab

1
2
3
4
5
6
7
8
9
10
git add .
git commit -m "commit"
git push origin master

#check the pipeline for errors
google-chrome-stable https://gitlab.com/uu3/uu3.gitlab.io/-/pipelines

#the link works!!
#See https://gitlab.com/uu3/uu3.gitlab.io/pages for the link
https://uu3.gitlab.io/

back to Series…

Objectives

References

  1. https://github.com/next-theme/hexo-theme-next
  2. https://jdhao.github.io/2017/02/26/hexo-install-use-issue/
  3. https://theme-next.js.org/docs/third-party-services/statistics-and-analytics.html?highlight=page+count
  4. https://lanvoyager.github.io/posts/2ef3ae62/
  5. https://lanvoyager.github.io/posts/66a6d538/#more (gitalk)
  6. https://dandyxu.me/Hexo/How-to-update-Hexo-and-Hexo-theme-properly/

Procedures

Step 1 : (1) install theme

1
2
cd ~/static_web_sites/hexo/blog
npm install hexo-theme-next

configure hexo to use theme
edit _config.yml

1
theme: next

Step 2 : build and test it

build

1
2
hexo generate
hexo server

test

in another terminal

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

/images/series1/next-theme-installed.png

back to Series…

Application Note #2 - Host Blog on gitlab

Implementation of instructions found in the following links…

  1. https://hexo.io/docs/gitlab-pages

Objectives

  • Host a blog site on gitlab.
  • The objective is to deploy the static website created in Application Note 1 to gitlab.
  • Provide a summary of instructions and procedures in the form of bash scripts

Procedures

Step 1 : Create .gitlab-ci.yml in the root of the hexo static web site

  • the .gitlab-ci.yml file is a script that tells the gitlab CI/CD system how to build and deploy the website on the server.
    • the script creates a linux/nodejs based docker image, installs hexo into it and then copies the web site files over to it. The web site is hosted on that docker image
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      cd ~/static_web_sites/hexo/blog
      # The .gitlab-ci.yml configures the GitLab CI on how to build your page. Simply add the content below.
      cat << EOF > .gitlab-ci.yml
      image: node:10-alpine # use nodejs v10 LTS
      cache:
      paths:
      - node_modules/

      before_script:
      - npm install hexo-cli -g
      - npm install

      pages:
      script:
      - hexo generate
      artifacts:
      paths:
      - public
      only:
      - master

      EOF

      Step 5 - modify _config.yml to reflect correct URL and root.

  • If you dont update this, when you open the blog it wont have any styling and the links will be broken
  • the URL is found on your gitlab repo, in this case here https://gitlab.com/uu3/uu3.gitlab.io/pages

_config.yml==>

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://uu3.gitlab.io/
root: /

Step 6 : Push Your Website to GitLab

1
2
3
git add .
git commit -m "add .gitlab-ci.yml"
git push origin master
  • check the pipeline for errors (note the URL of the gitlab page can be found on the gitlab repo page under Settings/Pages)
  • NOTE** make sure the web page is visible to everyone:
    goto “Settings/General”/“Visibility, project features, permissions” on the gitlab project web page, and set “Pages” visibility to “Everyone”.
1
google-chrome-stable https://gitlab.com/uu3/uu3.gitlab.io/-/pipelines

Step 7 : Confirm the web site is hosted

1
google-chrome-stable https://uu3.gitlab.io/

back to Series…

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…

What version of markdown am I using?

What other markdown documentation is helpful?

Ref 1: Markdown Syntax…
Ref 2: Markdown Syntax…
Ref 3: ***Main Markdown documentation…

Can I Include html in markdown?

  • yep
    1
    <pre style='font-size: 75%'>This is fixed font text @75% size</pre>
    This is fixed font text @75% size

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

Image Assets

documentation…

  • NOTE** there are other ways to do this (see documentation above), but, this is my way ;)

  • assume the following directory structure and file locations

    the location of this markdown file (the one you’re reading right now)

    the location of the images rendered in this page

  • follow these steps to include an image in your markup

    • put your images in source/images/<markdown-filename> where "<markdown-filename>" is the same name as the post where the image will appear

      • in this example, the post is in the file source/_posts/artifacts/000_hexo-quickstart.md
        so we create the folder source/images/000_hexo-quickstart and copy images to that folder (here we copied f14.jpeg and ftdi.png), etc…

      • to use an image include this markdown in the page (note /blog is the root: blog setting in _config.yml)
        ![](/images/000_hexo-quickstart/ftdi.png)

      and another…
      ![](/images/000_hexo-quickstart/f14.jpeg)