詳解:如何在Github上搭建自己的博客主頁

前言

好的博客主頁不僅能夠分享自己的技術知識,更能夠展示博主的技術實力。

本文將結合作者的實踐,爲讀者講解如何在GitHub上利用Hexo,快速搭建一個可以在互聯網上自由訪問的博客主頁。

作者的博客主頁:https://jiangjiaheng.github.io/

技術棧

1.GitHub:允許用戶在自己的代碼倉庫創建一個博客主頁。
2. Git:代碼倉庫管理技術,連接GitHub與本地代碼。
3. Nodejs:搭建博客主頁的技術基礎,本地創建運行博客主頁。
4. Hexo:基於nodejs的一個博客框架,可以快速生成博客主頁。

大綱

  1. 技術環境準備。
  2. 創建GitHub博客倉庫。
  3. Hexo生成博客主頁。
  4. Git上傳博客主頁。
  5. 訪問GitHub博客主頁。

實例講解

1. 技術環境準備

1. GitHub、Git

首先你需要在GitHub上註冊一個賬號,然後通過Git建立連接,具體操作過程請參考這篇文章。

2. nodejs、hexo

進入nodejs的官網https://nodejs.org/en/download/,選擇自己電腦適合的版本下載即可。

在這裏插入圖片描述

安裝完成後,在命令行中輸入node -v查看nodejs是否安裝成功。

在這裏插入圖片描述

安裝完nodejs後,在命令行中輸入以下命令,安裝hexo。

 npm install -g hexo

安裝完成後,輸入hexo查看是否安裝成功。

在這裏插入圖片描述

完成上述準備工作後,我們就可以開始搭建自己的博客了。

2. 創建GitHub博客倉庫

在GitHub中創建新項目。

在這裏插入圖片描述

在項目中輸入項目名稱:Owner+.github.io,例如你GitHub註冊名稱爲Zhangsan,那麼你這個項目名稱就是:zhangsan.github.io

GitHub會自動檢測到github.io,並識別爲博客主頁。

在這裏插入圖片描述

填寫完項目信息後,點擊創建,生成博客主頁。

這個時候,你就可以直接在瀏覽器輸入:https://zhangsan.github.io進行訪問了。

3. Hexo生成博客主頁

在電腦中新建一個空白文件夾,在該文件夾下打開命令行,輸入:hexo init生成hexo項目。

在這裏插入圖片描述

輸入:hexo s開啓本地運行,打開瀏覽器訪問 http://localhost:4000 即可看到內容。

在這裏插入圖片描述

4. Git上傳博客主頁

接下來,我們要做的就是把hexo生成的主頁上傳到GitHub上,打開_config.yml文件。

在這裏插入圖片描述

如圖所示配置git信息,也就是把GitHub的博客主頁倉庫配上去,就可以了。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: [email protected]:zhangsan/zhangsan.github.io.git
  branch: master

這個文件中還有其他的配置信息,例如名稱、主題等等,可以自己慢慢去探索,這裏不多說了。

完成配置後,執行npm裏面的配置命令。

在這裏插入圖片描述

  1. clean:刷新項目,清除生成的文件;
  2. build:生成上傳文件;
  3. server:開啓本地預覽服務;
  4. deploy:上傳生成的文件到GitHub上。

依次執行:cleanbuilddeploy命令即可完成hexo博客主頁上傳。

5. 訪問GitHub博客主頁

上傳成功後,直接訪問自己的博客地址,就可以了。

在這裏插入圖片描述

結語

以上就是本文的全部內容了,感謝你的閱讀,文中部分技術要點受限於文章篇幅,並沒有展開講解,如果你有什麼疑問或者建議,歡迎你隨時留言,互相討論。

最後,祝工作順利,生活幸福。

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章