零基礎用GitHub page搭建靜態部落格

傳達室老大爺發表於2021-08-09

這是我參與8月更文挑戰的第10天,活動詳情檢視:8月更文挑戰

本文適合剛開始學習程式設計的IT小白。

學IT到Github。個人部落格是一個有上進心碼農的標配,今天作為IT的小白的我,分享一下在github如何搭建個人部落格。本文是基於Github Page和Jekyll,Github page是一個免費開源的靜態網站託管服務,內容和樣式基於你的git倉庫。

總共5步即可:

  1. 註冊Github賬號之後,新建一個repo(倉庫),命名,選擇visibility為公開public或隱私private,建立預設的readme.md檔案

image.png

  1. 啟用該repo的GitHub Pages ?. 這樣Github就可以從你的倉庫中獲取部落格內容,並用你的倉庫名釋出頁面。在repo主頁點選 "Settings". 在左側“GitHub Pages”選單, 在右側Source部分,從下拉選單選擇 main branch.

image.png

  1. 建立首頁: 可以通過index檔案或README.md檔案為主頁新增內容. Githubpage首先會檢索index file.如果沒有該檔案,才會用README.md檔案來建立主頁. index檔案擴充套件性更強,md檔案更簡單,建議新人使用readme.md來定義首頁。
    • 這裡需要點選編輯reame.md檔案,以下是我的部落格首頁檔案內容,供參考:
---
title: "Welcome to my blog"
---

I'm glad you are here. I plan to talk about ...
my learning of coding!
my name is Snow Li
I'm new comer of github
複製程式碼
  1. 配置部落格:GitHub page使用Jekyll內容管理系統來生成部落格頁面,Jekyll會將你在github倉庫裡的內容,樣式整合成一個靜態網站,供伺服器來託管,可以說是github page的核心。
    • 在倉庫中新建_config.yml檔案,來儲存站點配置,包括:theme, and title, author等資訊,下面是我的一些設定,供參考:
title: Snow's blog
author: Sihan Li
email: sihan.li@welho.me
description: > # Snow Li's Self-learning IT blog
# social links
juejin_username: 傳達室老大爺 
github_username:  hotbloodyoungman 
show_excerpts: true # set to false to remove excerpts on the homepage
theme: minima
複製程式碼
  1. 架子就搭完了,現在新增部落格內容,建立檔案:_posts/YYYY-MM-DD-title.md 其中“_post” 是部落格內容的目錄,Jykell會自動讀取裡面的檔案,注意檔名格式要規範,title是多個單詞的,使用橫線-連結

image.png

  • 開啟檔案,加上一些描述性的後設資料,以下是我部落格第一篇文章的內容,供參考:
---
title: "Welcome to my blog"
date: 2019-01-20
---
這是我的第一個部落格,你可以在這裡寫任何內容
這是最基本的標題和建立時間,還可以加上layouts, categories, 具體參見:https://jekyllrb.com/docs/frontmatter/

複製程式碼

到這裡,你就可以通過setting中的pages裡的連結來檢視自己的部落格了!

設定個人域名

如果你覺得GitHub的域名不夠逼格的話,只需要3步就可以設定自己的私人域名:

  1. 註冊一個域名,這裡就不展開了,非常簡單。
  2. 找到你的域名註冊商,編輯域名解析,為你的部落格域名配置CNAME
    • 主機記錄值是我們上一步在 github 中配置的 blog.huaxiangxiaobao.com(二者必須一致)

    • 記錄值則是我們的repository名稱hotbloodyoungman.github.io.

image.png

  1. 還是在pages設定裡面,往下拉至custom domain,輸入自己的部落格域名
    • github page預設是 http 協議訪問,圖中 Enforce HTTPS 是強制 https 訪問的意思。這樣更安全,瀏覽器也不會蹦安全提示,建議勾選

image.png

大功告成,開始你的程式設計學習之旅吧!


參考資料:

搭建免費的個人部落格(一)——簡單靜態頁面型 jingwei.link/2019/08/25/…

First Week on GitHub lab.github.com/githubtrain…

相關文章