【2018更新】小白獨立搭建博客--Github Pages和Hexo簡明教程

時間 2019-11-09

標籤 2018更新獨立搭建博客 github pages hexo 簡明教程欄目 Git 简体版

原文原文鏈接

【更新至2018/1/10】html

首先歡迎各位來參觀個人博客：Ryane's Blog前端

Github地址：https://github.com/ryanlijianchang/ryanlijianchang.github.ionode

CSND地址：http://blog.csdn.net/ljcitworldgit

摘要：這是一篇有關如何使用Github Pages和Hexo搭建本身獨立博客的詳盡教程，裏面介紹瞭如何使用和配置Hexo框架，如何將Hexo部署到本身的Github項目中，域名註冊，以及域名的綁定，還有我在搭建本身博客過程當中所遇到的各類困難。程序員

前言

我是一名安卓入門開發者，但，我只是入門！並且我對網站開發以及前端的知識幾乎是零基礎，因此在本身剛接觸這個東西的時候，我像不少人同樣，都是上網找教程，可是要知道，**那都是程序員的教程。**因此對於我這個網站技術小白來講，真是很難受，因此藉此機會寫一篇讓小白看得懂的教程。若是你是一個小白並且又想作本身的博客，能夠，請跟着個人腳步，我會帶你真真正正作一個屬於你本身的博客。github

若是你還不知道你爲何要作一個博客，推薦你看：《我爲何寫博客》數據庫

入門門檻

必須耐得住折騰。
刻苦的學習精神和耐心。

關於Github

1、Github的優勢

GitHub是基於git實現的代碼託管。git多是目前最好用的版本控制系統了，很是受歡迎。
GitHub能夠無償使用，而且快速穩定。
Github上面的世界很精彩，用久了你的眼界會開闊不少。

2、什麼是Github Pages

Github Pages能夠被認爲是用戶編寫的、託管在github上的靜態網頁。npm

3、爲何要使用Github Pages

能夠綁定你的域名(但暫時貌似只能綁定一個)。
簡單快捷，使用Github Pages能夠爲你提供一個免費的服務器，免去了本身搭建服務器和寫數據庫的麻煩。

安裝Node.js

在 Windows 環境下安裝 Node.js 很是簡單，僅須到官網下載安裝文件並執行便可完成安裝。像個人是Windows 64位，直接下載安裝，無腦下一步就好了，不須要配置環境變量。ubuntu

安裝Git

去Git官網根據你的電腦參數，下載對應版本。windows

下載完成，經過在命令行輸入 git version 查看是否安裝成功，有輸出版本號說明安裝成功。

鼠標郵件菜單裏就多了Git GUI Here和Git Bash Here兩個按鈕，一個是圖形界面的Git操做，一個是命令行，咱們選擇Git Bash Here。

安裝教程：如何在windows下安裝GIT
Git入門教程：Pro Git（中文版）
Git基本操做：

Hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。

1、Hexo安裝

桌面右鍵鼠標，點擊Git Bash Here，輸入npm命令便可安裝

npm install hexo-cli -g

npm install hexo-deployer-git --save

第一句是安裝hexo，第二句是安裝hexo部署到git page的deployer，兩個都須要安裝。

以下圖即安裝完成。

2、Hexo初始化配置

建立Hexo文件夾

安裝完成後，根據本身喜愛創建目錄（如F:\Blog\Hexo），直接進入F:\Blog\Hexo文件夾下右鍵鼠標，點擊Git Bash Here，進入Git命令框，執行如下操做。

$ hexo init

安裝 Hexo 完成後，Hexo 將會在指定文件夾中新建所須要的文件。Hexo文件夾下的目錄以下：

本地查看效果

執行下面語句，執行完便可登陸localhost:4000查看效果

hexo generate
hexo server

登陸localhost:4000，便可看到本地的效果以下：

將博客部署到Github Pages上

那麼如今本地的博客已經搭建起來了，可是咱們只能夠經過本地鏈接查看咱們的博客。那麼咱們如今須要作的就是把本地的博客發佈到服務器上，讓別人也能夠鏈接咱們的博客，而Github Pages就幫我完成了這件事情。可是Github Pages的代碼就是寄存在Github上面的。那麼接下來咱們須要在Github上面建立一個新的項目。

1、註冊Github帳戶

訪問Github首頁
點擊右上角的 Sign Up，註冊本身的帳戶

2、建立項目代碼庫

註冊完登錄後，咱們就建立一個咱們本身的Github Pages項目。點擊New repository。
建立要點以下：

3、配置SSH密鑰

配置Github的SSH密鑰可讓本地git項目與遠程的github創建聯繫，讓咱們在本地寫了代碼以後直接經過git操做就能夠實現本地代碼庫與Github代碼庫同步。操做以下：

第一步、看看是否存在SSH密鑰(keys)

首先，咱們須要看看是否看看本機是否存在SSH keys,打開Git Bash,並運行:

$ cd ~/. ssh

檢查你本機用戶home目錄下是否存在.ssh目錄

若是，不存在此目錄，則進行第二步操做，不然，你本機已經存在ssh公鑰和私鑰，能夠略過第二步，直接進入第三步操做。

第二步、建立一對新的SSH密鑰(keys)

$ssh-keygen -t rsa -C "your_email@example.com"
#這將按照你提供的郵箱地址，建立一對密鑰
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]

直接回車，則將密鑰按默認文件進行存儲。此時也能夠輸入特定的文件名，好比/c/Users/you/.ssh/github_rsa

接着，根據提示，你須要輸入密碼和確認密碼（說到這裏，若是你很放心，其實能夠不用密碼，就是到輸密碼的地方，都直接回車，因此每次push就只管回車就好了。所謂的最安全的密碼，就是沒有密碼哈哈）。相關提示以下：

Enter passphrase (empty for no passphrase): [Type a passphrase]
Enter same passphrase again: [Type passphrase again]

輸入完成以後，屏幕會顯示以下信息：

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com

第三步、在GitHub帳戶中添加你的公鑰

運行以下命令，將公鑰的內容複製到系統粘貼板(clipboard)中。

clip < ~/.ssh/id_rsa.pub

接着：

登錄GitHub,進入你的Account Settings.

2.選擇SSH Keys

3.粘貼密鑰，添加便可

第四步、測試

能夠輸入下面的命令，看看設置是否成功，git@github.com的部分不要修改：

$ ssh -T git@github.com

若是是下面的反饋：

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

沒關係張，輸入yes就好，而後會看到：

第五步、設置用戶信息

如今你已經能夠經過SSH連接到GitHub了，還有一些我的信息須要完善的。 Git會根據用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來作權限的處理，輸入下面的代碼進行我的信息的設置，把名稱和郵箱替換成你本身的，名字根據本身的喜愛本身取，而不是GitHub的暱稱。

$ git config --global user.name "ryanlijianchang"//用戶名
$ git config --global user.email  "liji.anchang@163.com"//填寫本身的郵箱

第六步、SSH Key配置成功

本機已成功鏈接到github。

4、將本地的Hexo文件更新到Github的庫中

第一步、登陸Github打開本身的項目 username.github.io

第二步、打開以後，點擊SSH，選擇SSH類型地址

第三步、複製地址

第四步、打開你一開始建立的Hexo文件夾（如F:\Blog\Hexo），用記事本打開剛文件夾下的_config.yml文件

第五步、在配置文件裏做以下修改，保存

第六步、在Hexo文件夾下執行：

hexo g
hexo d

或者直接執行

hexo g -d

執行完以後會讓你輸入github的帳號和密碼，輸入完後就能夠登陸咱們本身的部署在Github Pages服務器上的博客了。對應的地址是 username.github.io(個人是：ryanlijianchang.github.io)。

假如這時候，報錯 ERROR Deployer not found: git，那麼就是你的deployer沒有安裝成功，你須要執行以下命令再安裝一次：

npm install hexo-deployer-git --save

這樣，你再執行hexo g -d，你的博客就部署到Github上了。

第七步、在瀏覽器上輸入本身的主頁地址

在瀏覽器上輸入Github Pager爲咱們生成的外鏈（例如個人是：https://ryanlijianchang.github.io/，而你的只須要把你的github用戶名替換掉這個連接中的ryanlijianchang，由於個人用戶名是這個，那麼你本身的專屬博客地址就是：https://[您的用戶名].github.io/）便可看到本身的博客了。

固然，每個人均可以經過這個地址訪問到你的博客了。

美化本身博客

那麼如今咱們的博客已經掛在了Github服務器上面，別人已經能夠經過地址來登錄咱們的博客了，可是咱們這時就有了新的需求，就是本身的博客並很差看，那怎麼辦的？這很簡單，要知道不少前端開發者在Hexo框架下開發了不少的主題給咱們使用，咱們只須要把他們的主題克隆過來，而後經過修改配置文件便可達到咱們所須要的效果。

那麼咱們應該怎麼修改呢？

1、進入Hexo的官網主題專欄

2、挑選咱們喜歡的主題

能夠看到有不少主題給咱們選，咱們只要選擇喜歡的主題點擊進去，而後進入到它的github地址，咱們只要把這個地址複製下來(例如我是選擇：hexo-theme-next這個主題)

3、克隆主題

再打開Hexo文件夾下的themes目錄（F:\Blog\hexo\themes），右鍵Git Bash，在命令行輸入:

git clone https://github.com/iissnan/hexo-theme-next(此處地址替換成你須要使用的主題的地址)

下載中，等待下載完成：

4、修改Hexo配置文件

下載完成後，打開Hexo文件夾下的配置文件_config.yml

修改參數爲：theme: hexo-theme-next

5、部署主題，本地查看效果

返回Hexo目錄，右鍵Git Bash，輸入

hexo g
hexo s

打開瀏覽器，輸入 http://localhost:4000/ 便可看見咱們的主題已經更換了。

6、若是效果滿意，將它部署到Github上

打開Hexo文件夾，右鍵Git Bash，輸入

hexo clean   (必需要，否則有時由於緩存問題，服務器更新不了主題)
hexo g -d

7、打開本身的主頁，便可看到修改後的效果

更多修改效果請查看對應主題的說明文檔，點擊此查看本主題(Next)對應的說明文檔。

在博客寫文章

1、用hexo發表新文章

$ hexo n "文章標題"

其中個人家爲文章標題，執行命令 hexo n "個人家" 後，會在項目 \Hexo\source_posts 中生成 個人家.md 文件，用編輯器打開編寫便可。

固然，也能夠直接在\Hexo\source_posts中新建一個md文件，我就是這麼作的。寫完後，推送到服務器上，執行如下命令便可在咱們的站點看到新的文章。

$ hexo g #生成
$ hexo d #部署 # 可與hexo g合併爲 hexo d -g

2、用Markdown寫文章

咱們注意到在 \Hexo\source_posts 文件夾下存放着咱們的文章，它們的格式都是以.md格式結尾的，沒錯，Hexo也是支持Markdown語法的，因此當咱們須要寫具備格式化的文章時，咱們可使用支持Markdown語法的編輯器進行文章編譯，而後保存文件到 \Hexo\source_posts 文件夾下便可。

複製進去以後，只要執行

$ hexo d -g

推送到咱們的Github倉庫便可。

那麼什麼是Markdown？

Markdown 是一種輕量級的「標記語言」，它的優勢不少，目前也被愈來愈多的寫做愛好者，撰稿者普遍使用。看到這裏請不要被「標記」、「語言」所迷惑，Markdown 的語法十分簡單。經常使用的標記符號也不超過十個，這種相對於更爲複雜的HTML 標記語言來講，Markdown 可謂是十分輕量的，學習成本也不須要太多，且一旦熟悉這種語法規則，會有一勞永逸的效果。