Build Hexo static blog tutorials using GitHub Pages

Written By Tomy Stark.

E-mail: [email protected]

Apex.linn. top/2019-09-28-…

Note: Please indicate the source link and author of this article

What is a Hexo

Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds.

What does it take to build a Hexo blog

  • Visual Studio Code (used as the Markdown editor, very convenient due to the built-in integration of terminals, a must!)
  • Node.js (The node.js version must be at least 8.6, and Node.js 10.0 or later is recommended)
  • Git (for deploying compiled Hexo static blog files to GitHub Pages)
  • GitHub account (please complete the account registration by yourself, the registration process will not be described in this article)

The detailed steps

1. Install necessary software

  • Visual Studio Code

    Install after downloading, no special need to pay attention to the place (installation directory can be manually specified)

    It is recommended to install the following extensions in VS Code after installation:

    • Chinese (Simplified) Language Pack for VS Code
    • changeEncode
    • GBKtoUTF8
    • markdownlint
    • Markdown All in One

  • Node.js

    Follow the default Settings to install Next (installation directory can be manually specified)

  • Git

    Note that in one step, VS Code is selected as the default Git editor and the other default (installation directory can be specified manually).

2. Create a GitHub account

  • Registration link:Register your GitHub account(Please complete account registration by yourself, the registration process will not be described in this article)

    Note: Please verify your email address after registration

3. Create a repository on GitHub

  • On the upper right corner of the page, log in to the account+Number, chooseNew repository

  • If you want your site to get through< your GitHub username >.github. IOFor domain access, your repository should be named< your GitHub username >.github. IO. For example, my user name isSummerFalls, then the warehouse name should beSummerFalls.github.io, see the following figure:

  • After the creation, the following page will appear:

4. Install Hexo

  • Open theVS Code, press theCtrl + `Open the internal integration terminal
  • To test firstNode.jsWhether can beVS CodeIs called by the terminal
    • inVS CodeEnter a command in the terminalnpm -v
      • If normal, the version number is displayed, for example6.9.0
      • If not, an error similar to the following is displayed:NPM: The "NPM" entry cannot be recognized as the name of a CMdlet, function, script file, or runnable program. Check the spelling of the name, and if paths are included, make sure the path is correct, then try again.At this point, please closeVS CodeAnd then set it toRun this program as an administratorAnd then run it againVS Code, as shown in the figure:

  • Locate the directory where you want to store the blog source folder. I’m using the root directory on drive C as an example

    cd C:\

  • Run the NPM command to install Hexo globally

    npm install hexo-cli -g

  • Initialize Hexo blog (this will create a name in the current directoryblog“)

    hexo init blog

  • Enter theblogfolder

    cd blog

  • throughblogIn the directorypackage.jsonFurther dependencies are installed, and one is generated laternode_modulesfolder

    npm install

  • Start the Hexo local server

    hexo s

  • After executing the command above, the terminal will return the following message:Press Ctrl + left mouse button to clickThe link opens

    INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

  • The displayed page shows that Hexo has been successfully installed

  • Go back toVS Code, switch to terminal, and pressCtrl + C, and then enterYTo stop the Hexo server

5. Configuration Hexo

  • VS CodePress the shortcut keyCtrl + K + OOpen your blog source folder, as shown below:

  • Open the _config.yml file in the left sidebar to modify it, as shown below. Please read the notes carefully:

    # Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site title: Tomy, Stark 's Blog # your Blog name the subtitle: all the vast # subheadings description: STM32, TI C2000, S32K # Zh-cn # language, ** related to the language displayed by the theme ** timezone: # time zones, The default empty # URL # # If your site is put in a subdirectory, set the URL as' http://yoursite.com/child 'and root as child/'/' URL: # 'https://SummerFalls.github.io' domain Settings, without their own domain name, the address should be https:// < making user name >. Making. IO for example my for: Root: https://SummerFalls.github.io/permalink: : year - : the month - : day - : title. The HTML # so permalink_defaults suggested change permanent link to: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: # Home page setting # path: Root path for your blogs index page. (default = '') # per_page: Posts displayed per page. (0 = disable pagination) # order_by: Posts order. (order by date descending by default) index_generator: path: '' per_page: 5 # -date # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in  ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable Pagination per_page: 10 page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: The theme to be used for landscape # Deployment ## Docs by default: https://hexo.io/docs/deployment.html # # link after the repository should be before you create the warehouse link, followed by the git suffixes, the following figure, Deploy: type: git repository: https://github.com/SummerFalls/SummerFalls.github.io.git branch: masterCopy the code

6. Install the required extensions for Hexo

  • Install the hot update support pack

    npm install hexo-browsersync –save

  • Install the Hexo Git support pack to support deployment of Hexo blogs to GitHub

    npm install hexo-deployer-git –save

  • Install sitemap generation support pack (root directory generates sitemap.xml for easy search engine crawls)

    npm install hexo-generator-sitemap –save

7. Deploy the Hexo blog to GitHub

  • Generate Hexo static blog page files

    hexo g

  • Deploy the Hexo blog to GitHub

    hexo d

    • Running this command for the first time will bring up the login box, please log in yourMaking accountAs shown in the figure:

  • Wait for a moment, after the terminal command is executed, the browser will open your blog webpage address, as shown in the picture:

    Note that the url: field in the _config.yml file is followed by the url: field (which is actually your GitHub Pages repository name). In this case, my address should be summerfalls.github

8. [optional]Set Hexo blog domain name resolution

I. Set domain name resolution

Before setting a customized domain name, purchase the domain name from the domain service provider

Here in Ali cloud to buy ten thousand network domain name as an example

  • Open and log in aliyun
  • Click on the console in the upper right corner of the page
  • findCloud analytical DNS, as shown in the figure:

  • Click the domain name you bought to enterResolution Settingspage
  • Click on theAdd recordsButton, setting as shown in the figure:
    • Record type: CNAME
    • Host record: APEX

      Here you can change the name to whatever you like

    • Parse line: default
    • Record value: summerfalls.github. IO

      Change the record value to your GitHub Pages repository name

    • TTL: 10 minutes

  • Click on thedetermineAfter that, the parsing is successful

II. The modifiedBlog rootUnder the_config.ymlfile

url: 'https://apex.linn.top'
Copy the code

III. UseVS Code 在 Blog rootUnder thesourceCreate a new directory without any suffixCNAMEfile

IV. The modifiedCNAMEFile, file content for your custom blog url

apex.linn.top
Copy the code

V. Rebuild and deploy the Hexo blog

  • hexo clean

  • hexo g

  • hexo d

  • You can then access the blog by customizing your domain name, as shown in the following figure:

9. [optional]Change the Hexo blog theme

The Icarus theme is recommended here

GitHub address: github.com/ppoffice/he…

The effect is as follows:

I. Replacement procedure

  • On the terminal, make sure you have the root directory of your blog, enter the following git command, press Enter, and wait for the installation to complete

    Git clone github.com/ppoffice/he… themes/icarus

  • Modify the _config.yml file in the root directory of the blog

    theme: icarus
Copy the code

  • Rebuild and deploy the Hexo blog after cleanup

    • hexo clean

    • hexo g

    • hexo d

  • After the deployment, refresh the blog page and find that the theme is changed successfully, as shown in the figure:

II. Modify the theme_config.ymlfile

In the root of the Icarus theme, go to the _config.yml file and modify it with VS Code

Note: The tip at the end of the article is also set in this file, and the address of payment code of Alipay and wechat needs to be specified. You can create an images folder under the source directory and store the payment code pictures in it. The method of referencing the pictures is as follows:

# Version of the Icarus theme that is currently used
version: 2.6.0
# Path or URL to the website's icon
favicon: /images/favicon.svg
# Additional HTML meta tags in an array.
meta: 
# Path or URL to RSS atom.xml
rss: 
# Path or URL to the website's logo to be shown on the left of the navigation bar or footer
logo: /images/logo.svg
# Open Graph metadata
# https://hexo.io/docs/helpers.html#open-graph
open_graph:
    # Facebook App ID
    fb_app_id: 
    # Facebook Admin ID
    fb_admins: 
    # Twitter ID
    twitter_id: 
    # Twitter site
    twitter_site: 
    # Google+ profile link
    google_plus: 
# Navigation bar link settings
navbar:
    # Navigation bar menu links
    menu:
        主页: /
        归档: /archives
        分类: /categories
        标签: /tags
        关于: /about
    # Navigation bar links to be shown on the right
    links:
        # GitHub:
        #     icon: fab fa-github
        #     url: 'https://github.com/SummerFalls'
# Footer section link settings
footer:
    # Links to be shown on the right of the footer section
    links:
        # Creative Commons:
        #     icon: fab fa-creative-commons
        #     url: 'https://creativecommons.org/'
        # Attribution 4.0 International:
        #     icon: fab fa-creative-commons-by
        #     url: 'https://creativecommons.org/licenses/by/4.0/'
        # Download on GitHub:
        #     icon: fab fa-github
        #     url: 'https://github.com/ppoffice/hexo-theme-icarus'
# Article display settings
article:
    # Code highlight settings
    highlight:
        # Code highlight themes
        # https://github.com/highlightjs/highlight.js/tree/master/src/styles
        # https://highlightjs.org/static/demo/
        theme: vs2015
        # Show code copying button
        clipboard: true
        # Default folding status of the code blocks. Can be "", "folded", "unfolded"
        fold: unfolded
    # Whether to show article thumbnail images
    thumbnail: true
    # Whether to show estimate article reading time
    readtime: true
# Search plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search
search:
    # Name of the search plugin
    type: insight
# Comment plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment
comment:
    # Name of the comment plugin
    type: 
# Donation entries
# https://ppoffice.github.io/hexo-theme-icarus/categories/Donation/
donate:
    -
        # Donation entry name
        type: alipay
        # Qrcode image URL
        qrcode: /images/Alipay.jpg
    -
        # Donation entry name
        type: wechat
        # Qrcode image URL
        qrcode: /images/Wechat.jpg
# Share plugin settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share
share:
    # Share plugin name
    type:
# Sidebar settings.
# Please be noted that a sidebar is only visible when it has at least one widget
sidebar:
    # left sidebar settings
    left:
        # Whether the left sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: true
    # right sidebar settings
    right:
        # Whether the right sidebar is sticky when page scrolls
        # https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/make-a-sidebar-sticky-when-page-scrolls/
        sticky: true
# Sidebar widget settings
# https://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/
widgets:
    -
        # Widget name
        type: profile
        # Where should the widget be placed, left or right
        position: left
        # Author name to be shown in the profile widget
        author: Tomy Stark
        # Title of the author to be shown in the profile widget
        author_title: 四海茫茫
        # Author's current location to be shown in the profile widget
        location: Earth, Solar System.
        # Path or URL to the avatar to be shown in the profile widget
        avatar: /images/avatar.jpg
        # Email address for the Gravatar to be shown in the profile widget
        gravatar:
        # Whether to show avatar image rounded or square
        avatar_rounded: true
        # Path or URL for the follow button
        follow_link: 'https://github.com/SummerFalls'
        # Links to be shown on the bottom of the profile widget
        social_links:
            Github:
                icon: fab fa-github
                url: 'https://github.com/SummerFalls'
            知乎:
                icon: fab fa-zhihu
                url: 'https://www.zhihu.com/people/TomyStark'
            微博:
                icon: fab fa-weibo
                url: 'https://weibo.com/tomystark'
    -
        # Widget name
        type: toc
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: links
        # Where should the widget be placed, left or right
        position: left
        # Links to be shown in the links widget
        links:
            博客 - 吴川斌: 'https://www.mr-wu.cn/'
            博客 - 芯跳不止: 'http://www.mazirong.com/'
            工作室 - Muse Lab: 'https://www.muselab-tech.com/'
            工作室 - 屋脊雀: 'http://www.wujique.com/'
    -
        # Widget name
        type: category
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: tagcloud
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: recent_posts
        # Where should the widget be placed, left or right
        position: left
    -
        # Widget name
        type: archive
        # Where should the widget be placed, left or right
        position: right
    -
        # Widget name
        type: tag
        # Where should the widget be placed, left or right
        position: right
# Other plugin settings
plugins:
    # Enable page animations
    animejs: true
    # Enable the lightGallery and Justified Gallery plugins
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/gallery-plugin/
    gallery: true
    # Enable the Outdated Browser plugin
    # http://outdatedbrowser.com/
    outdated-browser: false
    # Enable the MathJax plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/mathjax-plugin/
    mathjax: true
    # Show the back to top button on mobile devices
    back-to-top: true
    # Google Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Google-Analytics
    google-analytics:
        # Google Analytics tracking id
        tracking_id: 
    # Baidu Analytics plugin settings
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Baidu-Analytics
    baidu-analytics:
        # Baidu Analytics tracking id
        tracking_id: 
    # Hotjar user feedback plugin
    # https://ppoffice.github.io/hexo-theme-icarus/Plugins/General/site-analytics-plugin/#Hotjar
    hotjar:
        # Hotjar site id
        site_id: 
    # Show a loading progress bar at top of the page
    progressbar: true
    # BuSuanZi site/page view counter
    # https://busuanzi.ibruce.info
    busuanzi: true
# CDN provider settings
# https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/
providers:
    # Name or URL of the JavaScript and/or stylesheet CDN provider
    cdn: jsdelivr
    # Name or URL of the webfont CDN provider
    fontcdn: google
    # Name or URL of the webfont Icon CDN provider
    iconcdn: fontawesome
Copy the code
  • Rebuild and deploy the Hexo blog after cleanup

    • hexo clean

    • hexo g

    • hexo d

III. Add a customized 404 Not Found page

  • Run the following command on the terminal to create a 404 page

    hexo new page “404”

  • Edit the index.md file in the \source\404\ directory with VS Code

    • The image after the field “thumbnail: “should be stored in the corresponding directory and changed to the corresponding name. The suffix name is case-sensitive

    • The content of the file is as follows (more content can be customized)

      -- Title: 404 Not Found Thumbnail: /images/ img_6274.jpg Toc: false permalink /404 --- <div style = "text-align: center; margin: auto; width: 100%;" > ## ** Sorry, the address you visited does not exist. ** </div>Copy the code

  • Rebuild and deploy the Hexo blog after cleanup

    • hexo clean

    • hexo g

    • hexo d

  • After the deployment is complete, visit the blog again and follow up with the non-existent article after the address, it will automatically jump to the newly customized 404 page, as shown in the figure:

IV. Add about pages

  • Execute the following command on the terminal to create an About page

    hexo new page “about”

  • Edit the index.md file in the \source\about\ directory with VS Code

    • The image after the field “thumbnail: “should be stored in the corresponding directory and changed to the corresponding name. The suffix name is case-sensitive

    • The content of the file is as follows (more content can be customized)

      -- Title: Thumbnail About Me Date: 2019-09-19 15:59:10 /images/ car.jpg --- - < I class=" Fab fa-fort-awesome- Alt "></ I > Occupation: Copy and Paste Engineer - < I class="fas FA-at "></ I > email: [email protected] - <i class="fab fa-qq"></i> QQ: 123456789 - <i class="fab fa-weixin"></i> WeChat: XXXXXX - < I class="fab FA-playstation "></ I > PSN ID: XXXXXX - Scorpio - language: C/C++/Java/HTML/CSS - IDE: [VS Code](https://code.visualstudio.com/), [Vivado Design Suite HLx](https://china.xilinx.com/products/design-tools/vivado.html) - EDA: [Altium Designer] (https://www.altium.com.cn/), [EasyEDA] (https://lceda.cn/) - interest: open source hardware and open source software, HiFi, cuisine, music - the game platform: < I class=" Fab FA-playstation "></ I > Play Station 4, Nintendo Switch - Sports: Swimming, cycling - Learning: Altium Designer, TouchGFXCopy the code

  • Rebuild and deploy the Hexo blog after cleanup

    • hexo clean

    • hexo g

    • hexo d

  • Visit the blog again after deployment, and the page can be accessed normally, as shown in the following figure:

V. IcarusMinor subject modification

  • Footer height is too high

    Edit the style.styl file in the theme directory with VS Code

    Path: / themes/icarus \ \ source \ CSS style. Styl

    Add a line of attributes to the.footer class in the file, as follows:

    padding-bottom: 3rem
Copy the code

    The.footer class with the attributes added looks like this:

    .footer
    background: white
    padding-bottom: 3rem
    .field
        .button
            background: transparent
Copy the code

10. Hexo template

\ Scaffolds files are draft templates, page templates, and article templates. Modify the contents of these files to automatically add part of the template content to each new article or page.

  • page.md

    ---
title: {{ title }}
date: {{ date }}
thumbnail: /images/flower.jpg
toc: false
---

Copy the code

  • post.md

    --- title: {{ title }} date: {{ date }} thumbnail: /images/flower.jpg toc: true categories: - uncategorized tags: --- <! --more--> <div style = "text-align: center; margin: auto; width: 100%;" >! [Car](.. /images/Car.jpg) </div>Copy the code

11. Writing an article

Note: For post images, if you haven’t already created an images folder, you can create a new images folder under the Source directory to store image files.

Here’s an example of creating an article with the title Hello Hexo:

  • Execute the following command on the terminal to create an article

    hexo new “Hello Hexo”

  • Edit hello-hexo. md file in \source\_posts with VS Code

    • The image after the field “thumbnail: “should be stored in the corresponding directory and changed to the corresponding name. The suffix name is case-sensitive

    • The file content is as follows:

      --- title: Hello-Hexo date: 2019-09-19 15:59:10 thumbnail: /images/flower.jpg toc: true categories: - Blog - Hexo tags: -hexo -- ## < I class="fab fa-fort-awesome- Alt "></ I > <! -- More --> Here are the hidden contents in the homepage... <div style = "text-align: center; margin: auto; width: 100%;" >! [Car](.. /images/Car.jpg) </div>Copy the code

  • Rebuild and deploy the Hexo blog after cleanup

    • hexo clean

    • hexo g

    • hexo d

  • After deployment, visit the blog again and the newly published article appears on the main page, as shown below:

12. All steps are now complete