hexo搭建博客系列(五)優化博客(無坑)

文章目錄

其他搭建

hexo4快速搭建博客(一）快速搭建一個博客
 hexo4快速搭建博客(二)更換主題
 hexo4快速搭建博客(三)美化很全面收集很多資料
 hexo4快速搭建博客(四)寫作技巧包含圖牀和自動變圖牀的插件
其他：
hexo4搭建博客系列(六)百度，必應，谷歌收錄(無坑)

搭建一個博客不難，但是網上資料好多坑。我可能有些會寫錯，請在評論指出。但是有經過測試的。
我用的版本是 hexo4.0 + NexT7.6版本。我的個人博客

1. 域名綁定

1.1 GitHub倉庫的域名綁定

如果一直打算把博客部署在GitHub上，默認就是部署在這裏，那麼我們來綁定一下域名。

首先先去買個域名，阿里雲的萬網（我是在這個搞的），騰訊雲、百度雲等都可以，這我在前面很早就有說。

打開你部署在github的博客倉庫，然後點擊Settings，看到Repository name，複製下面那個。

在阿里雲點開你的域名解析：我配置的是@，也就是www.xxx.cn和xxx.cn都可以訪問，你可以自己按自己的方式。

然後點擊左邊那個藍色按鈕，添加記錄。

然後再回到剛剛的github你博客倉庫的setting中，往下拉。

最後，在自己本地的站點目錄的source文件中，創建一個CNAME文件，然後在裏面填上我們的域名。因爲剛開始在github那邊填上我們的域名，就會在倉庫生成一個CNAME文件，而我們本地博客沒有，每次上傳時都會把它刪了，所以得在本地創建一個這樣的文件。

訪問試試成功了沒有。

1.2 阿里雲的域名綁定

這個最簡單了，提前是自己要有阿里雲的服務器或者別的服務器。然後去獲取服務器的公網IP地址。比如：我的阿里雲服務器的公網。

然後回到剛剛域名解析那邊，如圖：

如果服務器沒有裝nginx或者tomcat的話，訪問不到什麼，所以看下一步。

2. 將博客部署到阿里雲服務器

這一步我走了很多坑。有時候是githooks不起作用，有時候是nginx問題。

2.1 本地電腦連接阿里雲

阿里雲入門

阿里雲本地SSH連接

這裏額外補充，可以下載一個WinSCP的可視連接程序。

2.2 安裝nginx

最好跟我安裝一樣版本的nginx。看下面的博文，也有某些nginx出錯的解決方法。

安裝nginx

然後訪問公網ip看看有沒有出現什麼，有出現nginx的首頁就說明成功。

2.3 博客部署到阿里雲服務器

2.3.1 原理

在本地編輯文本，然後使用Git遠程部署到VPS的Git倉庫。hexo d命令實際上只deploy了本地的public文件夾，Git Hooks實際上就是當Git倉庫收到最新的push時，將Git倉庫接受到的內容複製到VPS上的網站目錄內。相當於完成了手動將public文件夾複製到VPS的網站根目錄裏。

下面這張是用別人的圖，該原理就是這樣：原地址

2.3.2 安裝配置Git

連接上我們的遠程阿里雲服務器，然後執行：

sudo yum install git

等待下載，查看是否成功：

git --version

2.3.3 創建git用戶以及配置免密登錄

創建一個名爲git的用戶。不是我們github上的那個git用戶。

adduser git

假如沒有提示輸入密碼,則

passwd git

輸入自定義密碼，以後登錄該名爲git的用戶要用的。

然後，賦給git用戶sudo權限

chmod 740 /etc/sudoers
vim /etc/sudoers

找到如下內容：

# User privilege specification
root    ALL=(ALL:ALL) ALL

然後在root下面添加：

# User privilege specification
root    ALL=(ALL:ALL) ALL
git     ALL=(ALL:ALL) ALL

然後按下ESC鍵，加上 ; 再輸入wq保存退出。這應該不用我說了，vim編譯器的指令。

然後修改迴文件的權限：

chmod 440 /etc/sudoers

切換到git用戶

su git						// 切換到git用戶
cd /home/git				// 切換到git用戶目錄
mkdir -p repo/myblog.git	// 創建git倉庫文件夾，以myblog.git爲例
cd repo/myblog.git			// 切換到repo目錄,進入倉庫目錄
git init --bare				// 使用--bare參數初始化爲裸倉庫，這樣創建的倉庫不包含工作區

創建網站目錄shell

cd /home/git 				// 切換到git用戶目錄
mkdir -p hexo/blog			// 創建目錄，用來存放博客的靜態文件

配置ssh

回到我們的本地主機，假設你電腦已經早有配置git密匙，在桌面右鍵點開Git Bash，輸入：

cat ~/.ssh/id_rsa.pub

然後就會出現你的git密匙，複製，然後回到遠程阿里雲服務器，輸入：

cd /home/git				// 切換到git用戶目錄
mkdir .ssh				//創建.ssh目錄
cd .ssh
sudo vim authorized_keys

然後對着vim打開的黑框右鍵一下，就把剛剛複製的密匙複製過去了，但是注意：有可能在最前面有可能會漏掉幾個字符，自己填上去。最後

按ESC，然後按分號鍵; 輸入wq

確認文件夾的權限

sudo chown git:git -R /home/hexo/blog
sudo chown git:git -R /home/git/myblog.git
#然後查看這兩個文件夾是不是都屬於git:git
ll /home/git/
ll /var/www/

然後,到這裏,就先驗證vps是否能用git用戶ssh免密登陸.在本地windows打開git bash,輸入命令登陸

ssh git@你的服務器的公網ip或者域名

首次出現要輸入yes。如果有出現要輸入密碼就成功了，不成功再找我，我在這也走了很多坑。

然後再配置免密碼登錄

chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

2.3.4 配置Nginx

來到Nginx的目錄下的默認配置文件：

cd /etc/nginx/conf.d/
vim default.conf

如果出現這個，別理，直接按Enter。

然後就出現下面這個：改兩處就行。

server {
    listen  80; # 這裏就是要在阿里雲開放80端口
    server_name  flunggg.cn www.flunggg.cn;  # 默認是你的公網，如果有域名填寫你的域名，因爲我域名解析是@，所以有www和無www都可以，全配上去。
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    return 301 https://$server_name$request_uri; # 以後轉https用的
    location / {
        root   /home/git/hexo/blog/; # 改這裏
        index  index.html index.htm;
    }

    error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

然後保存退出。

這裏教一個強制保存退出的，就是在wq加個！。

按ESC，然後按分號鍵; 輸入wq!

這是http的，如果要配置https，加SSL證書看這裏，現在都是https的網站我建議配上好。

給博客配置上https

我現在用的是https，也就是有SSL證書，http和https的兩個配置文件可以共存，就是需要做http的強制跳轉，也就是我上面代碼那句。

2.3.5 配置Git Hooks

簡稱鉤子，我們在本地推送時，即會部署到服務器，也會因爲git hooks部署到github存儲。

但是我照着網上的資料配置，沒有用。所以我換另一種方式。在下一步。

2.3.6 本地配置

最後還需要在站點目錄配置文件_config.yml中，找到下面代碼：在repo中配置兩個，這樣就可以推送到兩個地方。最後一個type: baidu_url_submitter先別理。主要改的就是repo那三行代碼。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
  repo: 
    github: [email protected]:你的github名/你的github名.github.io.git
    vps: git@你的域名或者服務器公網IP:/home/git/repo/myblog.git
  branch: master
- type: baidu_url_submitter

最後就可以用你的域名或者公網ip訪問博客了，上面配置的github也是可以訪問的，但是隻拿它來做個存儲。

3. 使用gulp壓縮資源

在站點目錄右鍵打開Git Bash，輸入：

npm install -d --save gulp gulp-clean gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify

等待下載安裝，然後在站點目錄下創建一個文件：gulpfile.js。然後添上：

var gulp = require('gulp');

//Plugins模塊獲取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

//壓縮css
gulp.task('minify-css',  async function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});

//壓縮html
gulp.task('minify-html',  async function () {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))

.pipe(gulp.dest('./public'))
});

//壓縮js 不壓縮min.js
gulp.task('minify-js',  async function () {
return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

// 壓縮 public/images 目錄內圖片(Version>3)
gulp.task('minify-images', async function (done) {
    gulp.src('./public/images/**/*.*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/images'));
    done();
});
// 開始任務
gulp.task('default', gulp.parallel('minify-html', 'minify-css',  async function() {
  // Do something after a, b, and c are finished.
}));

然後以後每次推送得使用四條指令

hexo clean && hexo g && gulp && hexo d

3.1 一鍵部署

在package.json中加入如下script，看清楚，需要一個逗號分隔{}

,
"scripts": {
  "push": "hexo clean && hexo g && gulp && hexo d"
}

然後在部署的時候只需要運行

npm run push

參考：

hexo部署到vps

hexo搭建博客系列(五)優化博客(無坑)

文章目錄

其他搭建

1. 域名綁定

1.1 GitHub倉庫的域名綁定

1.2 阿里雲的域名綁定

2. 將博客部署到阿里雲服務器

2.1 本地電腦連接阿里雲

2.2 安裝nginx

2.3 博客部署到阿里雲服務器

2.3.1 原理

2.3.2 安裝配置Git

2.3.3 創建git用戶以及配置免密登錄

2.3.4 配置Nginx

2.3.5 配置Git Hooks

2.3.6 本地配置

3. 使用gulp壓縮資源

3.1 一鍵部署

hexo搭建博客系列(五)優化博客(無坑)

軟件開發速學計網：網絡層

快速回顧 MySQL：簡介

快速回顧 MySQL：彙總和分組

快速回顧 MySQL：全文本搜索

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結