Github部署+Hexo搭建免費博客 next主題美化

前言

工作學習中難免會遇到一些問題,有些問題比較複雜,第一遇到了百度許久,第二次遇到了還是要百度許久!想想
倒不如遇到問題記下來寫在博客上!以後好查閱.在CSDN上面看到hexo+github可以免費搭建博客,於是就自己
動手搭建了一下,寫下來跟大家分享下!本機默認windows系統下

準備工作

安裝git

**關於Git:**Git(讀音爲/gɪt/。)是一個開源的分佈式版本控制系統，可以有效、高速的處理從很小到非常大的項目版本管理。 [1] Git 是 Linus Torvalds 爲了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟件。
- Git下載地址：https://git-scm.com/downloads
- 安裝步驟:默認下一步

這裏選擇如圖選項，會使得Git安裝程序在系統PATH中加入Git的相關路徑，這樣你可以在CMD界面下調用Git，不用打開Git Bash
- 安裝完成查看版本

  git --version

- 安裝完成可以使用鼠標右鍵點擊空白區域,調用 Git Bash

關於Hexo

Hexo是高效的靜態站點生成框架，基於Node.js。通過 Hexo 你可以輕鬆地使用 Markdown 編寫文章，除了 Markdown 本身的語法之外，還可以使用 Hexo 提供的標籤插件來快速的插入特定形式的內容，而且相對於其他框架，Hexo在速度上也有很大優勢

搭建Node.js環境

由於Hexo框架基於Node.js,使用前先搭建Node.js環境
下載地址：http://nodejs.cn/download (說明：LTS爲長期支持版，Current爲最新版)
安裝步驟:默認下一步
查看版本:
命令 node -V

安裝Hexo

在你的任意盤符下,創建一個文件夾,在命令窗口通過cd命令到該目錄
執行安裝命令:npm i -g hexo
安裝完成,查看版本
執行初始化命令: hexo init
生成如下文件
關於生成文件

node_modules：是依賴包
public：存放的是生成的頁面
scaffolds：命令生成文章等的模板
source：用命令創建的各種文章
themes：主題
_config.yml：整個博客的配置
db.json：source解析所得到的
package.json：項目所需模塊項目的配置信息
Hexo常用命令:有些會經常用到

npm install hexo -g #安裝
npm update hexo -g #更新
hexo init #初始化

hexo n “name” #新建文章
hexo g #生成靜態網頁
hexo p #發表草稿。
hexo s #啓動服務
hexo d #部署網站參數：-g 部署之前先生成靜態文件。

npm install hexo-server –save #安裝服務
hexo s #啓動服務
hexo server -p 5000 #更改端口
hexo s -s #靜態模式
hexo s -i 192.168.1.1 #自定義ip
hexo clean #清除緩存

hexo d -g #部署
hexo g -d
在Git Bash 輸入命令 hexo s 啓動本地預覽,默認端口號是4000
在瀏覽器中輸入 localhost:4000,打開本地預覽,初始化效果圖:

NexT主題

第一步的初始化工作部分已經完成!
接下來,開始第二部
Hexo上面有很多主題可供選擇,但是NexT主題在Github上面Star最高!本文已NexT主題爲例,進行主題建設.
當然這一部分比較繁瑣,想要搭建出自己喜歡的效果,還是要多下些功夫

安裝NexT主題

在你創建的文件夾下,右鍵調用 Git Bash,我的文件夾叫MyBlog

下載最新版主題:輸入命令:

git clone https://github.com/iissnan/hexo-theme-next themes/next

可以瀏覽官方文檔: http://theme-next.iissnan.com/ 下載穩定版和進行其他相應操作
安裝成功

啓用NexT主題

關於配置文件

- 我的站點配置文件

- 對應的themes下next下的就是主題配置文件

啓用主題

本地預覽Next主題

窗口終端中輸入hexo s啓動服務瀏覽器輸入 localhost:4000 是時候可能會發生端口占用的情況,上面常用命令中有修改端口號的方法

主題設定

NexT默認提供了四種,就是兩種導航欄在側欄,兩種導航欄在頂部!
依據個人喜好設定:

設置語言

- 值得注意的是在站點和主題配置文件下!輸入中文亂碼的請問題可以通過一下方式解決:打開文件時選擇文件輸出格式,編輯器中保存即可!

- 也有人說,通過txt打開另存爲的方式,也可以設置!沒試過,我有最優方案,沒必要試用其他的.

設置導航欄

菜單裏面的頁面可以根據個人需求進行模仿添加!
不過需要在NexT主題目錄下的 languages/{language}.yml進行添加才能顯示你所需要的Language

新建頁面

新建頁面代碼如下:新建的頁面都存在的站點目錄下Source文件夾中

設置代碼高亮

設置側欄

設置側欄,如圖可以根據你的需求進行顯示!

設置頭像

設置側邊社交鏈接

開啓友情鏈接

關注微信公衆號

開啓打賞功能

公益

背景動畫

官方文檔估計是跟不上更新了,我用的最新的背景動畫有四種

設置閱讀全文

更改字體

文章顯示摘錄

文章寬度

編寫文章方式

文章默認存放在站點目錄下的source/posts中
comments:false 表示關閉第三方評論服務;
注意空格

集成第三方服務

在追求完美的道路上,我們永不止步

百度統計

註冊百度統計,獲取百度統計ID

不蒜子統計

本地搜索

開啓字數統計,閱讀時長

你還可以根據hexo內置標籤進行一下個性化操作!不過我覺得沒必要了,畢竟這個只是工具拿來用了,效果還可以就行了!沒必要搞的花費太多時間深入研究!畢竟人家Hexo就是要你用的時候能夠簡單高效!

Github

關於Github

gitHub是一個面向開源及私有軟件項目的託管平臺，因爲只支持git 作爲唯一的版本庫格式進行託管，故名gitHub。
gitHub於2008年4月10日正式上線，除了git代碼倉庫託管及基本的 Web管理界面以外，還提供了訂閱、討論組、文本渲染、在線文件編輯器、協作圖譜（報表）、代碼片段分享（Gist）等功能。目前，其註冊用戶已經超過350萬，託管版本數量也是非常之多，其中不乏知名開源項目 Ruby on Rails、jQuery、python 等。
2018年6月4日，微軟宣佈，通過75億美元的股票交易收購代碼託管平臺GitHub。