1. 程式人生 > >使用hexo+github搭建個人微博——手把手教

使用hexo+github搭建個人微博——手把手教

文章有點兒長,不過解釋很清晰,有興趣的朋友請耐心看完,肯定能搭建成功!^_^

這裡因為使用的是windows系統,所以選擇了Hexo這個微博框架。
原來想使用與GitHub結合更有優勢的jekyll,但是由於系統的問題,就放棄了。
下來就如何來搭建吧!!!

先說說怎麼會想到搭建個人微博

工作多年,沒有認真整理過自己工作中的經驗,遇到的問題及解決方案。因此想著認真整理下過去到現在過程中的問題。廢話不多說,下來看看我是如何來搭建我的個人微博的。

前提條件

  • 需要有個github賬號。
    一般做為一個開發人員,github肯定是訪問過的,相信絕大多數開發人員會註冊擁有一個github賬號,因為這是全球知名的程式碼託管網站。全世界均可訪問到它。若還沒有可以到

    Github註冊。

  • 基本軟體NodeJS,Git,Hexo
    在機子上需要使用到NodeJS進行部署,安裝外掛等。下載NodeJs
    安裝Git,進入Git下載頁面選擇合適的版本進行下載。
    如果不清楚Hexo是什麼??她是一個快速,簡介,高效的部落格框架。更多詳情可以到Hexo官網讀下這個文件就知道了。O(∩_∩)O哈哈~

安裝完成Git及NodeJs後,那麼就可以開始準備安裝Hexo了。
開啟GitBash,使用npm命令來安裝Hexo程式。
gitbash命令列

回車,等待安裝,安裝完成後有如下資訊:
安裝提示
……..
提示最後

這樣表示Hexo安裝成功了。
到此,搭建個人微博需要的3個軟體就安裝完成了。

接下來就需要進行相關配置及外掛安裝了。
所有的操作均在GitBash命令列中進行操作。

建站

首先簡歷一個簡單的站,建立初始化一個簡單的資料夾。

$ hexo init myGitPages
$ cd myGitPages
$ npm install

這樣就可以新建所需要的檔案。
安裝完成後,可以看到如下的幾個主要檔案。
安裝結構

其中:
_config.xml 可以配置網站資訊。可以參考配置
package.json 應用程式資訊。有預設配置一些元件,可以自己根據需要新增或者移除。
scaffolds 模板資料夾。當新建文章時,Hexo會根據scaffold來建立檔案。
source 資原始檔夾,存放使用者資源的地方。
themes 主題資料夾。Hexo會根據主題來生成靜態頁面。

主題

Hexo可以有很多主題,在Github首頁搜尋框內輸入”hexo theme”,可以搜尋到很多主題,目前我使用的是litten的yilia主題。

可以在進入到建立的站點資料夾下(我的是myGitPages)下,下載yilia主題

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下載完成後,開啟站點個目錄下(myGitPages)的_config.xml檔案,修改其中的theme屬性成

theme: yilia

這樣就可以在釋出文章的手看到修改的主題,或者通過hexo server進行檢視。

釋出

釋出文章前一定要確認已經安裝了hexo-deployer-git外掛,否則無法正常發文章到git上的。

$ npm install hexo-deployer-git --save

來安裝git外掛。

到目前基本上需要的從部落格站點建立,到釋出所需要的軟體準備工作都就緒了。

PS:yilia要顯示所有文章還需要進行一個配置,下文會寫到。

在開始寫文章釋出之前可以,先查本地執行檢視Hexo執行情況,執行

$ hexo server

啟動伺服器。預設情況下,埠地址是4000。開啟瀏覽器,訪問:http://localhost:4000
檢視效果。若訪問出錯,沒有開啟頁面,那麼可能是埠被佔用導致。此時可以使用

$ hexo server -p 5000

修改埠,然後重新輸入埠號進行檢視。
若訪問成功,預設看到的是hello-wold.md(即source/_post資料夾下的預設建立檔案)檔案釋出後的效果。

準備工作結束,可以開始寫文章釋出

上述工作都結束後,可以進入到站點資料夾/source/_post/目錄下新建md檔案,使用Markdown標記語言寫一些內容。

Markdown標記語言使用比較簡單,可以在這裡學習簡單的使用,或者markdown.cn學習使用。

在寫完文章之後就需要將寫的文章部署到GitHub上去了。
來看下這個過程。

由於要釋出部落格到GitHub實際上使用了GitHub Pages功能,因此可以到這裡來檢視相關的介紹。其中詳細介紹了Pages概念,及如何建立自己的站點。

一下先簡紹下我自己的建立過程。

建立GitHub倉庫

建立倉庫,用以部署Hexo生成的部落格。如果還沒有GitHub賬號就需要註冊了。
有GitHub賬號的小夥伴可以到Github網站建立一個新倉庫,如下顯示。
新建倉庫

其中倉庫名有所講究,它必須是username.github.io ,這裡的username有兩種情況,其一是你的使用者名稱即註冊時使用的名稱,其二是組織名稱(此處組織名稱並未嘗試)。如下圖可以看下位置。
倉庫命名規則

Hexo釋出前需要配置_config.xml

在使用Hexo釋出部落格之前,當然還需要讓Hexo知道要釋出到什麼地方。

在站點根目錄下(myGitPages),找到並編輯_config.xml檔案,如下部分:

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

將新建的倉庫資訊及分支資訊配置到_config.xml,讓Hexo知道部署到GitHub的那個倉庫。

釋出

最後,就需要釋出了。可以在站點根目錄下(myGitPages)下執行一下命令:

$ hexo clean #清除原有生成的相關檔案
$ hexo generate #重新生成靜態頁面
$ hexo deploy #進行部署

在執行部署命令時,會彈出ssh密碼輸入確認框,輸入username.github.io倉庫密碼,點選OK即可進行順利釋出。

然後就去訪問你的個人站點吧。你會看到釋出的文章。

PS: 不同的主題可能在主題中還需要進行一定的配置,這個看個人喜好使用哪個主題,我使用的是yilia主題,其在初次檢視所有文章時會發現展示的不是文章列表。那麼按照主題作者提示進行配置後,重新部署就可以了。

  1. nodejs版本大於6.2(最新的nodejs肯定符合)。
  2. 在部落格根目錄下(不是yilia根目錄下)執行如下命令: npm i hexo-generator-json-content –save
  3. 在根目錄_config.xml檔案內配置:
        # 檢視yilia主題下所有文章配置
        jsonContent:
           meta: false
           pages: false
           posts:
              title: true
              date: true
              path: true
             text: false
             raw: false
             content: false
             slug: false
             updated: false
             comments: false
             link: false
             permalink: false
             excerpt: false
             categories: false
             tags: true

相關推薦

使用hexo+github搭建個人——手把手

文章有點兒長,不過解釋很清晰,有興趣的朋友請耐心看完,肯定能搭建成功!^_^ 這裡因為使用的是windows系統,所以選擇了Hexo這個微博框架。 原來想使用與GitHub結合更有優勢的jekyll,但是由於系統的問題,就放棄了。 下來就如何來搭建吧!!!

使用Node.js+Hexo+Github搭建個人客(續)

bsp 同步 歷程 str 基礎上 配置 搭建 創建 pan 一、寫在前面 在我的上一篇博客《使用Nodejs+Hexo+Github搭建個人博客》中,已經介紹了如何使用 Hexo 在 Github Pages 上搭建一個簡單的個人博客。該篇博文將在上篇博文的基礎上分別從

hexo+github搭建個人

環境 inf posit 基於 commit 安裝步驟 ilove 選擇 工具 1.下載git:https://git-scm.com/download   下載完以後是這樣的界面 接下來寫它的安裝步驟: 1)雙擊即可 2)點next進入如下界面 這裏什麽都不用修改,

使用hexo+GitHub搭建個人客的心得(含教程)

文章標題 無法訪問 重要 itl per 鏈接 fig.yml 註意 source Author Email Yaoyao Liu [email protected] 前言 對於廣大CS專業的學生和碼農,找一個地方寫博客,記錄一些編程、配置環境、閱讀論文

使用Hexo+Github搭建個人部落格

個人部落格:             技術部落格:http://messi1002.top/             閱讀部落格:http://www.read1002.t

Mac上基於hexo+GitHub搭建個人部落格(一)

之前一直使用部落格園和簡書,但是部落格園太複雜,而簡書雖然很簡單,但是沒什麼新鮮感,偶然得知hexo+github可以搭建自己的部落格,主要是可以自己定主題,還很simple,因此,找了個時間,自己搞了一下,感覺還可以,就自己弄了一個。 1 環境配置 Hexo官網上有搭建文件! 1.1 安

Mac下Hexo+GitHub搭建個人部落格

Mac下Hexo+GitHub搭建個人部落格 環境搭建 Node和Git安裝完成後,在終端下輸入下面的命令: sudo npm install -g hexo 初始化hexo 在使用者目錄下建立名為hexo的資料夾 mkdir hexo 然後cd到此目錄下

hexo+github搭建個人部落格(超詳細教程)

首先呢,先說一下吧,作為一個程式猿來說,大多的大牛都是使用的是msdn/github這些來交流技術,但是我後來發現csdn上面好多的大牛都已經摒棄csdn,自己搭建個人部落格進行發表文章記錄點滴了。

使用hexo+GitHub搭建個人部落格的心得(含教程)

Author Email Yaoyao Liu [email protected] 前言 對於廣大CS專業的學生和碼農,找一個地方寫部落格,記錄一些程式設計、配置環境、閱讀論文的心得體會是一個很常見的習

關於Git和Hexo+GitHub搭建個人部落格的記錄

前言 本來想通過vue.js+nodejs+mongo構建個部落格專案,一方面可以實踐新技術,另一方面也可以有自己的個人部落格,後來因為各種拖延,一直沒開始,(lll¬ω¬),突然看到朋友都在使用git, 也想試試手,剛好又看到大家都用github的pag

Linux環境下使用hexo+github搭建個人部落格

前言 相當前天刷知乎,看見別人的blog的是放在github上,最近也剛學會使用github,也想嘗試著將自己的blogs放在github上;昨天曾經Google查詢資料,嘗試著自己搭建但是無奈出現問題,最後一步安裝hexo失敗了;今天不甘心,又去查閱了hexo的官方文件。

hexo+github搭建個人部落格

v 大概可以分為以下幾個步驟 搭建環境準備(包括node.js和git環境,gitHub賬戶的配置) 安裝Hexo 配置Hexo 怎樣將Hexo與github page 聯絡起來 怎樣釋出文章 主題 推薦 主題Net的簡單配置 新增sitemap和fe

hexo+gitHub搭建個人獨立部落格(一)

最新資訊 谷歌的一篇文章則著重說明了新成立的指導小組將如何“讓MDN成為最好的Web參考文件,幫助我們更好地進行Web開發”。指導小組目前的成員包括微軟、谷歌、Mozilla、三星和W3C。值得注意的是,蘋果公司並沒有參與這次釋出宣告。 前言 一直想要

Hexo+Github搭建個人部落格(一)

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

使用hexo+github搭建免費個人客詳細教程

sts nts 最好 comm strong 文章內容 包括 repo 電腦 Windows環境下Git安裝、配置SSH key、安裝node.js npm、安裝Hexo及配置、發布博客 前言 使用github pages服務搭建博客的好處有: 全是靜態文件,訪問速度

手把手你用Hexo+Github 搭建屬於自己的部落格

歡迎關注我的微信公眾號,掃一掃下方二維碼或搜尋微訊號 stormjun,即可關注。 目前專注於 Android 開發,主要分享 Android開發相關知識和一些相關的優秀文章,包括個人總結,職場經驗等。 閒聊 在大三的時候,一直就想搭建屬於自己的一個

Hexo+Github搭建

rdquo 這樣的 gin .html his node js can stop markdown 作者:桂。 時間:2017-06-10 08:08:04 鏈接:http://www.cnblogs.com/xingshansi/p/6974267.html

GitHub搭建個人客 地址: https://douzujun.github.io/

技術分享 tps 圖片 https -s image eight 個人 img 搭建博客地址: https://douzujun.github.io/ 博客模板:https://github.com/douzujun/douzujun.github.io 顯示效果:

通過github搭建個人

github上 無需 sts 個人 只需要 htm 記錄 技術 tail 今天突發奇想,想用GitHub搭建一個個人博客,就大概學習了一下,特此記錄。 其實非常簡單,首先要知道,這裏是通過GitHub Pages進行搭建的,什麽?不知道什麽是GitHub Pages?Gi

github搭建個人部落格 hexo d無效

在github上搭建個人部落格,hexo已經部署完畢,本地訪問也沒有問題,但最後hexo d就是push不上去 檢查了deploy,看不出有什麼問題,後面百度了一下,發現有個巨坑,type: git中間必須有個空格!!!! deploy:   type: git   reposit