基於Github的個人博客快速搭建教程

總算下定決心要把博客搭建起來了,之前一直因爲想找工作的原因,沒有整。現在清閒下來了,再加上最近心態放鬆了,不太想學習了,所以想着找點東西玩兒。

個人博客的搭建是Hexo與Github配合進行搭建。通過Hexo你可以輕鬆地通過Markdown編寫文章,除了支持Markdown本身的語法之外,還可以通過Hexo提供的標籤插件來快速插入特定形式的內容。本文主要分爲三個部分,一個是博客搭建準備工作,二是博客界面的修改和裝飾,三是使用hexo寫博客。

博客搭建準備工作

相關技術平臺介紹:

  • Hexo是一款基於Node.js的靜態博客框架,依賴少、易於安裝使用,可以方便的生成靜態網頁託管在github和heroku上,是搭建博客的首選框架。同時hexo的創建人是臺灣人,對中文的支持還是很友好的。
  • git是開源的分佈式版本控制系統,用於敏捷高效地處理項目,個人博客搭建好了,就需要使用git同步到github上。然後說一下git和github的區別,git是一款免費開源的分佈式版本控制系統,而github是用git做版本控制的代碼託管平臺。

注意點:在Hexo中有兩份主要的配置文件,其名稱都是_config.yml。其中,一份在站點根目錄下,主要包含Hexo本身的配置;另外一份位於主題(就是你下載的theme主題)目錄下,這份配置由主題的作者提供,主要用於配置主題相關的選項,前者稱爲 $ \color{blue}{站點配置文件},後者稱爲\color{red}{主題配置文件}$

git下載安裝以及綁定github賬號

可以參看廖雪峯老師的Git教程,然後從Git官網下載Git 。安裝好Git之後需要將github賬號與其綁定。在菜單中搜索Git Bash,設置user.name和user.email配置信息:

git config --global user.name "你的GitHub用戶名"
git config --global user.email "你的GitHub註冊郵箱"

生成ssh密鑰文件

ssh-keygen -t rsa -C "你的GitHub註冊郵箱"

然後直接三次回車就行,默認不需要設置密碼

然後找到生成的.ssh的文件中的id_rsa.pub密鑰,將內容全部複製。打開Github_Settings_keys頁面,新建new SSH Key。Title是標題,任意填就行,將剛剛複製的id_rsa.pub內容複製進去,最後點擊Add SSH Key。在Git Bash中檢測Github公鑰設置是否成功,輸入ssh [email protected]

設置github密鑰的原因是,通過非對稱加密的公鑰與私鑰來完成加密,公鑰放置在github上,私鑰放置在自己的電腦上,github要求每次推送代碼都是合法用戶,所以每次推送都需要輸入賬號密碼驗證推送用戶是否是合法用戶,爲了省去每次輸入密碼的步驟,採用了ssh,當你推送的時候,git就會匹配你的私鑰跟github上面的公鑰是否是配對,如果配對就說明你是合法用戶。

安裝Node.js

hexo是基於Node.js,Node.js的下載地址 ,選擇合適的下載安裝即可。

安裝hexo

hexo是個人博客網站的框架,這裏需要先新建一個文件夾(文件夾命名最好是英文,不然容易出現不可預知的錯誤)。hexo框架和以後發佈的網頁都在這個文件夾中,創建好這個文件夾,然後進入,右鍵使用Git Bash Here進行hexo的安裝。在命令行裏面輸入下面五條語句

  • npm install -g hexo-cli
  • hexo init
  • nmp install
  • hexo generate
  • hexo server

第一條語句用來安裝hexo(安裝完之後,打開剛纔新建的文件夾),在文件夾中使用Git Bash Here輸入第二條命令,用來自動在文件夾中下載搭建網站需要的文件。第三條語句用來安裝依賴包,第四條語句用來生成靜態文件。第五條語句用來啓動本地服務器。

默認情況下,就可以通過訪問http://localhost:4000/,可以看到本地建立的博客,但是要建立一個在線博客還需要將github和本地博客進行連接。

創建github repository遠程倉庫

創建也比較簡單,但是這個地方有一個坑需要注意,稍後來講。建立一個username.github.io名字類型的倉庫(這裏需要usernamegithub\textcolor{red}{注意username是你github的用戶名,必須一致}),倉庫建立好之後,需要在倉庫的Setting中找到\textcolor{red}{} GithubPageSourcemasterbranch\textcolor{red}{Github Page中的Source,將其修改爲master branch} 。這些解決方案主要來自於hexo搭建Github博客上傳後,網頁顯示404問題解決方案

部署本地文件到github

遠程倉庫和本地倉庫都創建好了,然後就是建立將本地代碼提交遠程倉庫的路徑,用於連接本地倉庫和遠程倉庫。需要的操作是:打開之前建立好的hexo文件夾,然後在裏面找到_config.yml文件,現在只需要更改文件最下面的三行代碼。在最下面更改原先的代碼爲:

deploy:
  type: git
  repository: http://github.com/username/username.github.io.git
  branch: master

需要\textcolor{red}{注意}的是:

  • 每一個: 之後必須要有空格
  • 注意第二個username之後的後綴
  • branch之後跟的master的原因是之前咱們更改了Github Page的Source來源

配置好之後執行:

$ hexo generate (或者輸入 hexo g)
$ hexo deploy (或者輸入 hexo d)

至此,博客搭建算是完成了,而且已經發布到github上了,別人也可以訪問到了,在瀏覽器上訪問http:\\username.github.io就可以看到自己的博客。

建議:

  • 在每次部署github之後,可能要過一會才能顯示最新的頁面,也就是說輸入完hexo deploty 之後,建議一開始調試頁面的時候在本地服務器上操作,可以節省時間

  • 每次在部署之前最好先clean一下

    $ hexo clean
    $ hexo generate
    $ hexo deploy
    

博客界面的修改和裝飾

在網上有許多很好看的Hexo主題,大家可以到這個知乎問題裏面自行挑選。Hexo的主題都是放在github上的。Hexo的主題安裝也非常簡單,只要將主題文件拷貝到站點目錄的themes目錄下,然後修改配置文件就行了。

下載主題

在git終端窗口下,定位到Hexo站點目錄下(也就是你之前建立的個人博客文件夾下),這裏比如下載Next主題

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

如果你對Git不太熟悉,可以在線閱讀《Pro Git》進行學習。

啓用主題

下載完畢之後,打開站點配置文件 (_config.yml),找到theme字段,並將其值改爲next(或者是你下載下來的主題的文件夾名字)

然後驗證主題更換之前,需要使用hexo clean清除hexo的緩存。

主題設定

主題設定,在許多主題的手冊上都有教程,大家可以看Next的這個教程更改自己需要的效果,包括設置Scheme,語言,菜單,側欄,頭像,暱稱,站點描述以及集成常用的第三方服務。

使用hexo寫博客

新建文檔以及編輯

在個人博客的文件夾裏面打開Git 終端窗口,執行下面的命令

$ hexo new myfirstblog

執行了上述命令在./hexo/source/_posts 路徑下新建一個 myfirstblog.md的文件。打開這個文件,你會看到

---
title: myfirstblog.md
date: 2018-10-16 18:11:25
tags:
---

這些直接生成的內容,是用來設置Markdown文檔在被解析爲靜態網頁文件時的相關配置,其中tags下面可以添加相關的文章標籤。比如我給這篇文章貼上技術 的標籤

---
title: myfirstblog.md
date: 2018-10-16 18:11:25
tags:
 - 技術
---

除了tags這個參數可以設置,我們還可以對文章進行分類。使用categories 給文章分類(相當於給文章新建一個文件夾進行分類設置),這個和tags不一樣。

生成文件的時候需要按照下面的命令將markdown文檔生成相應的靜態文件。

$ hexo clean
$ hexo generate

遇到的坑

  • 標籤,分類,主頁這些,在主題配置文件中需要按照這樣的格式來寫(不過準確來說,應該按照你當時所在版本的格式要求來寫),開始我看的網上的寫法都是這樣寫的tags: /tags沒有後面的那個斜線,然而!!!,那就是錯的,必須要加斜線。我後來總結了,應該是版本變動的原因,所以按照下載到的版本來寫。

    menu:
      home: /    
      categories: /categories/ 
      about: /about/    
      archives: /archives/ 
      tags: /tags/ 
      #sitemap: /sitemap.xml
      #commonweal: /404/
    

參考文獻:

Next官方使用文檔

Hexo+Github Page搭建個人博客

Hexo教程:(三)使用Hexo寫博客

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