1. 程式人生 > >基於windows平臺Git+GitHub+Hexo搭建個人部落格(一)

基於windows平臺Git+GitHub+Hexo搭建個人部落格(一)

之前最開始是瞭解並搭建的jekyll框架,然後又從網上百度了一下,很多部落格都支援Hexo,覺得Hexo更好用一些,也有很多支援jekyll的,自己確實不知道是jekyll和Hexo哪個更好用一些,所以又搭建了一下Hexo的環境。
我在這裡對我自己的操作步驟進行總結了一下,教程也可以參考Hexo官方文件,寫的比較詳細。

什麼是Hexo?

簡單來說, Hexo是一款快速、簡易、強大的基於Node.js的靜態部落格框架,支援Markdown語法。在安裝Hexo之前,必須得安裝Node.js。
下面就介紹一下搭建的步驟。當然,在此之前,您已經申請了GitHub賬號以及本地已經安裝了Git。

安裝Node.js

node.js的安裝過程可以參考菜鳥教程,步驟很詳細。
安裝完成之後,可以測試一下是否安裝成功:開啟cmd,輸入

node -v

出現版本資訊則證明安裝成功。

安裝Hexo

Node安裝完成後,就開始安裝Hexo。
在cmd命令列下,輸入

npm install -g hexo-cli

回車,安裝可能會有些慢,請耐心等待。安裝成功後,輸入

hexo version

回車,出現版本資訊則安裝成功。

建立一個部落格

新建一個資料夾myblog(作為部落格專案的名字,可以隨便起),我這裡建在了E盤。cmd命令進入剛才新建的資料夾下,輸入

hexo init //初始化部落格專案

回車,初始化過程中也請耐心等待。
初始化完成後,輸入

npm install

回車,myblog資料夾下會生成如下目錄:

部落格目錄

hexo generate //生成靜態檔案,也可輸入 hexo g

完成後,輸入:

hexo server //啟動本地服務,也可輸入 hexo s

預設本地服務的網址為http://localhost:4000/ ,開啟瀏覽器輸入網址,如果看到部落格首頁,則成功。
blog首頁

感覺超級超級炫酷!

上傳至GitHub

  1. 登入進入到您自己的GitHub網站首頁,新建一個版本庫(New Repository)

    newRepository


    版本庫的名字需是username.github.io的格式,比如我的使用者名稱是zrxJuly,所以我的版本庫名稱為zrxJuly.github.io。Description是描述您的版本庫的資訊的,也可以不寫。之後直接點選Create repository就OK了,這樣,GitHub上的版本庫就建立完成。當時我做的時候,在Setting中還設定了githubpages,一直報錯,css樣式顯示不出來,所以先不要在setting中選擇主題了。遠端庫建立告一段落。

  2. 下面回到您自己的本地myblog資料夾下,用編輯器開啟名為_config.yml的檔案,找到deploy配置項,將內容改為:
deploy:
  type: git #注意 : 後邊一定要加空格,下同。 
  repository: [email protected].com:username/username.github.io.git
  branch: master #分支名稱

程式碼塊第三行repository的地址來源:您剛建立遠端庫的地址

修改完成後,再修改一個地方,還是在_config.yml檔案下,找到URL部分,將url和root如下設定:

url: https://username.github.io 
root: /

url修改也可參考Hexo的中文文件
儲存檔案並關閉。
3. 本地myblog資料夾下,在這裡開啟GitBash(右鍵—->GitBash Here),輸入以下命令回車:

npm install hexo-deployer-git --save #不執行此命令無法deploy到遠端。

執行完後,輸入:

hexo g //重新生成靜態檔案

回車。基礎步驟完成後,將本地建立的部落格deploy到遠端,釋出到GitHub上:

hexo d #也可寫為hexo deploy

完成後,瀏覽器中輸入您剛才設定的url:https://username.github.io 若和本地開啟頁面一樣則成功。
對於大神來說,很快地就會搭完,so easy的。我想說,搭個部落格好心酸,不過這樣自己一總結感覺好簡單,但是中間就是愛出很多問題,比如deploy到遠端的時候,本地是沒有一點問題的,但是遠端css樣式就是載入不出來,網上找了很多方法,試了之後,最後終於好了,執行成功那一刻真的是好激動。您若根據我寫的這樣的方法建立過程中有什麼問題的話,可以留言討論^.^

相關推薦

基於windows平臺Git+GitHub+Hexo搭建個人部落

之前最開始是瞭解並搭建的jekyll框架,然後又從網上百度了一下,很多部落格都支援Hexo,覺得Hexo更好用一些,也有很多支援jekyll的,自己確實不知道是jekyll和Hexo哪個更好用一些,所以又搭建了一下Hexo的環境。 我在這裡對我自己的操作步驟

基於windows平臺Git+GitHub+Hexo搭建個人部落

  去年的時候使用Hexo搭建了一個部落格,當時主題使用的是JackMan,雖說這個theme是挺好看的了,但是自己感覺還少點東西,所以自從搭建好後就一直沒用,筆記還是放在CSDN上。前兩天偶然發現了一位大神的部落格,當時一眼就喜歡上了這個主題,瀏覽網站後知道大神的部落格也是用Hex

使用GitHub + Hexo搭建個人部落- 安裝

最近在同事那瞭解到,使用GitHub + Hexo可以搭建自己的個人部落格,很早之前就想自己搞個網站做部落格,由於種種原因一直沒有實現 現在可以使用開源的工具搞個部落格還是蠻不錯的,這裡和大家分享下。 1. Hexo簡介 GitHub的簡單介紹,大家可以參考我前面的部落格,

Hexo+Github搭建個人部落

前言 經常在檢視技術文章時跳轉到大佬們的個人部落格,看起來很酷很炫。也想自己搭一個。嗯,於是有了這篇部落格。 基礎概念 個人以為,學習使用一項技術之前首先要簡單瞭解下它的基本概念,不要一上來就幹~沒前戲是不行的。所以我們不妨先來看一下Hexo 和 Gi

SpringBoot2.x|從零開始搭建個人部落

專案Init 通過IDEA開啟專案後,創建出以下的檔案結構。 |- - blogs        |- - src               |- - main                      |- - java     

基於github+hexo搭建個人博客window

dep 環境 https theme .net attribute deploy window posit 0x01 環境搭建 1、Node.js環境 下載Node.js安裝文件:https://nodejs.org/en/download/ 根據系統選擇相應安裝包下載,安

github + hexo 搭建個人部落教程

Github Pages介紹 本來用於介紹託管在Github上上的專案,由於它的空間免費穩定,因此適合用來搭建部落格。 每個帳號只能有一個倉庫來存放個人主頁,且倉庫的名字必須是使用者名稱/ username.github.io。你可以通過http://username.github.io

GitHub+Hexo搭建個人部落

1.hexo介紹 看到同學使用github+hexo搭建了屬於自己的部落格,眼饞,弄了好久了,感覺有點眼高手低了,一直沒來得及寫一下自己搭建的流程,心血來潮,下邊來簡單介紹下搭建流程,也方便自己以後review,也可以和大家共享交流技術問題。 Hexo

使用Github+Hexo搭建個人部落

01 用 GitHub + Hexo 建立你的第一個部落格02 [Hexo]部署部落格及更新博文03 Hexo(3)-安裝自己喜歡的主題04 Hexo(4)-安裝多說評論框05 Hexo(5)-購買並繫結域名

使用github搭建個人部落初級

不能再初的初級版了,我保證!!我也是百度跟著別的大大的步驟一步步來的,寫到部落格記錄下,免得以後忘記。 步驟: 1、登入賬號後,點選下圖按鈕,新建倉庫。 2、填寫倉庫的屬性,倉庫名格式:你的github使用者名稱.github.io, 個人部落格簡介和描述檔

搭建個人部落論壇的建議

        相信不少人希望搭建自己的部落格或者論壇作為自己的一個程式程式碼或者學習記錄存放的地方,還有可能地話就是弄一些比較有意義的論壇方便大家交流。博主給大家一些個人建議,僅供參考。         對於搭建個人部落格和論壇,我們比較熟悉的是discuz和wordpr

flask搭建個人部落——骨架、資料庫

編寫骨架程式: manage.py config.py app/main/__init__.py app/auth/__init__.py app/email.py app/models.py 設計資料庫models: 簡單的建立四個table:roles,users,c

使用node.js搭建簡易的個人部落

node.js和express應用框架的啟動 首先需要在電腦上安裝node.js的開發環境,安裝好之後,就可以使用它了。這裡我使用的開發工具是webStorm,然後使用 npm install --save express命令來安裝express模組;

vue+express:搭建個人部落2

上次更到mutations和actions,今天繼續寫 總覽模組 總覽模組就是顯示所有文章和連結,樣式和上次分享的文章類似。我覺得沒有新增一個返回按鈕好不科學,於是我添加了一個。 大概的感覺就是這樣。 遇到的問題就是 1. 使用getter

雲伺服器搭建個人部落

搭建雲伺服器就可以讓你的專案釋出在廣闊的網際網路世界,而不僅僅侷限於本地訪問,連線網路即連通世界。 工欲善其事必先利其器!請先安裝需要的軟體,配置好相關執行工具。 準備工具: 【雲伺服器:推薦學生黨購買騰訊雲伺服器,憑學生身份可以1元購/月,福利福利福利福利 https:/

如何使用hugo搭建個人部落:修改主題:顏色,字型,佈局

上一篇博文中談到了如何在本地使用hugo預覽特定主題crisp,本文介紹主題的顏色,字型,佈局的修改。 修改主題側邊欄顏色 crisp主題的側邊欄預設是白色,如果想改個顏色咋辦? 到github倉庫 https://github.com/penn201

基於 Hexo + GitHub Pages 搭建個人部落

參考 markdown一些語法 1、 --- title: Hello Blog --- 2、連結[CSDN](https://blog.csdn.net/owenfy) 3、大小標題 ## Quick Start ### Create a new post 4、中間

GitHub、Node.js和Hexo搭建個人部落

GitHub、Node.js和Hexo搭建個人部落格 1.Git 1.1、下載 下載地址:https://git-scm.com/downloads 1.2、Git安裝 雙擊安裝,點選Next 填寫安裝路徑,點選Next 選中安裝內容,點選Next

使用Hexo + GitHub Pages 搭建個人部落

一.前言   之前是在CSDN上寫部落格的,但是無奈其廣告滿天飛,還有因為個人不太喜歡CSDN部落格裡的一些東西,加上看到很多技術大牛都有自己的個人部落格,於是乎!便想著搭建一個自己的個人部落格。其實之前寫部落格還是追求於有很多人來看,以滿足自己這樣的一個慾望,後來慢慢覺得寫部落格無非是記錄一下自己成長的歷

Github Pages + Hexo 搭建個人部落

本文原地址 開始前瞭解了自己適合那種方式搭建個人部落格的幾種高效方案 一、前置知識 GitHub Github 官網 廖雪峰教程- Git 教程 個人 Git 筆記 二、開始搭建 阮一峰教程-搭建一個免費的,無限流量的 Blog---- githu