Adding a Sign-Up Link to Your Hexo Blog with NexT Theme

Posted on Edited on In Views: Disqus:

​

1 Introduction

1.1 Why need it?

Recently I just started a newsletter on Substack.

I intended to include a sign-up link at the bottom of my blog post to allow people to sign up.

However, I couldn't find a relevant resource for adding a sign-up link to a Hexo blog using the NexT theme, so I'll share my attempt.

1.2 How to do it?

This post will provide a two-step guide on:

  1. Finding your Substack newsletter signup link.
  2. Adding the sign-up link at the bottom of your blog post using Hexo and NexT theme.

2 Find newsletter signup link on substack

There is an official support page about How to embed a signup form for my publication

There are the steps of finding the codes to embed a signup form:

  1. Go to Setting and find your substack under the Publication section

    Untitled
    Untitled

  2. Go to the Setting under your substack page

    Untitled

  3. Go to the Import section, then you should get your signup link

    Untitled

After coming this far, I realized that the link was actually quite easy to find, even without going to the settings page. However, it's still a valuable learning experience to discover its location.

3 Add signup link to your post

The follwoing steps are only applicable to Hexo blog with NexT theme.

  1. Open the _config.yml under the theme folder

    • My path is Hexo/themes/next-reloaded/_config.yml

  2. Find the Post Settings header and follow_me part

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # ---------------------------------------------------------------
    # Post Settings
    # See: https://theme-next.org/docs/theme-settings/posts
    # ---------------------------------------------------------------

    # Subscribe through Telegram Channel, Twitter, etc.
    # Usage: `Key: permalink || icon` (Font Awesome)
    follow_me:
      #Twitter: https://twitter.com/username || fab fa-twitter
      #Telegram: https://t.me/channel_name || fab fa-telegram
      #WeChat: /images/wechat_channel.jpg || fab fa-weixin
      #RSS: /atom.xml || fa fa-rss

  3. Add a line about newsletter

    1
    2
    3
    4
    5
    6
    7
    8
    # Subscribe through Telegram Channel, Twitter, etc.
    # Usage: `Key: permalink || icon` (Font Awesome)
    follow_me:
      #Twitter: https://twitter.com/username || fab fa-twitter
      #Telegram: https://t.me/channel_name || fab fa-telegram
      #WeChat: /images/wechat_channel.jpg || fab fa-weixin
      #RSS: /atom.xml || fa fa-rss
      Newsletter: https://tehya.substack.com || fa fa-envelope-open-text

  4. You can see the result at the bottom of this post

At first, I was unfamiliar with terms like fa-rss, fa-twitter, and so on. My assumption was that they represented icons, so I attempted to add || fa fa-rss after my newsletter link, and it successfully appeared as an RSS icon.

After asking ChatGPT, it answered me like

The "fa fa-rss" part suggests that it might be related to Font Awesome, a popular icon font library.

Font Awesome provides a wide range of icons that can be easily incorporated into websites or applications. The "fa fa-rss" specifically refers to an icon representing an RSS feed. The "fa" prefix is used to indicate the Font Awesome library, and "fa-rss" refers to the specific RSS icon.

Sounds nice. Thank you, ChatGPT!

Therefore, I visited Font Awesome to find a more appealing icon for my newsletter. After selecting one, I copied its specific icon class name and pasted it after my newsletter link, following the steps outlined in step 3.

Untitled

4 Reference

http://whatbeg.com/2017/03/23/addemailsubscribe.html

https://support.substack.com/hc/en-us/articles/360041759232-Can-I-embed-a-signup-form-for-my-publication-