在Github上面搭建一個本身域名的Hexo博客

時間 2019-12-02

標籤 github 上面搭建一個本身域名 hexo 博客欄目 Git 简体版

原文原文鏈接

前言

在一次看到別人的博客主頁，以爲設計很漂亮。可是因爲本身對於前臺這塊沒什麼辦法，煞是羨慕。偶然中發現這種樣式是在Github上面搭建的，使用的是Next主題。因而便想本身也搭建一個，因而便去就去查詢相關資料，在經歷很多錯誤以後，終於搭建成功。
因爲當時搭建的時候，沒怎麼記載，並且當初用的也不太熟。在使用了3個多月以後，趁着國慶這個時間將本博文寫出來。若有不妥，歡迎指教！html

注:其實搭建一個本身域名的博客，最大的做用就是提高了逼格…node

效果圖:

1、配置Hexo環境

1.下載並安裝git

地址: https://git-scm.com/downloads
至於32位仍是64位則看我的電腦狀況選擇了。
若是不會使用，能夠看下我以前的博文:http://blog.csdn.net/qazwsxpcm/article/details/68946736git

2. 下載並安裝Node.js

http://nodejs.cn/
位數也依舊看我的電腦狀況，安裝成功以後，輸入 node -v 和npm -v 能夠查看是否安裝成功。
注意:安裝成功後須要重啓電腦。
github

3. 配置hexo

1，新建文件夾，而後右鍵電腦盤符，點擊git base。如:E:\Github\hexo

2，輸入: npm install hexo-cli -g 安裝hexo

hexo命令簡單介紹web

$ hexo g #完整命令爲hexo generate，用於生成靜態文件
$ hexo s #完整命令爲hexo server，用於啓動服務器，主要用來本地預覽
$ hexo d #完整命令爲hexo deploy，用於將本地文件發佈到github上
$ hexo n #完整命令爲hexo new，用於新建一篇文章

3，進入Git Bash，輸入hexo init 初始化倉庫

4，安裝依賴包輸入: npm install ，成功以後輸入: hexo g 和 hexo s

5，在瀏覽器輸入:http://localhost:4000/ 能夠查看本地預覽

注:由於我已經配置好了NexT主題，因此顯示的是該主題。正常會顯示的Hexo默認的主題，借用了網上的一張貼圖做爲範例。npm

2、Hexo的相關配置

1.啓用NexT主題

在成功配置完環境以後，hexo的目錄結構以下。

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。其中，一份位於站點根目錄下，主要包含 Hexo 自己的配置；另外一份位於主題目錄下，這份配置由主題做者提供，主要用於配置主題相關的選項。
爲了描述方便，在如下說明中，將前者稱爲 站點配置文件，後者稱爲 主題配置文件。瀏覽器

咱們打開站點配置文件，找到 theme 字段，並將其值更改成 next。

成功配置以後，稍微等一下，而後再次使用 git base 啓動hexo，輸入hexo g 和 hexo s 即可以看到Next主題以及成功使用。具體能夠看我上面的圖片，這裏仍是使用借用的一張圖。
ruby

2.NexT相關配置

外觀設置

打開 主題配置文件，而後解除Scheme中的 # 註釋，選擇適合本身的主題。bash

Muse - 默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
Mist - Muse 的緊湊版本，整潔有序的單欄外觀
Pisces - 雙欄 Scheme，小家碧玉似的清新

注意: 設置樣式後面須要有一個空格！！！服務器

語言設置

打開站點配置文件 ，找到language，而後設置語音種類。
目前 NexT 支持的語言如如下表格所示：
語言代碼設定示例

English en  language: en
簡體中文    zh-Hans language: zh-Hans
Français    fr-FR   language: fr-FR
Português   pt  language: pt or language: pt-BR
繁體中文    zh-hk 或者 zh-tw  language: zh-hk
Русский язык    ru  language: ru
Deutsch de  language: de
日本語 ja  language: ja
Indonesian  id  language: id
Korean  ko  language: ko

菜單設置

打開主題配置文件，找到menu，而後選擇主菜單顯示內容。

NexT 默認的菜單項有（標註的項表示須要手動建立這個頁面）：
鍵值設定值顯示文本（簡體中文）

home    home: / 主頁
archives    archives: /archives 歸檔頁
categories  categories: /categories 分類頁 
tags    tags: /tags 標籤頁 
about   about: /about   關於頁面 
commonweal  commonweal: /404.html   公益 404

設置完以後，還須要設置對應菜單的相應的文本，也就是菜單的翻譯。
找到languages/{language}.yml ，而後編輯進行相應的說明就好了。
如：設置的是語言是language: zh-Hans ,就打開zh-Hans.yml。

其它設置

頭像設置

在主題配置文件 中編輯 avatar 輸入頭像路徑就好了。
images 在hexo/public/images中。
如: avatar: /images/xuwujing.png

至於做者呢稱和做者描述在我以前的截圖上以及說明了，這裏就再也不多說了。

百度統計

地址:https://tongji.baidu.com/web/welcome/login
登陸以後（沒有則註冊）,而後新增網站，輸入域名就行，而後會出現一串js代碼，複製hm.js? 後面那串統計腳本 id , 而後粘貼到 主題配置文件 中的baidu_analytics 就行。

社交連接

編輯主題配置文件 中的 social 而後增長連接以及說明就行。
例如：csdn: http://blog.csdn.net/qazwsxpcm?viewmode=list 。

標籤分類

在站點目錄下，打開git bash，輸入 hexo new page 「categories」 建立分類。
輸入:hexo new page 「tags」 hexo new page 「about」建立標籤和關於。
建立玩在站點目錄下的source文件夾下，會新增一個categories、tags、about的文件夾，裏面有一個index.md文件，打開以後更改說明爲中文，那麼顯示的也爲中文。
comments能夠設置爲false，含義是打開分類頁面，評論插件不顯示。

個人配置，能夠從該地址查看：https://github.com/xuwujing/xuwujing.github.io

3、Hexo關聯github以及將本地博客上傳

1. 在github上面建立倉庫

1，成功登陸github後(未建立先行建立)，建立一個倉庫，倉庫名稱格式爲 youname.github.io youname 爲用戶名。例如:xuwujing.github.io

2，建立成功以後，點擊該倉庫，選擇setting，而後拖到GitHub Pages界面來, 而後選擇Choose a theme，隨便選擇一個主題以後。再次點擊setting來到GitHub Pages來，能夠發現出現了一個路徑，訪問該路徑，即可以訪問所設置的倉庫的界面了。
注: 由於我已經成功設置了。因此使用一個test測試倉庫，用於截圖和說明。實際倉庫名稱不要使用這種！！！

2.Hexo關聯Github

這個就和以前關聯倉庫的步驟差很少。

設置git身份信息

在hexo目錄右鍵git base 輸入:

git config --global user.name "你的用戶名"
git config --global user.email "你的郵箱"

在站點配置文件中加上倉庫地址，注意要加上.git
例如: git@github.com:xuwujing/xuwujing.github.io.git

3.發佈博客

首先新建一篇博文。
如:hexo new post 「Hello GitHub」
就會在\source\ _posts 將會看到 Hello GitHub.md 文件。
要發佈的博客放在在\source_posts路徑下。博客推薦使用markdown編輯，後綴名爲.md。

在發佈以前，先編輯該博客，寫點描述。

---
title: Hello GitHub
date: 2017-10-05 14:50:33
categories: hello
tags: [hello,haha]
---

而後輸入:

hexo g 生成靜態文件  
hexo s  本地預覽

成功以後以下圖:

而後輸入:hexo d 發佈到github上。
成功以後輸入youname.github.io路徑即可以看到該博文了。

4、註冊域名以及綁定到Github上

首先登陸阿里雲，搜索域名或者在控制檯找到域名。進入以後，首先查詢你要申請的域名，若是查不到就表示能夠註冊。域名註冊有不少後綴名，若是能夠，推薦.com的。

成功申請域名以後，將域名和Github綁定，Github的IP地址是192.30.252.153或192.30.252.154。因此咱們在填寫解析的時候，就解析這個地址。至於Github是怎麼找到咱們的倉庫的，這個在CNAME設置。
如下來自百度經驗
進入域名解析以後
點擊【新增解析】；依次填寫相應內容。
「記錄類型」選擇A；」主機記錄」填寫www；」解析線路」選擇默認；
「記錄值」填寫github提供的IP地址，192.30.252.153或192.30.252.154；
「TTL」默認10分鐘，本身能夠另行設置也可；
最後點擊【保存】。

域名成功解析以後，在你Github上面的倉庫中建立CNAME，而後輸入你申請域名的地址。而後你再輸入你的域名就能夠訪問Github博客了。