Reprint and quotation

Hexo theme configuration a hexo theme configuration two hexo theme configuration four hexo theme configuration five hexo blog submission Baidu and Google included hexo personal blog included Google’s detailed process (figure) hexo NexT magic change series three ─ comments Utterances Hexo Next integrates utterances Hexo into Coding Pages and Github Pages and implements site-wide HPPTS

Install the Next theme

  1. Clone the theme file on Git
git clone https://github.com/iissnan/hexo-theme-next themes/next
Copy the code
  1. Locate the following sections in the configuration file _config.yml in the site directory and modify them.
theme: next  # Select the blog theme and name it as the theme folder name selected in Themes
Copy the code

Once the theme is downloaded, switching the theme in Hexo can be done by changing the theme property in the site configuration file.

  1. There are four styles available in the Next theme. Choose which one you like. Go to themes-> next ->_config.yml and select the theme style by removing the #.

    # Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
Copy the code

    3.1 Resolve menu style center when Mist theme style is selected

    • In themes/next/source/ CSS /_schemes/Mist/_menu.styl add the text-align attribute
     .menu {
   text-align:right;
   margin: 0;
Copy the code

  2. Hexo common command

 hexo n "Blog name"  => hexo new "Blog name"   # These two are to create a new article, the former is the shorthand mode
$ hexo p  => hexo publish
$ hexo g  => hexo generate  # generated
$ hexo s  => hexo server  Start service preview
$ hexo d  => hexo deploy  # deployment

$ hexo server   #Hexo monitors file changes and updates automatically without restarting the server.
$ hexo server -s   Static mode
$ hexo server -p 5000   # change port$hexo server -i 192.168.1.1# Customize IP
$ hexo clean   Clear the cache. You can ignore this command under normal circumstances
Copy the code

Buy a domain name

  1. In Ali cloud, Tencent cloud these sites to buy domain names (need real name authentication), or buy.me,.io these domain names (rich rich people can try, do not know whether to access these domain names need to turn the wall).

  2. Create the file CNAME under the source directory of the site directory and write your domain name (for example, mine)

    frontwhite.xyz
Copy the code

The menu Settings

The menu Settings

Used to set the display of the navigation bar above the blog, modified in the theme configuration file _config.yml.

menu:
  home: / || home  # page
  # # about: / about / | | user about it
  tags: /tags/ || tags  # label
  categories: /categories/ || th  # classification
  # # archives: / archives / | | archive file
  # # the schedule: / schedule / | | calendar calendar
  # a sitemap: / sitemap XML | | sitemap # site map
  commonweal: /404/ || heartbeat   # 404 page
Copy the code

However, removing # from the Menu option does not make the TAB page and category page effective, so we need to create them manually.

Create tabs, categorize pages

Open the command line and go to the blog folder. Run the following command to create labels and categories. Hexo New Page Tags Hexo New Page Categories Also generates a tags folder containing an index.md file under the /source directory.

| | | | | | | | | | | | | | | | | | | | "Tags" - ` ` ` + modify the generated source/tags/categories. The md file, plus the type: "categories" ` ` ` - title: the classification of the date: 2019-12-18 19:45:11 type: "categories" --- ```Copy the code

Article labels and categories

In the header of the article, add the following code, you can see the number of tags and tags in the TAB page, classification is the same

Categories: Categoriestest
---
Copy the code

The tags and categories are used to label and categorize articles. The difference between the two is that categories are hierarchical. As mentioned above, Next is a subclass of Hexo, and Hexo does not support specifying multiple sibling categories.

ICONS and contents

menu_settings:
  icons: true  Whether to display the ICONS of each page
  badges: false  Whether to display the contents of category/label/archive pages
Copy the code

404 Page creation

  • Create a 404 page using commands in the site directory.
hexo new page 404
Copy the code
  • In the site directory source/404/index.md, add the following code and change the value of homePageUrl to your blog address. In this way, Tencent charity 404 was a success.
<! DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow"/>
    <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
  </head>
  <body>
    <script type="text/plain" src="http://www.qq.com/404/search_children.js"
            charset="utf-8" homePageUrl="https://frontwhite.xyz"
            homePageName="Back to my home page.">
    </script>
    <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
    <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
  </body>
  </html>
Copy the code
  • You can change the name of the menu bar in themes/next/languages/ zh-cn.yml
Menu home archives categories tags about search schedule sitemap Commonweal 404# Make it public
Copy the code

Theme Settings

All Settings are in the Themes/Next file.

Set head

  • Find your favorite images and place them in the next/source/images/ folder. In the _config.yml file, find the following configuration and configure it yourself.
# Sidebar Avatar
avatar: 
  url:  /images/avatat.jpg   # local address of avatar
  rounded: true   # if the avatar is set to a circle
  rotated: true   # Whether to generate mouse moving avatar, there is rotation animation
Copy the code

Setting website ICONS

  • Site icon library: EasyIcon, Icon

  • Download the size of 16 x16 and 32 x32 PNG format ICONS, placed in the/themes/next/source/images /

  • Open Themes/Next/under _config.yml and look for favicon to replace small and medium ICONS

favicon:
small: /images/favicon.png  
medium: /images/favicon.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
Copy the code

View the progress bar

  • Find back2top in the _config.yml file, change scrollPercent to true,
  back2top:
  enable: true  # Enable Click back to the top button
  sidebar: true  # If displayed in the sidebar click back to the top button
  scrollpercent: true  # Whether the back top button shows the scroll percentage
Copy the code

The home page article does not display the full text display summary

  • Use for manual truncation,

  • Or add description in the header: a description of the article

  • To automatically form a summary, add:

    auto_excerpt:
  enable: true
  length: 150
Copy the code

    The default interception length is 150 characters, which can be customized as required

    
scroll_to_more: true  # Click to read the full text and skip to <! --more--> tag, when set to false click to read the full text to read from the beginning

save_scroll: false # Automatically save every post or page where it was last scrolling

excerpt_description: true # Automatically provide a summary description of the article on the home page as the introduction text

Copy the code

Set the font and font size

  • Find it in the _config.yml file and change famil and size, or find your own font mirror library and change the host link
font:  
  enable: true  # Enable Settings
  host:   # Default Google font library
  global: # global Settings
    external: trueFamily: Microsoft YaheiSet the font style
    size: 1  # set font size to 1 (16px)
Copy the code

Follow-Github in the top right

  • If you want people to quickly link to your Github when they’re watching your blog, set the Github_banner(black and white) as follows:
github_banner:
  enable: true  # open
  permalink: https://github.com/whitedesignd # Your GitHub address
  title: Follow me on GitHub
Copy the code

  • If you think the black and white icon is not a good look, use a GitHub Ribbons or GitHub Corners. Go to the site and copy the code. (I chose the blue one.)

    (1) Under themes/next/layout/_layout.swig, add the code under the end.

    window.addEventListener('DOMContentLoaded', () = > {let icon = document.querySelector(".github-corner");
  icon.innerHTML  = `<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; aria-hidden="true"> M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"> M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0, 136.5C139.8,137.7 141.6,141.9 141.8, 141.8z" fill="currentColor" class="octo-body">  `; },false);Copy the code

Page read statistics

busuanzi_count:      # Page read statistics
  enable: true    # Set true to enable
  total_visitors: true     # Total number of readers UV number
  total_visitors_icon: user  # Icon for total number of people to read
  total_views: true  # Pv number of total read times
  total_views_icon: eye  # Total number of views icon
  post_views: true # Turn on the number of times the content is read
  post_views_icon: eye # icon for page views of content
Copy the code

Code style Settings

codeblock:
  highlight_theme: normal  # style theme normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  copy_button:  # copy button
    enable: true  # open
    show_result: true  Copy success message
    style: mac  Style # code box default | flat | MAC

Copy the code

Read the progress bar at the top

reading_progress:
  # Available values: top | bottom
  position: top
  color: "#0a74daa1"
  height: 3px

Copy the code

Static resource compression

Hexo’s auto-generated HTML has a lot of white space that can affect loading speed, so it’s best to compress it. Use hexo-neat or install gulp to compress.

Hexo – neat compression

Install hexo – neat

```
npm install hexo-neat --save-dev
```
Copy the code
At the end of _config.yml in the site directory, add configuration information.
    # hexo-neat
    # Blog compression
    neat_enable: true
    # compressed HTML
    neat_html:
      enable: true
      exclude:  # Excluded files
      
    # Compress CSS skip min.css
    neat_css:
      enable: true
      exclude:
        - '**/*.min.css'
        
    # compression js skips min.js
    neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
        - '**/*.min.js'
        - '**/jquery.fancybox.pack.js'
        - '**/index.js'  
        - '**/love.js'
    # End of compressed blog configuration
  Note the path above **/*, you need to configure the correct path. Otherwise, the generated page is blank, of course, you can also delete, all compressed.
Copy the code

Gulp compression

Install gulp
npm install gulp -g
Copy the code
CD to the root directory of the blog (that is, the site directory) to install the dependencies for compressed static files
npm i gulp gulp-htmlclean gulp-htmlmin gulp-imagemin gulp-minify-css gulp-uglify --save
Copy the code
Create gulpfile.js in the blog root directory
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin'); // Compress HTML gulp.task('minify-html'.function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))}); // Compress CSS gulp.task('minify-css'.function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public')); }); // Compress js gulp.task('minify-js'.function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public')); }); Gulp.task ('minify-images'.function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}),
        imagemin.jpegtran({'progressive': true}),
        imagemin.optipng({'optimizationLevel': 7}),
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))}); // default task //gulp 3'default', gulp.parallel(
    'minify-html'.'minify-css'.'minify-js'.'minify-images'
));
//gulp 4
gulp.task('default',gulp.series(gulp.parallel('minify-css'.'minify-js'.'minify-html' ,'images'NPM I gulp-cli -g (gulp-cli -gCopy the code

Note: Gulp-babel can only convert some of ES6’s new features, such as arrow functions, to import. If you want to compress the code containing import features, you need to use tools such as Webpack or Browserify I didn’t study it because I didn’t need it

compression
Hexo clean hexo g gulp hexo d // Or hexo cl && hexo g && gulp && hexo DCopy the code

Click on the image to enlarge

Find FancyBox at next/_config.yml

  fancybox: true
Copy the code

Hexo blog submitted to Baidu and Google for inclusion

Site map

A sitemap, or sitemap, is a page that places links to all the pages on your site that need to be crawled by search engines. Sitemap can tell search engines what pages are available to crawl, so search engines can crawl more intelligently.

  • Generating a site map

    • Install baidu and Google sitemap generation plug-in:
    npm install hexo-generator-baidu-sitemap --save
npm install hexo-generator-sitemap --save
Copy the code

  • Modifying a Configuration File

    Modify the site configuration file _config.yml and add the following:

    Generate sitemap automatically
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
Copy the code

    XML file (submitted to Google) and baidusItemap. XML file (submitted to Baidu). These are the generated sitemaps. It contains links to all the pages on the site, which search engines use to crawl pages.

    • Add robots. TXT

      Robots.txt is an ASCII encoded text file stored in the root directory of the website. Its function is to tell the search engine which content in this website can be climbed, and which is forbidden to climb. Add the rerobot. TXT file to the source directory. After the site is generated, it is stored in the root directory of the site /public/.

      User-agent: * Allow: / Allow: /archives/ Allow: /categories/ Allow: /tags/ Disallow: /vendors/ Disallow: /js/ Disallow: / CSS/Disallow: /fonts/ Disallow: /vendors/ Disallow: /fancybox/ Sitemap: https://your domain name /sitemap.xml Sitemap: https:// Your domain name/baidusItemap.xmlCopy the code

  • Google webmaster and Baidu webmaster

    About how to log in to Google. I won’t talk about it here. I’m sure you have a solution.

    • Add site

      • Log in to the Google webmaster, enter the Search Console, select the url, fill in the url, download the verified HTML file, place it in scoure under the site directory, pack and upload it for verification.

      I can access the downloaded files, but the verification is not successful. Therefore, I use a trick method, Upload the verification file in the Upload files of my Github Pages repository, and then I can pass.

      • Once verified, go to the sitemap, submit sitemap.xml, and wait for validation.

      • You can view your blog by typing site in your browser address

        site:https://frontwhite.xyz
Copy the code
      • Baidu webmaster also is same practice. Just do not have sitemap, in the link submission page, choose automatic submission sitemap submission, add your own baidu site url
        https://frontwhite.xyz/baidusitemap.xml
Copy the code
      • Github blog, Baidu can not be included. The source code of the blog is hosted on Coding Net, which is searched by domain name targeting (no registration is required). When baidu spiders crawl, the source code is resolved to Coding Pages. Make your own Google tutorials.

  • Bing indexing is as easy as Google indexing. Sign up first. There are two ways to be included in Bing, one using Google’s New Google Search Console. The second is to add their own URL can also directly import your URL.

CodingThe deployment of blog

Github’s blog in China is a bit slow to visit, plus baidu webmaster does not include (Github banned Baidu’s crawling), so adopt the way of dual-line deployment.

  • Coding official website registration login, has been acquired by Tencent. So login will go to Tencent Cloud developer platform, click create project.

  • Add SSH, the same step as github. The generated public key can be viewed in C:\ user \ username. SSH.

C:\ user \ username \. SSH > cat id_rsa.pubCopy the code

Add an SSH public key to the coding profile.

  • Create a project SanbaiBlog with a recommended name that matches your username. You will be able to access your blog directly through username.coding. me, or username.coding. me/project_name if the project name does not match the user name.

  • In the SanbaiBlog project, select a static site to build and deploy (requires real name authentication).

  • Add domain name resolution to your own domain name, where the record value is the website address generated on coding. Mine is wy07dq.coding-pages.com. Github. IO and github will have to be resolved offshore.

  • In the Settings, replace the domain name with your own domain name, but the certificate status is failed. You need to pause the two records parsed to github. IO and apply for a certificate.

  • Change _config.yml in the site directory, repo using HTTPS or SSH.
deploy:
  type: git
  repo: 
    github: https://github.com/whitedesignd/whitedesignd.github.io
    coding: https://e.coding.net/frontwhite/SanbaiBlog.git
  branch: master
Copy the code
  • Submit the code and you can see the updated code on Github and Coding.

Review system

The NexT theme itself integrates five commenting plugins: Disqus, Chatterbox, Valine, LiveRe, and Gitalk. For github Pages blogs like mine, there are only a few convenient comment features.

  • The Disqus commenting system, which is used by many blogs and even some other sites, is powerful, beautiful, and supports anonymous comments. But Disqus needs a wall comment.

While several workarounds use Disqus comments, such as Disqus-Proxy, DisqusJS(integrated in Next 7), and the Disqus PHP API, they all require a separate server to de-proxy, My blog was hosted on Github and there was no extra server to use, so I had to give up.

  • Archtalk installation requires a record number. It doesn’t work very well. Worst of all, it requires a phone number to verify, which blocks most commenters.

  • Valine, this is a Chinese review system, based on Leancloud review system, you need to configure a Leancloud account. The way of presentation is quite good, but there are also problems, one is that there is no comment push, the second is that the follow-up can not better communication.

  • LiveRe, a South Korean commenting system, looks good and supports multi-account logins, but is a bit slow to load in China.

  • Gitment and Gitalk have seen a lot of gurus introducing this, but some gurus said that it is a geek idea to use Github’s issue system as a comment system, but when users try to log in to comment, the permissions required are too much, so I gave up.

Big bro’s concern: Gitment can read and write all the public repO (Repository). Does that mean I can delete all my repOs…

addutterancesReview system

  • It is also an issue system based on Github, but because it is built on Github App, the granularity of permission control is finer and the required permissions are much less. It is limited to reading and writing issues and comments of a specific warehouse and can only have the permission to read and write issues. You don’t need access to read and write code.

  • And you can install it only in the repO you need.

  • In addition, you only need to authorize Utterances once, and all other sites that use Utterances do not need additional authorization to comment directly.

    2.1 Utterances Comments on system installation

    1. Creating a New Github repository must be a public place to put comments. Not private, so our readers can view and comment on it.

    2. Go to Github APP to Install utterances. Click Install.

    3. Select Only Select Repositories, select the repository you just created.

    4. Open utteranc.es/ and at the bottom of the site there is the javascript needed to generate it. You can also update your own info insert code based on the code below, just change the repo in the code below to your own Github username/the name of the repository you just created, and insert the code where you want to display the comment!

      <script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"// repo to your Github username/the name of the repository you just created issue-term="pathname"// Name the issue format, default pathName theme="github-light"// Theme, github-light or github-dark crossorigin="anonymous"// async> </script>Copy the code
    5. Add the following code under layout/_partials/comments.swig % -if page.comments %  ``` <div class="comments"> <script src="https://utteranc.es/client.js" repo="whitedesignd/hexo--comment" issue-term="title" label="utterances" theme="github-light" crossorigin="anonymous" async> </script> </div> ``` 6. Once authorized, comments can be made. < p style = "max-width: 100%; clear: both; min-width: 1emCopy the code