Hexo, building a personal blog

preface

At the end of February 2020, I renewed my domain name mflyyou.cn for three years until 2024-4, so I decided to set up a personal website, searched hexo, one of my favorite themes, Hexo-matery-Modified, and changed the content myself.

See Zhang Panqin’s blog for more details

This article summary

• Hexo uses, and how to change the theme template
• Nginx as web server, configure nginx cache
• Baidu, Google SEO, make your blog searchable on the web
• Oss as picture server
• CDN accelerates static resource access and improves first-screen rendering
• One-click shell script deployment

Hexo introduction

Hexo parses the Markdown syntax to generate the corresponding HTML, the subject being CSS styles.

My own hexo my-hexo-theme-matery clone after yarn Install install dependency. Hexo s local preview effect.

Yarn Chinese tutorial

If the dependency package is installed using NPM, delete yarn.lock and then install NPM. I have downloaded the.npMRC configuration dependency package from Taobao image under the project.

Root indicates the root path of the project.

# local preview
hexo s

# generate HTML content from markdown file under root/source/_post based on configuration file and subject
hexo g

Empty the content generated by hexo G in root/public
hexo clean

# Push locally generated URL links to Baidu
hexo d

Create markdown file in root/source/_post based on title nameHexo New Post title nameCopy the code

Configuration friend chain

Root /source/_post/friends.json Configures friend links.

Configuration of music

Root /source/_post/musics.json Configures the music list.

Navigation – About

Root/source/about/index. The md configuration information.

Navigation – Message

Root/source/contact/index. The md configuration messages display information.

Navigation – Label/sort/archive

The above configuration information is configured in the markdown file of the document and is then used to generate the content of the navigation above.

-- # name title: {{title}} # date: {{date}} # whether to display top: false False password, viewing articles # 8 d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92 sha256 password: # toc article directory: True # Statistics article Mathjax: True # Article Summary: # article categories: If not, an img is automatically selected from the featureImages attribute of the theme profileCopy the code

The content at the front of the document MD file is then used to generate labels to categorize archived content.

Root /_config.yml is the configuration file of hexo.

Root /themes/_config.yml is the theme configuration file.

I add a comment to the configuration file and basically understand it from the comment. Let me highlight a few important features.

Gitalk configuration

Basic and this Gitalk readme

Create a public repository for your blog comments based on the github repository issue feature.

Click on your app to view gitalk’s configuration information

Ensure that gitalk configuration information is not leaked

# Gitalk comment module configuration, default is not active
gitalk:
  enable: true
  # Configure your username
  owner: zhangpanqin
  Configure a public repository to store chat logs.
  repo: hexo-gitalk
  oauth:
  	Enter the Client ID of your application
    clientId: 
    # Enter Client Secret
    clientSecret: 
  # Configure your username
  admin: zhangpanqin
Copy the code

valine

While Gitalk requires a login to Github, Valine does not need a login to leave a message.

Official website application account

Apply for an account, create your own app, and then configure ApplD and AppKey into the theme file. Be careful not to leak valine configuration information

valine:
  enable: true
  appId: 
  appKey: 
  notify: false
  verify: false
  visitor: true
  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'just go go' # Comment Box placeholder
  background: /medias/comment_bg.png
Copy the code

Valine comments below

No garlic statistics

I turned it off because it would slow down the page load.

# garlic no children (http://busuanzi.ibruce.info/) website statistics, in order to website loading speed, shut down
busuanziStatistics:
  enable: false
  totalTraffic: true # Total page views
  totalNumberOfvisitors: true # accumulated
Copy the code

Page Resource configuration path

In previous versions, resources could only load resources under the current website. Now you can configure path prefixes. Put static CSS, JS library and image resources into Ali OSS, and use CDN acceleration to improve the rendering speed of the first screen. Set url to null during local debugging

Static resource prefix path
jsDelivr:
    url:  
Copy the code

Extended modified

Root/themes/matery/layout for the template file, would you can modify the HTML and CSS, template syntax is also very simple, when you look at a few basic learns to template.

Static resource location

Root/themes/matery/source for static resources, these resources can be put onto the oss, the CDN to accelerate.

The deployment of

Based on the above steps you can hexo s local preview that we are going to deploy to the server.

Buy a server. I’m running CenOS 7.7.

Creating a New user

For security reasons, do not operate your remote server as root.

Create a new user in the cloud console that you can use later to operate the remote server.

Create hexo users
adduser hexo

Change hexo's password
passwd admin12345

Grant sudo to hexo

Change the writability of the file by running it under root
chmod  700 /etc/sudoers

# /etc/sudoers fill rabbitmq ALL=(ALL) PASSWD:ALL
# drop down in file to find root ALL=(ALL) ALL
# Add under the above content found for easy maintenance
admin ALL=(ALL)      PASSWD:ALL

Change the file /etc/sudoers to read-only after granting permissions
chmod  400 /etc/sudoers
Copy the code

Configure SSH

After configuring SSH, you only need to.

# mflyyou.cn for your server
ssh mflyyou.cn
Copy the code

Generate a secret key
ssh-keygen -o -t rsa  -b 4096 -c "Instructions for generating a secret key pair"

# specify the secret key generated when the path/Users/zhangpanqin /. SSH/mflyyou_server_rs. Pub

Copy the public key to the server hexo is the IP address of your remote server
ssh-copy-id -i /Users/zhangpanqin/.ssh/mflyyou_server_rs.pub hexo@id

# Pay attention to that user
~/.ssh/authorized_keys


This is the private key corresponding to the public key
ssh -T /Users/zhangpanqin/.ssh/mflyyou_server_rs hexo@ip
Copy the code

Configuring Login Information

~/.ssh/config

SSH mflyYou will log in to the Host using the HostName IP address.

User Indicates the User

IdentityFile Specifies the corresponding private key file

SSH mflyYou login.

Install nginx

Nginx installation tutorial

The default directory is /usr/share/nginx/html

The default configuration file is /etc/nginx/nginx.conf

The customized configuration file is stored in /etc/nginx/conf.d/

Configure boot
sudo systemctl enable nginx
sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl restart nginx
# Check nginx running status
sudo systemctl status nginx

Check that the configuration file is correctly configured
sudo nginx -t

Reload the configuration file
sudo nginx -s reload
Copy the code

Modifying a Configuration File

/etc/nginx/nginx.conf Configures the cache

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    '$status $body_bytes_sent "$http_referer" '
    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    proxy_hide_header X-Powered-By;
    proxy_hide_header Server;
    
	# open gzip
    gzip on;

    # Enable gzip compressed minimum file; Files smaller than the set value will not be compressed
    gzip_min_length 1k;

    # gzip compression level 1-10
    gzip_comp_level 2;

    The type of file to compress.

    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    Whether to add Vary: accept-encoding to the HTTP header is recommended
    gzip_vary on;


    include /etc/nginx/mime.types;
    default_type application/octet-stream;
   include /etc/nginx/conf.d/*.conf;


    server {
        listen 80 default_server;
        listen[: :] :80 default_server;
        server_name _;
        root /usr/share/nginx/html;
        server_tokens off;
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location/ {}location ~* \.(html|xml)$ {
            access_log off;
            add_header Cache-Control no-cache;
        }

        location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|mp3|ogg|ogv|webm|htc|woff2|ico|woff|ttf)$ {
            .css/.js/... Closing request
            access_log off;
            # 10 d
            add_header Cache-Control "public,max-age=864000";
        }
        error_page 404 /404.html;
        location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
}

Copy the code

It added negotiated caching for HTML and XML, and strong caching for the rest of the static resources. Open gzip.

Cache-control is the HTTP 1.1 configuration for caching and has the highest priority.

Add_header cache-control “public,max-age=864000 “Specifies a strong Cache.

Static resources are almost unchanged, all strongly cached. When accessing, in the configured max-age as long as the browser has cache directly fetch, without asking the server. If there is no cache, access the server

add_header Cache-Control no-cache; Configure the negotiation cache.

The HTML and XML files are generated and may change each time. Configure the negotiation cache. Each access will first ask the server if there is any change.

The deployment should be based on the above. But the fly in the ointment is that the first load is still stuck. In order to solve this problem, and for the convenience of uploading pictures when writing markdown, I directly bought an OSS and CDN. Oss and CDN will cost less than 100 per year.

If you do not know what oss and CDN are, you are advised to directly deploy to the cloud server

oss

The reason I bought OSS is to make it easy to upload images when writing articles with Typora, just configure oss map bed on Picgo.

Oss provides graphical and script uploads. Combined with shell, static resources can be uploaded to oss, HTML related uploads to nginx directory.

Don’t forget to set anti-theft chain after creation.

Then enable CDN acceleration in the transmission management options shown in the following figure, and select Traffic charging for CDN, which is 20 yuan and 100G. Oss extranet traffic will be charged (no more than 100 dollars per year), if you want to save money, you can buy the same area as your cloud server and let the access go through the Intranet.

CDN

See the official guide to edge script syntax can be read, according to their own needs to add. For example, to watermark images, all requests will be added with oss access parameters to make all images watermarked.

You can also use the back source configuration to send traffic back to your cloud server. CDN back source OSS is also charged.

SEO

Submit your link to Baidu index

Baidu Webmaster Tools

Submit your link

In roo/_config.yml, site corresponds to host and token corresponds to token. The hexo d will push the link to Baidu. The script I wrote is automatically pushed by deploy.sh.

Automatic push, will be when you access the link, push Baidu, just configure it.

# Push the link you need to get Baidu to index
baiduPush: true
Copy the code

Baidu analysis

Baidu analysis

Fill in the above ID

baiduAnalytics:
    enable: true
    # Baidu Analytics ID
    id: 
Copy the code

Google analytics

Configure the trace ID into the topic profile

googleAnalytics:
  enable: true
  Fill in your ID after the Google Analytics profile application
  id: 
Copy the code

google search console

Add your site’s url to the Search Console so Google will crawl your site’s content index.

Submit your site map and let Google know which pages to crawl.

After the above configuration is complete, you will see the following effect in a few days. Baidu’s is even slower, I haven’t done anything for 10 days.

Script one-click site deployment

BASE_DIR=$(
    cd $(dirname $0)
    pwd
)
#Go to the project pathcd ${BASE_DIR} yarn run build hexo d if [ $? != 0 ]; Then echo "build failed, exit" exit-1 fi
#Copy the project path under Themes /matery/sourceOn OSS,bukect replaces your own OSS Bueket name/Users/zhangpanqin/app/oss/ossutilmac64 cp -rf ${BASE_DIR}/themes/matery/source oss://bukect --meta=Cache-Control:public,max-age=2592000 if [ $? != 0 ]; Then echo "upload oss failed, exit" exit -1 fi public=${BASE_DIR}/public if [-d ${public}]; Then SCP - rp ${public} / * username @ IP: / usr/share/nginx/HTML/echo "deployment" else echo "${public} does not exist, the deployment failure" fiCopy the code

I wrote my own shell script and used it all the time.

All you need to do is configure your bucket and oss configuration file. Running ossutilmac64 will prompt you to configure the key.

Be sure to configure SSH for your username and change your OWN IP.

Then chmod 744./deploy.sh makes the script file executable.

Thank you

I modified my desired effect based on hexo-theme-matery and Hexo-matery-Modified.

Feel open source hexo theme Hexo-theme-matery

Thanks to Wei Yang’s open source contribution hexo-Matery-Modified, I saved a lot of time.