技術乾貨｜使用GitHub+Hexo快速搭建自己的技術博客

來源：http://bbs.itheima.com:801/thread-436990-1-1.html

1、你可能會遇到過這種情形, 開發中遇到一個問題不知道怎麼去解決, 然後去百度找答案, 嘗試各種解決方案, OK終於解決了, 沒過多久又碰到同樣的一個問題, 已經忘記之前是怎麼解決的了, 又要花很長的時間去百度了. 如果我們把遇到的問題都自己總結出來做成筆記, 那麼在我們整理這個筆記的過程中可能就會細化這個問題, 從而加強記憶掌握這個問題, 而不是說遇到問題只是百度解決問題下次再遇到再百度的一個過程, 而是應該遇到問題-->解決方案-->總結記住問題解決方案, 這才是我們能不斷學習進步的一個過程.

2、當我們堅持去做筆記做總結, 不僅方面我們自己日後去複習去查找, 如果把我們的總結放到網上也會幫助很多遇到同樣問題的人, 可以替他們也節省很多時間, 日積月累我們的文章寫的多了, 也會慢慢的提高我們在網絡上的一個知名度.

做自己的技術博客要不要花錢呢？

很多人一想到做網站就會想到說要買域名買服務器等等, 一年又得不少錢吶, 其實不用, 做一個技術博客可以完全免費的, 我們可以借用Github給我們提供的免費倉庫來存放我們的博客項目, 也可以使用Github給我們提供的靜態頁面地址來訪問到我們的博客, 所以都是免費的, 如果你想看起來高大上一些, 那你可以花錢買一個自己喜歡的域名, 那也花不了多少錢.

如何開始搭建自己的技術博客呢？

軟件安裝

安裝Nodejs 下載安裝Nodejs 因為我是在windows下操作的所以下載的是windows的安裝版 安裝的過程非常簡單, 直接下一步即可

安裝Git 下載安裝Git Git的安裝也是直接下一步即可

安裝Hexo 如果你已經安裝了Nodejs和Git, 接下來就可以使用命令來安裝Hexo了 因為是使用命令在線安裝的所以一定要有網絡連接 打開CMD窗口輸入　：npm install -g hexo-cli

初始化Hexo 安裝Hexo之後打開一個文件夾, 用來初始化Hexo, 這個文件夾作為你的博客的主目錄 然後使用CMD命令行進入到這個目錄下執行初始化命令：hexo init

接著執行npm install命令

運行Hexo 在前面步驟都準備完畢的時候執行命令hexo s -g然後在瀏覽器中輸入http://localhost:4000即可查看已安裝默認主題的Hexo

更換默認主題

安裝主題

Hexo默認的主題可能不是你想要的, 那你就可以去Hexo官方收集的主題裡選擇自己喜歡的主題，也可以自己去GitHub上面自己找主題。 我使用的主題是NexT，在此感謝所有給Hexo提供主題的作者，給我們提供了又好看又好用的主題。 下面就針對我使用的

NexT

主題的配置做一個介紹, 其他主題的配置也都大同小異, 一般主題都會有對應的配置說明, 你可以根據自己選擇的主題去修改 你可以直接從GitHub上面下載然後解壓到你Hexo目錄的themes目錄下面，也可以使用終端克隆，如果你熟悉 Git 建議你使用克隆的方式，之後的更新可以進入到主題文件夾下通過

來快速更新，而不用再次下載壓縮包替換, 注意目錄層級, 如果解壓後的主題有多級目錄, 建議把主題文件放到主題文件夾下面的根目錄, 也可以給主題文件夾重命名

那要怎麼從默認的主題切換到剛下載的這個主題呢 找到Hexo根目錄下面的 _config.yml 文件，將theme字段設置為你的主題名稱，如theme: next並把之前的主題名使用#號註釋掉, 這個主題的名字一定要和你theme目錄下的那個主題文件夾名稱一致

修改後在終端輸入Hexo s -g，然後刷新瀏覽器重新訪問http://localhost:4000就可以看到你安裝的新主題啦

配置主題

雖然已經切換到你新下載的主題了, 但是我們還需要對主題做一些定製化的修改 這裡說兩個配置文件, 一個是Hexo根目錄下的_config.yml文件, 一個是主題文件夾下面的_config.yml

文件, 兩個配置文件同名, 暫且先叫配置一文件和配置二文件 打開配置一文件, 裡面可以配置一些和你這個技術站點相關的信息, 還有如果你裝了一些插件的話也要在這個配置文件中配置, 這個配置非常簡單, 採用鍵值對的形式, Hexo官方也給出了非常詳細的配置說明https://hexo.io/docs/configuration.html 再說一下配置二文件, 這個是針對主題做修改的, 可以參考你下載的主題說明, 由於每個人選擇的主題不同, 我這裡不做詳細說明了

發佈文章

當你配置好主題之後, 那麼重點就來了, 怎麼發佈文章呢 首先打開CMD命令窗口, CD到Hexo的根目錄下, 執行下面這兩條命令 hexo new page "tags"hexo new page "categories" 這兩條命令是創建分類和標籤文件夾的, 執行完後會在根目錄下的source目錄中創建tags文件夾和categories文件夾, 裡面分別會有一個index.md文件 分別打開這兩個文件就行修改 categories下的index.md內容如下

---
title: #categories
date: 2018-05-01 10:24:00
type: "categories"
comments: false
---

tags下的index.md內容如下

---
title: #tags
date: 2018-05-01 10:24:00 

type: "tags"
comments: false
---

這些都準備好了之後就可以寫文章了, 文章格式必須是markdown的這個沒得說 但是在每篇文章內容之前有一個固定的頭格式是這樣的

---
title: 博客模板 
date: 2015-09-26 15:09:16 
updated: 2015-09-26 15:09:16
categories: 分類名稱  
tags: [標籤, 標籤, 標籤]
comments: false 
description: 你對本頁的描述
photos:
 - 圖片的網絡地址 
---

以上字段可以根據自己需要添加或者忽略不寫, 一般title categories tags是要有的, 其他的可以不寫 在下面就是你的文章內容了, 如果你的文章內容較多, 只是想在首頁文章列表中顯示文件的前面一小段描述可以使用 這個標籤前面的內容就會顯示, 後面的內容點擊閱讀全文的時候才會顯示, 如果你想給你的文章弄上目錄可以使用

部署Github

接下來我們就要把這個本地的博客發佈到網上了, 這樣其他人才可以訪問的到, 我們使用的是GitHub, 如果你還沒有Github的賬號得先去申請一個賬號, 然後登陸新建一個倉庫

倉庫的名稱是用戶名.github.io

創建完成之後點擊Settings

如果你購買了域名的話可以在這裡設置, 如果沒有域名默認的訪問路徑就是你的倉庫名稱

現在就可以訪問一下你的博客地址了, 會顯示下面的這個界面

接下來我們就要把本地的博客上傳到Github了 點擊頭像選擇Settings

選擇SSH and GPG keys

創建新的SSH key

接下來說怎麼去創建上圖中的Key 在你的博客的根目錄右鍵打開一個git窗口。

先設置你的用戶名和郵箱 git config --global user.email "你的郵箱地址"git config --global user.name "你的英文用戶名" 生成密鑰 ssh-keygen -t rsa -C "你的郵箱地址"

找到密鑰文件的保存位置並且打開, 因為是隱藏文件所以必須顯示隱藏文件才能看到。

打開文件夾裡面有兩個文件, 打開id_rsa.pub並複製其內容

然後再回到Github把複製的內容粘貼過去

點擊添加按鈕返回添加完成頁面

可以使用下列命令來測試SSH有沒有添加成功

然後再返回剛才自己建的倉庫

複製SSH的地址

打開博客根目錄下面的_config.yml文件在最下方粘貼

然後打開命令行執行命令hexo d -g即可發佈到Github

如果出現上述錯誤, 可以使用npm install --save hexo-deployer-git命令解決 再次執行命令hexo d -g

再次訪問你的Github(用戶名.github.io)地址就能看到你發佈的內容了 接下來就可以盡情的寫文章了

寫在後面

404頁面

404頁面我使用的是騰訊公益, 直接複製下面代碼保存成.html文件放到source目錄下重新部署到GitHub即可

 
 
 
 
 <link>
  
 

圖床

在寫markdown的時候避免不了的要插入很多的圖片, 這個時候就要使用到圖床了, 推薦大家使用七牛圖床

綁定域名

域名申請推薦大家去GoDaddy申請, 然後綁定到Github Pages, 綁定方法也很簡單, 在source目錄下新建一個文件命名為CNAME沒有擴展名, 內容就直接寫上你申請的域名即可, 然後重新部署到Github

推薦大家使用DNSPod, 具體可以參考Godaddy註冊商域名修改DNS地址

其他

還可以自己添加統計, 分析, 搜索, 自定義掛件, 插件, 提交搜索引擎.....

閱讀更多 Java面經 的文章

關鍵字: Node.js 乾貨 解決