搭建hexo博客

??小伙伴們，大家好丫，經(jīng)過幾天的折騰，總算把我的博客弄得差不多啦。雖然加載速度還是有點抱歉，但整體上已經(jīng)有模有樣啦，O(∩_∩)O。今天的話，就來梳理一下從無到有如何搭出來一個基本的博客，技術(shù)有限，也請大家多多指正哈。
??如果你沒有自己服務(wù)器的話，而且只是弄著玩玩，不怎么經(jīng)常性去維護的話，可以考慮部署到github或者coding呢，這里暫時只講部署到github，coding類似。如果你有自己的服務(wù)器，并且想更多推廣出去的話，那可就要好好多打理啦。本文采用的主要是hexo來搭建。 

??以下內(nèi)容如果是用sudo apt-get install的話，缺少依賴時應(yīng)先運行sudo apt-get update，其他的內(nèi)容后續(xù)想到再補充。 

1. 安裝nodejs^1

// 此處采用的是源碼安裝，需要時間較久

cd /data

mkdir nodejs

cd nodejs    //進入到你要放nodejs壓縮包的地方，eg: /data/nodejs

wget https://nodejs.org/dist/v10.14.2/node-v10.14.2.tar.gz     //版本號詳細可上官網(wǎng)看，建議下載最近且穩(wěn)定的版本，可以避免不少坑

tar -zxvf node-v10.14.2.tar.gz

cd node-v10.14.2

./configure

make

make install    //較久

node -v

npm -v        //此為驗證是否安裝成功// 若要npm比較穩(wěn)定// npm install -g n // sudo n stable

2. 安裝git^2

sudo apt-get install git  //一句命令即可

3. hexo-cli

(1). 安裝hexo-cli

//需要使用npm來安裝該模塊//但npm有時安裝包可能卡住或者因為被墻了下載不下來，推薦換成國內(nèi)的鏡像//此處采用的是taobao的

npm config set registry https://registry.npm.taobao.org

npm install -g hexo-cli    //安裝hexo腳手架

hexo -v //驗證是否安裝成功

//然后找一個你喜歡的文件夾

hexo init yourBlog

cd yourBlog

npm install    //先安裝一些初始必要的依賴

hexo clean    //清除已經(jīng)生成的頁面

hexo g    //生成靜態(tài)頁面

hexo s    //運行hexo

hexo d    //部署，需先配置好部署地方

· node_modules: 依賴包

· scaffolds：生成文章的一些模板

· source：用來存放你的文章

· themes：主題

· _config.yml: 博客的配置文件

(2). 配置hexo^3

??安裝完畢后的主題默認是landscape，如果你不喜歡的話，可以上這里查閱有什么主題，我采用的是ocean主題。
??基礎(chǔ)的配置可以查看下方主題設(shè)計者的文檔

· Ocean中文文檔^4

4. 添加一些功能

· 標(biāo)簽云

· 摘要

· 評論

· 訪問統(tǒng)計

· 計算字?jǐn)?shù)及閱讀時間

· 音樂-網(wǎng)易云外鏈

· 背景織網(wǎng)特效

· live2d

· 運行時間

· 圖片懶加載

· 推薦閱讀

· 版權(quán)信息

· 在線聯(lián)系

· 支持?jǐn)?shù)學(xué)公式

· 多渠道分享

5. 部署到服務(wù)器上(ubuntu)

(1). 安裝nginx

//為了方便和快一點，這里采用的是apt-get安裝，不采取源碼安裝

sudo apt-get install nginx

//按y執(zhí)行安裝過程，若報缺少依賴，則

sudo apt-get update

sudo apt-get install nginx

//即可//安裝完畢后，瀏覽器輸入云主機ip看到nginx歡迎頁面即成功

(2). 配置nginx

??這一步比較瑣碎，包括設(shè)置網(wǎng)站根目錄，配置http跳轉(zhuǎn)https，自定義404頁面，gzip壓縮提高加載速度等等。不過在進行這些之前，最關(guān)鍵的前置步驟是需要有一個可以用的域名，指已備案，且添加解析記錄到你的云主機，并且申請ssl證書上傳到服務(wù)器中。

//進行了前面這些操作后

cd /etc/nginx  //進入nginx的安裝目錄

cd conf.d    //在此處創(chuàng)建ssl.conf配置http跳轉(zhuǎn)https

touch ssl.conf

vim ssl.conf  //此處根據(jù)自己的域名證書所在的路徑，對下面eg進行替換

e.g：

server{

    listen 80;

    server_name domainname;

    rewrite ^(.*)$ https://${server_name}$1 permanent;    //這里是設(shè)置跳轉(zhuǎn)最重要的地方，重定向到https上

}

server{        //https的配置

    listen 443 ssl http2;

    server_name domainname;

    ssl on;

    ssl_certificate 1_domainname_bundle.crt;

    ssl_certificate_key 2_domainname.key;

    ssl_session_timeout 5m;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;

    ssl_prefer_server_ciphers on;

    location / {    //指向網(wǎng)站根目錄

        proxy_redirect off;

        proxy_set_header REMOTE-HOST $remote_addr;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_pass http://localhost:4000/;    //hexo是在4000端口上運行

     }

}

//https的跳轉(zhuǎn)上面配置完還不可以，還需要配置一處地方//在nginx目錄中

cd site-available

vim default

//在server中添加

server_name localhost;

location / {

        root webapproot;    //你的webapp的路徑

        index index.html index.htm index.nginx-debian.html;

        try_files $uri $uri/ = 404;

}

//然后

nginx -t  //查看是否配置出錯//沒有的話

nginx -s reload

service nginx restart    //輸入域名訪問即可跳到安全的https

//搞定這個后，剩下的是配置自定義404頁面和開啟gzip壓縮了//404這個看個人喜好了，開啟gzip壓縮是很有必要的，多少能提高加載速度

cd /etc/nginx

vim nginx.conf

//配置404,在默認的配置文件中的http里添加這一段

server_tokens off;

proxy_intercept_errors on;//這里偷懶把所有錯誤碼都定位到404頁面了    

error_page 403 404 500 502 503 504 /404.html;

server {

    location /404.html {

        root 404頁面的路徑;

    }

}

//開啟gzip壓縮### Gzip Settings ##

    gzip on;    //開啟gzip壓縮

    gzip_disable "msie6";    //針對ie瀏覽器要設(shè)置的

    gzip_min_length 1k;    //最小被壓縮長度，小于這個大小的不會被壓縮

    gzip_vary on;    

    # gzip_proxied any;

    gzip_comp_level 2;    //壓縮力度，越大壓縮越厲害但耗性能，這里夠用了

    gzip_buffers 4 16k;

    gzip_http_version 1.1;

    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png video/mp4 audio/webm video/ogg;    //要壓縮的文件格式

(3). 安裝pm2模塊

//這里安裝pm2模塊的目的是為了讓你的項目持久化運行//正常的hexo server，關(guān)掉窗口后也就停止運行了//所以需要它來幫助運行

npm install -g pm2    //全局安裝

//寫一個運行的腳本const {exec} = require('child_process')

exec('hexo s',(error,stdout,stderr)=>{

    if(error){

        console.log('exec error:${error}')

        return

    }

    console.log('stdout:${stdout}');

    console.log('stderr:${stderr}');

})

//保存為xx.js到你博客的根目錄//運行

pm2 start xx.js

//會發(fā)現(xiàn)把窗口關(guān)掉，去瀏覽器還是能照常訪問

//這里每次運行hexo的幾句命令都好麻煩，有沒有方法可以減少呢？//答案是有的//編輯博客根目錄的package.json，修改里面"script"部分//在其中添加"build"字段//內(nèi)容寫上

hexo clean && hexo g && gulp(可選) && hexo d && pm2 restart xx.js//其中gulp是壓縮代碼，即把你那些html，js，css代碼“丑化”，圖片壓縮大小//分別表示清除已生成，重新生成，壓縮，部署，持久化運行

(4). 安裝hexo-admin

//如果你是部署到服務(wù)器上，每次上去黑窗口寫或者寫完再上傳都比較麻煩//自己懶得做管理端的話，是否有方便的方法來寫文呢//答案是有的，就是hexo-admin插件

cd yourBlog

npm install hexo-admin --save

hexo s//輸入博客根目錄網(wǎng)址+/admin/即可登錄，首次無需輸入賬號密碼//這畢竟是一個管理端，總不能讓人隨便訪問//找到頁面中的settings

//點擊下面的 Setup authentification here 。//填寫用戶名，密碼，和加密串

//然后把生成的賬號，密碼，和加密串等信息寫到_config.yml配置文件中//即在_config.yml中添加

admin:

  username: yourusername

  password_hash: yourpassword_hash

  secret: your secret

  command: './admin_script/hexo-generate.sh'

//然后再次運行打開相同路徑即可觸發(fā)登錄//為了更愉快的寫文章//可以給配置中再加個command,里面寫上hexo clean && hexo g//即每次寫完推文總是重新生成靜態(tài)文件，方便一些

6. 部署到github^5

(1).安裝插件并配置

//先安裝部署到github上所需要的插件

npm install hexo-deployer-git --save

//進入博客根目錄修改__config.yml文件

deploy:

  type: git

  repo: git@github.com:OwnerName/OwnerName.github.io.git

  branch: master

(2).配置github并部署

//生成ssh keys

ssh-add ~/.ssh/id_rsa

//然后

cd ~/.ssh

sudo gedit id_rsa.pub

//將內(nèi)容復(fù)制下來后，登陸github，右上角進入settings//選擇SSH and GPG keys//然后new SSH key，將復(fù)制的內(nèi)容粘貼上去，保存

//新建一個respository//命名為OwnerName.github.io

ssh -T git@github.com    //測試連接是否成功

//出現(xiàn)下列語句則表明已經(jīng)連上

Hi wispyoureyes! You've successfully authenticated, but GitHub does not provide shell access.

//接下來

<span style=";font-family:'Times New Ro