Hexo blog building + theme optimization + plug-in configuration + common operations + error analysis

If you are as white as I am, congratulations!

After reading this article, you can have a blog like this too!

preface

1. Welcome to leave a message at the end of the article, or click to join the QQ group 933583982 to communicate with each other.
2. This article is licensed under CC BY-NC-SA 4.0.
3. “Last update” link: www.simon96.online/2018/10/12/…

Blog set up

Prepare the environment

1. Download node.js and install it. Detailed steps: www.simon96.online/2018/11/10/…

2. Git download and install. Detailed steps: www.simon96.online/2018/11/10/…

3. To install Hexo, run the following command on the command line (i.e., Git Bash) :

   npm install -g hexo-cli

4. To initialize Hexo, run the following commands from the command line (i.e., Git Bash) :

   The following is the site directory where the Hexo initialization file is stored.

   $ hexo init <folder>
   $ cd <folder>
   $ npm install
   Copy the code

   These files and folders will be generated under the new path:

   . ├ ─ ─ _config. Yml ├ ─ ─ package. The json ├ ─ ─ scaffolds ├ ─ ─source| ├ ─ ─ _drafts | └ ─ ─ _posts └ ─ ─ themesCopy the code

   Note:

   • The hexo-related commands are all run in the site directory using Git Bash.

   • Site configuration file: _config.yml in the site directory.

     Path for < folder > \ _config yml

   • Theme configuration file: _config.yml in the Themes folder under the site directory.

     Path is
     
     \themes\< theme folder>\ _config.yml
     

5. Start the server. Enter the following command from the command line (i.e. Git Bash) in the directory and run it:

   hexo server

6. The web address for browser access is http://localhost:4000/

At this point, your Hexo blog is set up locally.

Implementation plan

Solution 1: GithubPages

1. Create a Github account

2. Create a repository named <Github account name >.github. IO

3. Push the local Hexo blog to GithubPages

   3.1. Install the hexo-deployer-Git plug-in. Run the following command from the command line (i.e. Git Bash) :

   $ npm install hexo-deployer-git --save
   Copy the code

   3.2. Add an SSH Key.

   • Create an SSH key. Enter the following command on the command line (i.e. Git Bash) and press enter three times:

     $ ssh-keygen -t rsa -C "Email address"
     Copy the code

   • Add to Github. Copy the contents of the Key file (for example, C:\Users\Administrator\.ssh\id_rsa.pub) and paste it into the New SSH Key.

   • Check whether the configuration is added successfully. Enter the following commands on the command line (Git Bash) to return “You’ve successfully authenticated” :

     $ ssh -T [email protected]
     $ yes
     Copy the code

   3.3. Modify _config.yml (in the site directory). At the end of the file:

   # Deployment
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
     type: git repo: [email protected]:<Github account name >/<Github account name >.github.ioCopy the code

   Note: The above warehouse address is written as SSH address, not HTTP address.

   3.4. Push to GithubPages. On the command line (Git Bash), run the following commands in sequence to return INFO Deploy done: Git the push is successful:

   $ hexo g
   $ hexo d
   Copy the code

4. After about one minute, access the url https://github account name >.github

At this point, your Hexo blog is set up on GithubPages at https://

.github. IO.

Solution 2: GithubPages + domain name

Add a custom domain name (the domain name you purchased) based on scenario 1.

1. Domain name resolution.

   Set the type to CNAME.

   Host record is the prefix of the domain name, enter WWW;

   Enter the record value as the user-defined domain name.

   Parse the line, TTL default.

2. Warehouse Settings.

   2.1. Open the blog repository Settings: https://github.com/
   
   /
   
   .github
   

   2.2. Under Custom Domain, enter a Custom domain name and click Save.

   2.3. In the source folder of the site directory, create and open cname. TXT, write your domain name (such as www.simon96.online), save and rename it CNAME.

3. Wait about 10 minutes.

   Browser access custom domain name.

   At this point, your Hexo blog has resolved to the custom domain name, and https://
   
   .github. IO is still available.
   

Solution 3: GithubPages + CodingPages + domain name

GithubPages is slower in China and not included by Baidu, while CodingPages is faster abroad. Therefore, on the basis of plan 2, add CodingPages.

1. Create a Coding account

2. Create a repository named <Coding account name >

3. Enter the “Code” page in the project, click “one click to open static Pages”, wait for a moment, CodingPages can be deployed successfully.

4. Push the local Hexo blog to CodingPages

   4.1. The public key was already generated when GithubPages was created. You can directly copy the contents of the key file (for example, C:\Users\Administrator\.ssh\id_rsa.pub) and paste it into the new public key.

   4.2. Test whether the configuration is added successfully. Enter the following commands on the command line (Git Bash) to return “You’ve successfully authenticated” :

   $ ssh -T [email protected]
   $ yes
   Copy the code

   4.3. Modify _config.yml (in the path where the Hexo initialization file is stored). At the end of the file:

   # Deployment
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
   - type: git repo: [email protected]:<Github account name >/<Github account name >.github.iotype: git repo: [email protected]:<Coding account name >/<Coding account name >Copy the code

   4.4. Push to GithubPages. On the command line (Git Bash), run the following commands in sequence to return INFO Deploy done: Git the push is successful:

   $ hexo g
   $ hexo d
   Copy the code

5. Domain name resolution

   1. Add CNAME record pointing to <Coding account name >.coding.me

      Set the type to CNAME.

      Host record is the prefix of the domain name, enter WWW;

      Enter the record value as the user-defined domain name.

      Parse the line, TTL default.

   2. Add two A records pointing to 192.30.252.153 and 192.30.252.154

      Select A as the type.

      Host record is the prefix of the domain name. Enter @.

      The record values are 192.30.252.153 and 192.30.252.154.

      Parse lines, foreign or Google.

   3. In the “Pages” service Settings page (https://dev.tencent.com/u/ < Coding account name > / p < > Coding account name/git/Pages/Settings) in binding custom domain name.

At this point, your Hexo blog has resolved to the custom domain name, with https://

.github. IO and https://

.code.me still available.

Solution 4: Cloud server + domain name

This solution requires the purchase of cloud servers and domain names.

1. Install Git and Nginx on a cloud server. (Git for versioning and deployment, Nginx for static blog hosting.)

   Log in as user root and run:

   $ yum -y update
   $ yum install -y git nginx
   Copy the code

2. Nginx configuration

   2.1. Create file directory (for storing files of blog site)

   cd /usr/local/
   mkdir hexo
   chmod 775 -R /usr/local/hexo/
   Copy the code

   2.2. Add index. HTML (used to check whether Nginx was successfully configured)

   vim /usr/local/hexo/index.html
   Copy the code

   Add the following code and save.

   
           
   <html>
     <head>
       <title></title>
       <meta charset="UTF-8">
     </head>
     <body>
       <p>Nginx running</p>
     </body>
   </html>
   Copy the code

   2.3. Configure the Nginx server

   vim /etc/nginx/nginx.conf
   Copy the code

   Change server_name and root:

   server {
         listen       80 default_server;
         listen       [::]:80 default_server;
         server_name  www.baidu.com; # Fill in your domain name
         root         /usr/local/hexo/;
     }      
   Copy the code

   2.4. Start the Nginx service.

   service nginx start
   Copy the code

   2.5. If the cloud server browser accesses the personal domain name or IP address, skip to index.html, the configuration is complete; otherwise, check the previous configuration.

3. Git configuration

   3.1. Create a file directory for setting up a private Git repository, and change the read and write permission of the directory.

   cd /usr/local/
   mkdir hexoRepo
   chmod 775 -R /usr/local/hexoRepo/
   Copy the code

   3.2. Git initializes the bare library.

   cd hexoRepo/
   git init --bare hexo.git
   Copy the code

   Create Git hooks.

   vim /usr/local/hexoRepo/hexo.git/hooks/post-receive
   Copy the code

   3.4. Enter the following information to specify the Git source code and Git configuration file.

   #! /bin/bash
   git --work-tree=/usr/local/hexo --git-dir=/usr/local/hexoRepo/hexo.git checkout -f
   Copy the code

   3.5. After saving and exiting the file, add executable permission to the file.

   chmod +x /usr/local/hexoRepo/hexo.git/hooks/post-receive
   Copy the code

4. Local blogs are pushed to the cloud server

   4.1. Install the Hexo-deployer-Git plug-in. Run the following command from the command line (i.e. Git Bash) :

   $ npm install hexo-deployer-git --save
   Copy the code

   4.2. Adding an SSH Key.

   • Create an SSH key. Enter the following command on the command line (i.e. Git Bash) and press enter three times:

     $ ssh-keygen -t rsa -C "Email address"
     Copy the code

   • Add to Github. Copy the contents of the Key file (for example, C:\Users\Administrator\.ssh\id_rsa.pub) and paste it into the New SSH Key.

   • Check whether the configuration is added successfully. Enter the following commands on the command line (Git Bash) to return “You’ve successfully authenticated” :

     $ ssh -T [email protected]
     $ yes
     Copy the code

   4.3. Modify _config.yml (in the site directory). At the end of the file:

   # Deployment
   ## Docs: https://hexo.io/docs/deployment.html
   deploy:
     type: git
     repo: [email protected]:/usr/local/hexoRepo/hexo // User name@Domain name or IP address :/usr/local/hexoRepo/hexo
     branch: master
   Copy the code

   Note: The above warehouse address is written as SSH address, not HTTP address.

   4.4. Push to GithubPages. On the command line (Git Bash), run the following commands in sequence to return INFO Deploy done: Git the push is successful:

   $ hexo g
   $ hexo d
   Copy the code

5. Wait about 1 minute before the browser accesses the personal domain name.

   At this point, your Hexo blog is set up on a cloud server with a personal domain name.

Subject to optimize

Choose a topic

The default theme for Hexo is landscape, and the following themes are recommended:

1. snippet
2. Hiero
3. JSimple
4. BlueLake

Application of theme

1. Download the theme
2. Paste the downloaded theme folder into the site directorythemesUnder.
3. Change the site configuration file_config.ymlThe theme field for the theme folder name:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/Theme: < the name of the theme folder >Copy the code

Subject to optimize

Detailed documentation is available for the above topics. This section mainly addresses common issues related to topic optimization.

Theme optimization generally includes:

• Set “RSS”

• The Tags page is added

• The Category page is added

• Set “Font”

  Problem: Slow to reference foreign font images.

  Solution: you can use domestic. Change fonts.google.com to fonts.lug.ustc.edu.cn in \themes\*\layout_partials\head external-fonts. Swig.

• Set the Code Highlighting theme

• Sidebar social links

  Question: Where can I find the icon?

  Solution: Font Awesome

• Enable the tipping function

  Problem: Wechat Alipay QR code is not beautiful, different specifications.

  Solution: Generate qr code online

• Set up a link

• Tencent Philanthropy 404 page

• Site establishment time

• Subscribe to wechat official account

• Set “Animation”

  Problem: Slow, wait until the JavaScript script has fully loaded before displaying the content. Solution: Turn off animation by setting the use_motion field value to false in the theme configuration file _config.yml.

• Set “Background Animation”

Theme optimization also includes:

Add background

Add the following code in themes/*/source/ CSS /_custom/custom.styl:

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}
Copy the code

Modifying the Logo Font

Add the following code in themes/*/source/ CSS /_custom/custom.styl:

@font-face { font-family: Zitiming; src: url('/fonts/Zitiming.ttf'); } .site-title { font-size: 40px ! important; font-family: 'Zitiming' ! important; }Copy the code

The font file is in the themes/next/source/fonts directory, there is a.gitkeep hidden file, open and write the font file you want to keep, like mine is Zitiming. TTF, the specific font library can be downloaded from the Internet.

Changes the width of the content area

Edit the source/ CSS /_variables/custom.styl file for the theme and add the following variables:

$content-desktop = 700px; $content-desktop = 900px when the window exceeds 1600pxCopy the code

Site title bar background color

.site-meta { background: $blue; // Change to your favorite color}Copy the code

Custom mouse styles

Open the themes/*/source/ CSS /_custom/custom.styl and write the following code inside:

Style * {/ / mouse cursor: url (" http://om8u46rmb.bkt.clouddn.com/sword2.ico "), auto! important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto! important }Copy the code

Article encrypted access

Open the themes/*/layout/_partials/head.swig file and insert the code before {% endif %} under {% if theme. Pace %} tag:

< script > (function () {if (' {{page. The password}} ') {if (prompt (" please enter the password). == '{{page. Password}}'){alert(' password error '); history.back(); }}}) (); </script>Copy the code

Add password: * :

---
title: 2018
date: 2018-10-25 16:10:03
password: 123456
---
Copy the code

Click to achieve the heart effect

1. in/themes/*/source/js/srcI’m gonna go ahead and create a new fileclick.jsAnd then paste the following intoclick.jsFile. The code is as follows:

!function(e,t,a){function n(){c(".heart{width: 10px; height: 10px; position: fixed; background: #f00; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }.heart:after,.heart:before{content: ''; width: inherit; height: inherit; background: inherit; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: fixed; }.heart:after{top: -5px; }.heart:before{left: -5px; }"),o(),r()}function r() {for(var e=0; e<d.length; e++)d[e].alpha<=0? (t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px; top:"+d[e].y+"px; opacity:"+d[e].alpha+"; transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg); background:"+d[e].color+"; z-index:99999"); requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick; e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div"); a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style"); a.type="text/css"; try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s() {return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[]; e.requestAnimationFrame=function() {returne.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msReques tAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

Copy the code

1. in\themes\*\layout\_layout.swigAdd:

<! <script > <scripttype="text/javascript" src="/js/src/clicklove.js"></script>

Copy the code

Static resource compression

In the site directory:

$ npm install gulp -g
Copy the code

To install the Gulp plug-in:

npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save
Copy the code

Create a gulpfile.js file under the Hexo site. The file contents are as follows:

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'); Gulp.task ('minify- CSS ', function() { return gulp.src('./public/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./public')); }); 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')) }); Gulp. Task ('minify-js', function() { return gulp.src(['./public/**/.js','!./public/js/**/*min.js']) .pipe(uglify()) .pipe(gulp.dest('./public')); }); Gulp.task ('minify-images', function() { gulp.src('./public/demo/**/*.*') .pipe(imagemin({ optimizationLevel: 5, // Type: Number Default: 3 Value range: 0-7 (optimization level) Progressive: true, // Type: Boolean Default: false Lossless compression JPG image Interlaced: False, // Type: Boolean Default: false Interlaced scan GIF for rendering multipass: False, // Type: Boolean Default: false Optimize SVG several times until it is fully optimized}). Pipe (gulp.dest('./public/uploads')); }); // Default gulp.task('default', ['minify-html','minify-css','minify-js','minify-images']);Copy the code

To compress static resources, run the gulp command after generate. After the compression is complete, run the deploy command to synchronize the compression to the server:

hexo g
gulp
hexo d
Copy the code

Change the access URL path

The default URL is domain/2018/10/18/ About this site, change to domain/About/ About this site. Edit the _config.yml file under the Hexo site and change the permalink field:

permalink: :category/:title/
Copy the code

Post top

1. Installing a plug-in

   npm install hexo-generator-index-pin-top –save

Then add top to the front-matter of the article:

---
title: 2018
date: 2018-10-25 16:10:03
top: 10
---

Copy the code

1. Set the top sign

Open: /themes/*/layout/_macro/post.swig and go to

      {% if post.top %}
        <i class="fa fa-thumb-tack"Word-wrap: break-word! Important; ">< span style =" font-size: 14px"post-meta-divider">|</span>
      {% endif %}

Copy the code

Margin-top: 0px; margin-top: 0px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); }Copy the code

# Back to top in sidebar
b2t: true

# Scroll percent label in b2t button
scrollpercent: true
Copy the code

$CD < site directory > $hexo new Page CategoriesCopy the code

This is an Application name that you can use with your Homepage URL. This is an Application name that you can use with Authorization callback URL: This must be your blog addressCopy the code

# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ... ' on footer, and more
  language: # Force language, or auto switch by themeGithub_user: {you github user id} github_repo: public git repository, comments will be the issue of that project client_id: {just requested ClientID} client_secret: {Secret} proxy_gateway:# Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_pro

Copy the code

disqus:
  enable: false
  shortname:
  count: true

Copy the code

The original domain name "dn-lbatics.qbox.me" (expected to expire in early October 2018) has expired, and the customer service communication several times without any result, even if I proposed to pay for it, I can only change the domain name to "busuanzi.ibruce.info"!Copy the code

# Baidu Sharing service
baidushare: true

Copy the code

needmoreshare2:
  enable: true

Copy the code

JS-YAML: incomplete explicit mapping pair; a key node is missed at line 18, column 29:
      last_updated: Last updated: %s

Copy the code

Js-yaml: Bad indentation of a mapping entry at line 18, column 31: last_updated:"Last updated: %s"

Copy the code

Error: EMFILE, too many open files

Copy the code

$ ulimit -n 10000

Copy the code

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

Copy the code

#! /usr/bin/env node --max_old_space_size=8192

Copy the code

error: RPC failed; result=22, HTTP code = 403

fatal: 'username.github.io' does not appear to be a git repository

Copy the code

Error: listen EADDRINUSE

Copy the code

$ hexo server -p 5000

Copy the code

npm ERR! node-waf configure build

Copy the code

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

Copy the code

$ npm install hexo --no-optional

Copy the code

{% for post in site.posts.toArray() %}
{% endfor %}

Copy the code

$ hexo clean

Copy the code

{
  "hexo": {
    "version": "3.2.2"}}Copy the code

​```
{% raw %}
Hello {{ sensitive }}
{% endraw %}
​```

Copy the code

Error: watch ENOSPC ...

Copy the code

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Copy the code

Error: watch /path/to/hexo/theme/ EMPERM

Copy the code

$ hexo generate
$ hexo server -s

Copy the code

FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)

Copy the code

plugins:
hexo-generator-feed
hexo-generator-sitemap

Copy the code

$ hexo new [layout] <title>

Copy the code

$ hexo publish [layout] <title>

Copy the code