Hexo+Github 搭建個人博客(小白版圖文教程)

原 Blog 鏈接:Hexo+Github搭建個人博客(小白版圖文教程)

寫在前面

最近興趣使然,想要搭建一個個人博客。每次看到別人擁有自己的個人主頁都特別羨慕,一直想著自己有一個博客該有多好啊。就這樣折騰了兩天時間,看遍了網上各種各樣雜亂的教程,走了很多彎路,終于成功搭建出來了。等到結束的那一刻,心里很是開心。回想這一整個步驟,其實并不難,很簡單就能掌握。
由于自己是技術小白,很多大神寫的教程看了依舊操作錯誤。多么希望有人能手把手的教你每一步做什么。
有過經歷,才知道好的教程的重要性。因而我將自己建站的步驟詳細記錄下來,以供參考。希望后面想要建站的人不要走彎路了哦~

搭建環境

配置 Node.js 環境

下載 Node.js 安裝文件,根據自己電腦的位數,選擇下載32位或者64位的:http://nodejs.cn/download/
然后安裝下載的文件,保持默認設置就好了,一路點 Next ,很快就安裝完成了。


接著檢查一下 Node 是否安裝好,打開運行窗口,輸入 cmd ,打開命令行:

在命令行分別輸入以下命令:

node -v
npm -v

如果出現下圖界面,則說明 node 安裝正確。可以進入下一步了。

配置 Git 環境

去官網下載 Git 安裝文件:

接著進行安裝,如下圖,在 Windows Explorer integration 這一項及下邊的兩項都打上勾:


然后一直 Next 就可以了,安裝完成后同樣檢查一下 Git 是否正確安裝。

Github賬戶的注冊和代碼庫的創建

Github帳號注冊,打開鏈接:https://github.com/,申請一個 Github 帳號;


注冊好之后還需要確認郵箱,打開注冊的郵箱,確認注冊,然后進入下一步;
點擊頁面右上角自己的頭像,點擊下拉菜單的New repository,創建一個新的代碼庫:

代碼庫的名字最好與你的用戶名相同,格式為 yourname.github.io ,比如我的用戶名是 renkaitest,那我的代碼庫名即為 renkaitest.github.io

創建成功后出現下圖所示界面,點擊右邊的復制按鈕,復制這個地址:

配置 Github pages

隨便找一個目錄,右擊鼠標,選擇Git Bash Here,打開一個類似命令行的界面,輸入以下代碼:

$ git clone https://github.com/username/username.github.io
  • clone 后面的鏈接即就是上一步復制的那個鏈接,比如我的就是下面的代碼:
$ git clone https://github.com/renkaitest/renkaitest.github.io


然后輸入 cd 你的代碼庫名 ,例如 cd renkaitest.github.io ,也可以直接進入該目錄下的一個名為 renkaitest.github.io 的文件夾。

$ cd renkaitest.github.io
  • 然后輸入:
$ echo "Hello World" > index.html

接著輸入:

$ git add --all
$ git commit -m "Initial commit"
  • 這里會出現一個錯誤,是因為我們沒有設置Git的 user nameemail ,此時輸入以下代碼:
$ git config --global user.email "541638321@qq.com"
$ git config --global user.name "renkaitest"
  • 注意:上面的 nameemail 都要換成自己的郵箱和用戶名
  • 此時繼續執行以下代碼:
$ git commit -m "Initial commit"


下面 push 到你的代碼庫,輸入代碼:

$ git push -u origin master
  • 可能會彈出以下界面讓你登錄,使用 Github 帳號登錄即可。



此時你的 Github Pages 已經配置好了,打開 yourname.github,io 這個網址就能看到你的博客了,yourname 替換成你自己的用戶名。

Hexo安裝

找一個目錄,我是在 d:\Hexo 目錄下,鼠標右擊打開 Git Bash Here,輸入:

$ npm install hexo-cli -g


可能會看到一個 WARN,但是沒關系的,進入下一步。
輸入:

$ npm install hexo --save
  • 等一段時間,他安裝完之后檢查一下是否安裝成功,輸入:
$ hexo -v
  • 看到相關的版本信息則說明安裝成功。

Hexo配置

初始化 Hexo,首先需要找一個目錄,這個目錄即就是你的博客的所有文件存放的目錄,最好路徑不要太深,我選擇的是 D:\Hexo\blog 。在這個路徑下打開 Git Bash Here ,輸入代碼:

$ hexo init

然后輸入:

$ npm stall

這里 npm 會自動幫你安裝你需要的組件。
繼續輸入:

$ hexo g

生成博客。

輸入:

$ hexo s

啟動服務,會提示以下信息:

INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在瀏覽器打開 http://localhost:4000/ ,將會看到自己的 hexo 博客:

關聯 Hexo 與 Github Page

配置Git個人信息

如果你之前已經配置好git個人信息,請跳過這一個步驟,直接來到步驟2
設置Git的user name和email:(如果是第一次的話)

$ git config --global user.name "renkaitset"
$ git config --global user.email "541638321@qq.com"

生成密鑰

$ ssh-keygen -t rsa -C "541638321@qq.com"


輸入代碼后一直按回車就好了,不用自己定義目錄,生成的 ssh 會存放在 C:\Users\用戶名\.ssh 目錄下,如果找不到 .ssh 目錄,請在文件夾選項中顯示隱藏的項目

配置 SSH 密匙

進入 Github 網頁,點擊右上角自己的頭像,選擇 Settings

配置 SSH and GPG keys ,點擊 New SSH key


用 txt 打開剛才生成的 Key,復制到下圖所示區域,點擊 Add SSH key

配置 Deployment

打開博客目錄下的站點配置文件 _config.yml ,比如我的博客目錄是 D:\Hexo\blog,找到該目錄下的 _config.yml。打開他,在最末尾找到 Deployment ,然后按照如下修改:

deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master

上面的 yourname 都要替換成自己的用戶名,以我的為例:

deploy:
  type: git
  repo: git@github.com:renkaitest/renkaitest.github.io.git
  branch: master

這樣就配置好了,接下來就可以寫博客了。

發布博文

新建一篇博文,在博客存放的目錄里面 Git Bash Here ,執行命令:

$ hexo new post "我的第一篇博文"


然后就會在電腦的目錄下 D:\Hexo\blog\source\_posts 看到一個 我的第一篇博文.md 文件,使用 MarkDown 編輯這篇文章就可以了。
文章編輯好后,運行生成、部署命令。
但是此時還缺少一個擴展,因而不能部署,先要執行以下命令:

$ npm install hexo-deployer-git --save

如果沒有執行這個命令,將會提醒:

deloyer not found:git

現在開始執行:

$ hexo g   // 生成
$ hexo d   // 部署

也可以將這兩個命令一起執行:

$ hexo d -g    //在部署前先生成

若出現如下圖所示的信息 INFO Deploy done: git ,則表示部署成功,已經上傳到你的代碼庫。

此時訪問你的地址 https://yourname.github.io ,將會看到剛才寫的文章了。


注:我的主題是自己換過的,可能與你的顯示結果有所不同,做到這一步,你已經成功搭建了自己的博客。已經大功告成了!恭喜你~

總結

以后發布博文,就是以下的步驟:

  • 寫博文:
$ hexo new post "博文名字"
  • 生成博文:
$ hexo g
  • 部署博文:
$ hexo d
  • 由于網絡原因,進入你的網頁可能不會立即顯示最新的信息。過幾分鐘就好了~

原 Blog 鏈接:Hexo+Github搭建個人博客(小白版圖文教程)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容