hexo,史上最全搭建個人博客

前言

2020 - 2 月底鬼使神差的給我的域名 mflyyou.cn 續費三年，2024 - 4 才到期，就琢磨搭建個人網站，Google 了 hexo 中一個自己比較喜歡的主題 hexo-matery-modified ,然後自己改了改其中的內容。

博客的具體效果請觀摩 張攀欽的博客

本文概要

• hexo 使用，及怎麼去改主題的模板
• 阿里雲服務器，搭建 nginx ,配置 nginx 緩存
• 百度、谷歌 seo 優化，讓你的網站可以被搜索到
• 阿里 oss 作為圖片服務器
• CDN 加速提高首屏渲染
• shell 腳本一鍵部署到 nginx 目錄下，將所需靜態資源上傳到 oss

Hexo 介紹

hexo 會解析 markdown 語法 生成對應的 html ，主題就是 css 樣式。

我自己的 hexo GitHub 克隆之後 yarn install 安裝依賴。hexo s 本地預覽效果。

yarn 中文教程

如果是用 npm 安裝的依賴包的話，請將 yarn.lock 先刪除，再 npm install 安裝。我已在項目下 .npmrc 配置依賴包從淘寶鏡像下載。

root 為項目根路徑。

<code># 本地預覽
hexo s

# 根據配置文件和主題，將 root/source/_post 下的 markdown 文件生成 html 內容
hexo g

# 清空 hexo g 生成的內容，內容在 root/public 
hexo clean

# 將本地生成 url 鏈接推送到百度，讓百度爬取其中的內容進行索引
hexo d

# 根據 標題名稱  在root/source/_post 生成 markdown 文件
hexo new post 標題名稱/<code>

配置友鏈

root/source/_post/friends.json 配置友鏈。

配置音樂

root/source/_post/musics.json 配置音樂列表。

導航-關於

root/source/about/index.md 配置個人信息。

導航-留言

root/source/contact/index.md 配置留言展示信息。

導航-標籤/分類/歸檔

以上配置信息是在文檔的 markdown 文件中配置，然後會根據這些信息生成以上導航的內容。

<code>---
# 名稱
title: {{ title }}
# 文章日期
date: {{ date }}
# 是否在頁面推薦文章列表展示
top: false
# 是否在首頁輪播
cover: false
# 查看文章的密碼, sha256 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
password: 
# 文章目錄
toc: true
# 統計文章
mathjax: true
# 文章摘要
summary:
# 文章標籤
tags:
# 文章分類
categories:
# 文檔關聯圖片,可以配置 url,沒配置的話,自動從主題配置文件的 featureImages 屬性中自動選取一個
img:
---
/<code>

文檔 md 文件最前面的這些內容就會被利用生成 標籤 分類 歸檔 內容。

root/_config.yml 為 hexo 的配置文件。

root/themes/_config.yml 為主題配置文件。

我在配置文件中加看註釋，基本看註釋就能明白。我重點說幾個重要的功能。

gitalk 配置

基本和這個 gitalk readme

創建一個公共倉庫作為你的博客留言，這個是基於 github 倉庫下的 issue 提供的功能。

點擊你申請的 app,查看 gitalk 的配置信息

注意 gitalk 的 配置信息不要洩露

<code># Gitalk 評論模塊的配置，默認為不激活
gitalk:
  enable: true
  # 配置你的用戶名
  owner: zhangpanqin
  # 配置一個公共倉庫儲存聊天記錄。
  repo: hexo-gitalk
  oauth:
      # 填寫你申請的 Client ID
    clientId: 
    # 填寫 Client Secret
    clientSecret:  

  # 配置你的用戶名
  admin: zhangpanqin/<code>

valine

gitalk 是需要登錄 github 才能登錄的，valine 是不需要登錄就可以留言的。

官網申請賬號

申請好賬號，先創建自己的應用，然後將 ApplD 和 AppKey 配置到主題文件中去。注意 valine 的 配置信息不要洩露

<code>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/<code>

valine 評論如下

不蒜子統計

可以在頁腳展示你的網站訪問量和訪問人次，但是會拖慢頁面加載，我將其關閉了。

<code># 不蒜子(http://busuanzi.ibruce.info/) 網站統計,為了網站加載速度,展示關閉
busuanziStatistics:
  enable: false
  totalTraffic: true # 總訪問量
  totalNumberOfvisitors: true # 總人次/<code>

頁面資源配置前置路徑

以前的版本，資源只能加載當前網站下的資源，現在可以配置路徑前綴。將靜態的 css,js 庫 、圖片資源放到阿里 oss 上去，再利用 cdn 加速，可以提高首屏渲染速度。本地調試的時候 配置 url 為空

<code># 靜態資源前綴路徑
jsDelivr:
    url:  /<code>

擴展修改

root/themes/matery/layout 為模板文件，你會 html 和 css 就能修改，模板的語法也很簡單，當你看幾篇模板基本就學會了。

靜態資源位置

root/themes/matery/source 為靜態資源位置，可將這些資源放到 oss 上去，通過 cdn 加速。

部署

基於以上步驟你就可以 hexo s 本地預覽，我們要部署到服務器上去。

阿里雲上買個服務器，我裝的是 cenos 7.7系統。

創建新用戶

為了安全不要用 root 用戶操作你的遠程服務器。

在阿里雲控制檯創建新的用戶，以後用這個用戶操作遠程服務器。

<code># 創建 hexo 用戶
adduser hexo

# 修改 hexo 的密碼
passwd admin12345

# 給 hexo 賦予 sudo 命令權限

# 在 root 下運行，修改文件的可寫性
chmod  700 /etc/sudoers

# /etc/sudoers 文件中填寫 rabbitmq ALL=(ALL)      PASSWD:ALL
# 在文件中下拉，找到  root    ALL=(ALL)       ALL
# 在找到的上述內容下添加，便於維護
admin ALL=(ALL)      PASSWD:ALL

# 權限給了之後，修改文件 /etc/sudoers 為只讀性
chmod  400 /etc/sudoers/<code>

配置 ssh

配置 ssh 之後，你以後只需要。

<code># mflyyou.cn 為你的服務器
ssh mflyyou.cn/<code>

<code># 生成秘鑰
ssh-keygen -o -t rsa  -b 4096 -c "生成秘鑰對的說明"

# 指定秘鑰生成時路徑 /Users/zhangpanqin/.ssh/mflyyou_server_rs.pub

# 將公鑰 copy 到 server 中 hexo 為以後登錄的用戶 ip 為你遠程服務器 ip
ssh-copy-id -i /Users/zhangpanqin/.ssh/mflyyou_server_rs.pub hexo@id

# 注意那個用戶
# 或者登錄 server 將公鑰內容拷貝到了 ~/.ssh/authorized_keys


# 驗證登錄 這個是公鑰對應的私鑰
ssh -T /Users/zhangpanqin/.ssh/mflyyou_server_rs hexo@ip/<code>

配置登錄信息

~/.ssh/config

Host 之後配置的是別名， ssh mflyyou 就會找 HostName 對應的 ip 登錄。

User 配置對應的 用戶

IdentityFile 配置對應的私鑰文件

以上完成就可以 ssh mflyyou 登錄了。

安裝 nginx

nginx 安裝教程

默認的網站目錄為： /usr/share/nginx/html

默認的配置文件為：/etc/nginx/nginx.conf

自定義配置文件目錄為: /etc/nginx/conf.d/

<code># 配置開機啟動
sudo systemctl enable nginx
sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl restart nginx
# 查看 nginx 運行狀態
sudo systemctl status nginx

# 檢查配置文件 配置是否正確
sudo nginx -t

# 重新加載配置文件
sudo nginx -s reload/<code>

修改配置文件

/etc/nginx/nginx.conf 配置緩存

<code>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;

    # 開啟gzip
    gzip on;

    # 啟用gzip壓縮的最小文件；小於設置值的文件將不會被壓縮
    gzip_min_length 1k;

    # gzip 壓縮級別 1-10
    gzip_comp_level 2;

    # 進行壓縮的文件類型。

    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;

    # 是否在http header中添加Vary: Accept-Encoding，建議開啟
    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/...結尾的請求
            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 {
        }
    }
}
/<code>

主要添加了 html 和 xml 使用協商緩存，其餘靜態資源使用強緩存。開啟 gzip。

Cache-Control 為 http 1.1 關於緩存的配置，優先級最高。

add_header Cache-Control "public,max-age=864000” 配置強緩存。

靜態資源幾乎不變，全部強緩存。訪問的時候，在配置的 max-age 內只要瀏覽器有緩存直接拿，而不會問服務器。沒有緩存的話，訪問服務器

add_header Cache-Control no-cache; 配置協商緩存。

html 和 xml 文件是生成的，每次可能會變，配置協商緩存，每次訪問先詢問服務器有沒有變化，沒變化走緩存，變化從服務器拿。

部署基於以上部分就可以了。但是美中不足的是 首次加載的時候還是卡。為了解決這個問題，也為了寫 markdown 的時候圖片上傳方便，直接買了一個 oss 和 cdn。oss 和 cdn 一年花費會在 100以內。

如果對 oss 和 cdn 不知道是什麼，建議直接部署到阿里雲服務器就行

阿里雲服務器推廣

阿里 oss

我買 oss 的原因是為了用 typora 寫文章的時候上傳圖片省事 ，在 Picgo 上配置阿里 oss 圖床就行。

oss 提供了圖形化上傳 和 腳本上傳。結合 shell 可以一鍵將靜態資源上傳 oss，html 相關上傳 nginx 目錄下。

創建之後不要忘了設置防盜鏈。

然後下圖的傳輸管理 選項中開啟 cdn 加速，cdn 選擇流量計費，20 元 100g。oss 外網訪問流量會收費（一年也不會超過一百塊），如果你想省錢，可以買和你的阿里雲服務器相同區域的，然後讓訪問走內網。

CDN

邊緣腳本 語法看阿里官方指南就可以看懂了，根據自己需求添加。比如給圖片加水印，所有請求都會給加上 oss 上的訪問參數，使所有的圖片都有水印效果。

你也可以通過 回源配置 將流量回源到你的阿里雲服務器， cdn 回源 oss 也是要收費的。

SEO

提交你的鏈接

在 roo/_config.yml將 site 對應 host，token 對應 token。hexo d 就會將鏈接推送百度。我寫的腳本，deploy.sh 會自動推送。

自動推送，會在你訪問鏈接的時候，推送百度，只需配置就可以了。

<code># 推送你需要讓百度索引的鏈接
baiduPush: true/<code>

填寫上述 id

<code>baiduAnalytics:
    enable: true
    # 百度分析 id
    id: /<code>

google 分析

google 分析

將跟蹤 id 配置到 主題配置文件中

<code>googleAnalytics:
  enable: true
  # 谷歌分析配置申請之後填寫你的 id 

  id: /<code>

google search console

在 search console 中添加的你的網站網址，這樣 google 會爬取你的網站內容索引。

提交你的站點地圖，讓 google 知道爬取哪些頁面。

以上配置完成後，過幾天就會看到以下效果。百度的更慢，我都 10天了還沒動靜。

腳本一鍵部署網站

<code>BASE_DIR=$(
    cd $(dirname $0)
    pwd
)
# 進入項目路徑下
cd ${BASE_DIR}

yarn run build
hexo d
if [ $? != 0 ]; then
    echo "構建失敗,退出"
    exit -1
fi

# 拷貝項目路徑下 themes/matery/source  到 oss 上去,bukect 替換你 自己的 oss bueket 名稱

/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 "上傳 oss 失敗,退出"
    exit -1
fi

public=${BASE_DIR}/public

if [ -d ${public} ]; then
    scp -rp ${public}/* 用戶名@ip:/usr/share/nginx/html/
    echo "部署成功"
else
    echo "${public} 不存在,部署失敗"
fi
/<code>

我自己寫的 shell 腳本，一直在用。

你只需將 bucket 配置你的 bucket 和 oss 配置文件就行。你運行 ossutilmac64 會提示你配置秘鑰。

用戶名一定要配置 ssh ，修改你自己的 ip。

然後 chmod 744 ./deploy.sh 讓腳本文件可執行。

感謝

我基於 hexo-theme-matery 和 hexo-matery-modified 修改了自己想要的效果。

感覺開源的 hexo 主題 hexo-theme-matery

感謝韋陽的開源貢獻 hexo-matery-modified，讓我節省了大量時間。

本文由博客一文多發平臺 OpenWrite 發佈！

閱讀更多 張攀欽 的文章

關鍵字: Nginx 搭建