hexo,史上最全搭建我的博客

時間  2021-05-12
標籤 javascript php css html java node linux nginx git github 欄目 JavaScript 简体版
原文   原文鏈接

前言

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

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

本文概要

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

Hexo 介紹

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

我本身的 hexo GitHub 克隆以後 yarn install 安裝依賴。hexo s 本地預覽效果。html

yarn 中文教程 java

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

root 爲項目根路徑。linux

# 本地預覽
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 標題名稱

配置友鏈

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

image-20200306225510922

配置音樂

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

image-20200306225547485

導航-關於

root/source/about/index.md 配置我的信息。github

image-20200307121049901

導航-留言

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

image-20200307121113555

導航-標籤/分類/歸檔

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

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

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

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

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

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

gitalk 配置

基本和這個 gitalk readme

image-20200306222243375

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

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

image-20200306222528779

<font color=red>注意 gitalk 的 配置信息不要泄露</font>

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

image-20200306222904462

valine

gitalk 是須要登陸 github 才能登陸的，valine 是不須要登陸就能夠留言的。

官網申請帳號

image-20200306223337173

申請好帳號，先建立本身的應用，而後將 ApplD 和 AppKey 配置到主題文件中去。<font color=red>注意 valine 的 配置信息不要泄露</font>

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
valine 評論以下

image-20200306223749651

不蒜子統計

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

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

頁面資源配置前置路徑

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

# 靜態資源前綴路徑
jsDelivr:
    url:

擴展修改

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

靜態資源位置

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

部署

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

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

建立新用戶

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

在阿里雲控制檯建立新的用戶，之後用這個用戶操做遠程服務器。

# 建立 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

配置 ssh

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

# mflyyou.cn 爲你的服務器
ssh mflyyou.cn
# 生成祕鑰
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

配置登陸信息

~/.ssh/config

image-20200306233517287

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

User 配置對應的 用戶

IdentityFile 配置對應的私鑰文件

以上完成就能夠 ssh mflyyou 登陸了。

image-20200306233759748

安裝 nginx

nginx 安裝教程

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

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

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

# 配置開機啓動
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

修改配置文件

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

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 {
        }
    }
}

主要添加了 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之內。

<font color=red>若是對 oss 和 cdn 不知道是什麼，建議直接部署到阿里雲服務器就行</font>

阿里雲服務器推廣

阿里 oss

我買 oss 的緣由是爲了用 typora 寫文章的時候上傳圖片省事 ，在 Picgo 上配置阿里 oss 圖牀就行。

image-20200307102712474

image-20200307105001747

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

image-20200307103458966

建立以後不要忘了設置防盜鏈。

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

image-20200307103817414

CDN

image-20200307104129580

邊緣腳本 語法看阿里官方指南就能夠看懂了，根據本身需求添加。好比給圖片加水印，全部請求都會給加上 oss 上的訪問參數，使全部的圖片都有水印效果。

你也能夠經過 回源配置 將流量回源到你的阿里雲服務器，<font color=red> cdn 回源 oss 也是要收費的。</font>

SEO

提交你的連接，讓百度索引

百度站長工具

提交你的連接

image-20200307113739724

image-20200307113904879

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

自動推送，會在你訪問連接的時候，推送百度，只需配置就能夠了。

# 推送你須要讓百度索引的連接
baiduPush: true

百度分析

百度分析

<img src="http://oss.mflyyou.cn/blog/20200307114721.png?author=zhangpanqin" alt="image-20200307114720921" style="zoom:50%;" />

填寫上述 id

baiduAnalytics:
    enable: true
    # 百度分析 id
    id:

google 分析

google 分析

image-20200307115610409

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

googleAnalytics:
  enable: true
  # 谷歌分析配置申請以後填寫你的 id
  id:

google search console

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

<img src="http://oss.mflyyou.cn/blog/20200307115742.png?author=zhangpanqin" alt="image-20200307115742082" style="zoom:50%;" />

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

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

image-20200307115902993

腳本一鍵部署網站

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

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

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

用戶名必定要配置 ssh ，修改你本身的 ip。

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

感謝

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

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

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

本文由 張攀欽的博客 創做。 可自由轉載、引用，但需署名做者且註明文章出處。

如轉載至微信公衆號，請在文末添加做者公衆號二維碼。微信公衆號名稱：Mflyyou

img

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程