從零搭建Hexo我的博客

前言

大專。高中時對Android系統很是感興趣，從簡單的ROM拼包 => 修改smali => JAVA => Android => 逆向分析(JAVA層) ，到如今就進了Spring全家桶的坑沒法自拔，感受有點偏離初衷了。

效果

https://dhbin.cn

環境配置

環境: 阿里雲Ubuntu16.04

安裝git

$ apt update
$ apt install git-core

安裝Nodejs

安裝 Node.js 的最佳方式是使用 nvm

$ wget https://raw.github.com/creationix/nvm/master/install.sh
$ sudo chmod +x install.sh
$ ./install.sh

執行nvm可能會提示找不到命令，執行下

$ source ~/.bashrc

安裝完成後，重啓終端並執行下列命令便可安裝 Node.js。

$ nvm install stable

安裝Hexo

$ npm install -g hexo-cli

安裝Nginx

$ apt install nginx

若是系統中沒有Nginx的源，百度不少教程

建站

安裝 Hexo 完成後，請執行下列命令，Hexo 將會在指定文件夾中新建所須要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

安裝完成後執行

$ hexo server

輸出：

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

便可訪問

配置

Hexo配置

在Hexo的文檔有很詳細的配置信息描述，這裏主要說下我修改的地方

配置文件:_confg.yml

# Site
title: 標題
subtitle: 副標題
description: 描述
keywords: 關鍵詞，用於SEO吧
author: 做者
language: 語言，我在這配置zh-CN
timezone: 時區

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 網站
permalink: 文章的 永久連接 格式 個人配置是:year/:month/:day/:id.html # 使用:id的話，執行hexo clean會改變

NexT配置

把NexT下載下來，這裏我是下載而不是git clone，由於後來使用git對整個項目託管會有衝突。若是是把項目託管在github的話能夠把NexT添加爲子模塊。

$ cd <hexo>
$ git submodule add https://github.com/theme-next/hexo-theme-next themes/next

修改<hexo>/_config.yml，切換主題爲next

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

定製NexT

修改<hexo>/themes/next/_config.yml

# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: true # seo優化

# 菜單
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable/Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true # 開啓後菜單顯示總數目的badge

# Schemes 樣式，NexT提供了四種，我看Mist比較順眼
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink. 
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
# 格式：
# 顯示名稱: 連接 || 圖標
social:
  GitHub: https://github.com/DHBin || github
  Gitee: https://gitee.com/FYMD || code
  
# Sidebar Avatar
# 頭像，能夠是網上的連接，也能夠是本地的
avatar:

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
# 這裏沒有修改，能夠使用<!-- more -->來顯示摘要
# 如：
# ---
# 我是摘要
# <!-- more -->
# 在首頁就僅顯示「我是摘要」
auto_excerpt:
  enable: false
  length: 150
  
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# 背景動畫
canvas_nest: true

# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
#    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
# 使用CDN加速
vendors:
  jquery: https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js
  fastclick: https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
  velocity: https://cdn.bootcss.com/velocity/1.2.1/velocity.min.js
  velocity_ui: https://cdn.bootcss.com/velocity/1.2.1/velocity.ui.min.js
  pace: https://cdn.bootcss.com/pace/1.0.2/pace.min.js
  pace_css: https://cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css
  canvas_nest: https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js

部署配置

到這裏就基本完成了，把項目部署到服務器。

PM2

PM2是node進程管理工具 ,我把hexo server和自動git pull的腳本分開運行，以cluster模式運行hexo server.

ecosystem.config.js

module.exports = {
  apps : [{
    name      : '博客',
    script    : '/root/.nvm/versions/node/v10.8.0/bin/hexo',
    instances : 'max',
    args      : ['server', '-p', '8080', '-i', '127.0.0.1'],
    exec_mode : 'cluster',
    watch     : [
        'scaffolds', 'source', 'themes', '_config.yml'
    ],
    ignore_watch : ['node_modules', 'package.json', 'package-lock.json']
  }],
};

instances設置了max，看大家的實際狀況設置吧

strat.sh

#!/bin/bash
pm2 start ecosystem.config.js
pm2 show 博客
while true
do
    echo '=====git pull======'
    git pull
    echo '=====git pull======'
    sleep 60
done

每次更新git push後就會自動更新，每分鐘執行一次git pull，也能夠使用webhook來實現。

Nginx

/etc/nginx/conf.d/blog.conf

server {
    server_name xxxx.cn
    listen 80;
    location / {
            proxy_pass  http://localhost:8080;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
}

運行

$ cd <項目的目錄>
$ chmod +x start.sh
$ pm2 start start.sh

其餘

HTTPS證書

能夠在https://letsencrypt.org/ 中免費申請一個

Markdown工具

推薦Typora

可能文中會出現錯誤和講述不清的地方，望指出與交流。

參考資料

很好用的markdown工具——typora

Hexo官方文檔

nexT官方文檔