Application Note #4 - Configure hexo-theme-next

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

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…