Hexo + Github-Pages 從零開始搭建個人博客

經(jīng)過各種找資料,踩過各種坑,終于搭建好了個人博客,安裝hexo是3.2.2版本,hexo不同的版本,配置稍微有些不一樣。由于本人使用的是Mac,下面的都是針對Mac的,Windows下的配置類似。博客原文


Hexo

hexo是一個基于Node.js的簡單,快速,強(qiáng)大的靜態(tài)博客框架,可以方便的生成靜態(tài)網(wǎng)頁托管在github上,作者是來自臺灣的 Tommy Chen。特點(diǎn):

  • 不可思議的快速 ─ 只要一眨眼靜態(tài)文件即生成完成
  • 支持 Markdown
  • 僅需一道指令即可部署到 GitHub Pages 和 Heroku
  • 已移植 Octopress 插件
  • 高擴(kuò)展性、自訂性
  • 兼容于 Windows, Mac & Linux

配置環(huán)境

1.安裝Node.js ,用來生成靜態(tài)頁面的。到Node.js官網(wǎng)下載相應(yīng)平臺的最新版本,一路安裝即可。npm是隨同Node.js一起安裝的包管理工具,能解決Node.js代碼部署上的很多問題

2.安裝Git,把本地的hexo內(nèi)容提交到github上去,需要和Hexo建立連接,下面會有說到

3.申請GitHub,是用來做博客的遠(yuǎn)程創(chuàng)庫、域名、服務(wù)器之類的,github賬號沒有的話直接申請就行了,跟一般的注冊賬號差不多,SSH Keys,看你自己了,可以不配制,不配置的話以后每次對自己的博客有改動提交的時候就要手動輸入賬號密碼,配置了就不需要了,怎么配置我就不多說了,網(wǎng)上有很多教程

安裝Hexo

Node和Git都安裝好后,即可開始安裝Hexo 具體可以查看Hexo中文文檔

$ npm install -g hexo

這里可能安裝失敗,可能權(quán)限不夠,在命令前加 sudo
安裝成功以后,就可以創(chuàng)建blog。首先創(chuàng)建一個文件夾,如MyBlog,這是你的博客根目錄,用于存放hexo的配置文件,然后進(jìn)入MyBlog里初始化Hexo。

$ hexo init

需要等待一段時間,成功后會顯示:INFO Start blogging with Hexo! 這時的MyBlog 目錄下有以下這些文件

.
├── _config.yml
├── node_modules
├── package.json
├── source
├── scripts
├── scaffolds
|   ├── drafts
|   ├── posts
|   └── page
└── themes
  • _config.yml:全局配置文件,大多數(shù)的設(shè)置都在這里 配置項都需要空一格
  • node_modules: node的一些模塊組件
  • package.json:應(yīng)用程序數(shù)據(jù),指明hexo的版本等信息,類似于一般軟件中的關(guān)于按鈕
  • scaffolds:layout模板文件目錄,其中的md文件可以添加編輯 drafts:草稿文章 posts:發(fā)布文章
  • scripts:擴(kuò)展腳本目錄,這里可以自定義一些javascript腳本
  • source:文章源碼目錄,該目錄下的markdown和html文件均會被hexo處理。該頁面對應(yīng)repo的根目錄,404文件、favicon.ico文件,CNAME文件等都應(yīng)該放這里,該目錄下可新建頁面目錄
  • themes:主題文件目錄

_config.yml 用到的比較多

 # Hexo Configuration
  ## Docs: https://hexo.io/docs/configuration.html
  ## Source: https://github.com/hexojs/hexo/

  # Site 站點(diǎn)信息:定義標(biāo)題,作者,語言
  title: 這里是你博客的標(biāo)題
  subtitle: 子標(biāo)題
  description: 個人介紹
  author: 筆名
  language: zh_CN 
  timezone: Asia/Shanghai

  # URL Url訪問路徑
  ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  url: http://yoursite.com
  root: /
  permalink: :year/:month/:day/:title/
  permalink_defaults:

  # Directory 文件目錄:正文的存儲目錄
  source_dir: source
  public_dir: public
  tag_dir: tags
  archive_dir: archives
  category_dir: categories
  code_dir: downloads/code
  i18n_dir: :lang
  skip_render:

  # Writing 寫博客配置:文章標(biāo)題,文章類型,外部鏈接
  new_post_name: :title.md # File name of new posts
  default_layout: post
  titlecase: false # Transform title into titlecase
  external_link: true # Open external links in new tab
  filename_case: 0
  render_drafts: false
  post_asset_folder: false
  relative_link: false
  future: true
  highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

  # Category & Tag   目錄和標(biāo)簽:默認(rèn)分類,分類圖,標(biāo)簽圖
  default_category: uncategorized
  category_map:
  tag_map:

  # Date / Time format 時間和日期格式:
  ## Hexo uses Moment.js to parse and display date
  ## You can customize the date format as defined in
  ## http://momentjs.com/docs/#/displaying/format/
  date_format: YYYY-MM-DD
  time_format: HH:mm:ss

  # Pagination   分頁設(shè)置:每頁顯示數(shù)量
  ## Set per_page to 0 to disable pagination
  per_page: 10
  pagination_dir: page

  # Extensions   插件和皮膚:換皮膚,安裝插件
  ## Plugins: https://hexo.io/plugins/
  ## Themes: https://hexo.io/themes/
  theme: landscape 默認(rèn)主題

  # Deployment   部署配置:github發(fā)布,type類型為git
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
  type:

接下來就是配置_config.yml,以及一些 Hexo 指令操作

Hexo常用命令

  hexo new postName       #新建文章 在source/_posts 下生成
  hexo new page pageName  #新建頁面 在source/pageName 下生成
  hexo deploy             #將.deploy目錄部署到GitHub 簡寫指令:hexo d 
  hexo generate           #生成靜態(tài)頁面至public目錄 簡寫指令:hexo g 
  hexo server             #開啟預(yù)覽訪問端口(默認(rèn)端口4000,'ctrl + c'關(guān)閉server)簡寫指令hexo s 
  hexo clean              #清除所有靜態(tài)頁面和緩存數(shù)據(jù)  

默認(rèn)在source/_posts 存在了hello-world.md 可以直接輸入 hexo generate 生成靜態(tài)網(wǎng)頁
這時目錄下多了 public 這是生成靜態(tài)網(wǎng)頁內(nèi)容目錄。可以輸入 hexo clean 清除

生成靜態(tài)網(wǎng)頁后,就能啟動本地服務(wù),可以進(jìn)行文章預(yù)覽調(diào)試,輸入 hexo server 默認(rèn)是4000端口,在服務(wù)器啟動期間,Hexo 會監(jiān)視文件變動并自動更新,您無須重啟服務(wù)器。如果是第二次會提示,Port 4000 has been used. Try other port instead 這時可以輸入指定的端口 hexo server -p xxxx 如 7681 輸出:

INFO  Start processing
INFO  Hexo is running at http://localhost:7681/. Press Ctrl+C to stop.

瀏覽器輸入http://localhost:7681 就可以預(yù)覽頁面

屏幕快照 2016-12-28 下午1.53.15.png

這是正常的情況,可能中間會有一些錯誤提示

Hexo Server 錯誤

Hexo 3.0 把服務(wù)器獨(dú)立成了個別模塊,您必須先安裝 hexo-server才能使用,需要執(zhí)行命令:

 $ npm install hexo-server --save

頁面顯示白板和Cannot GET

原因:

由于2.6以后就更新了,我們需要手動配置些東西,我們需要輸入下面三行命令,看情況添加 sudo

$ npm install hexo-renderer-ejs --save

$ npm install hexo-renderer-stylus --save

$ npm install hexo-renderer-marked --save

部署到github

在github建立與你用戶名對應(yīng)的倉庫,倉庫名必須為【your_user_name.github.io】。然后建立關(guān)聯(lián)

安裝 hexo-deployer-git

npm install hexo-deployer-git --save

_config.yml 配置文件中修改參數(shù),在文件最下面,一個正確的部署配置中至少要有 type 參數(shù),例如:

  type: git
  repo: <repository url> 庫(Repository)地址
  branch: [branch] 分支名稱。如果您使用的是 GitHub 或 GitCafe 的話,程序會嘗試自動檢測。
  message: [message] 自定義提交信息 (默認(rèn)為 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})  
  

Hexo 提供了快速方便的一鍵部署功能,讓您只需一條命令就能將網(wǎng)站部署到服務(wù)器上。

hexo deploy

執(zhí)行這條命令后會生成一個隱藏文件夾.deploy_git ,可以輸入ls -a 打開查看,hexo會將生成的public文件夾復(fù)制到.deploy_git文件夾中

文章

sources/_posts 目錄下打開默認(rèn)的Hello-Word.md,文章一般頭部格式:

title: xxxx                    #文章的標(biāo)題,這個才是顯示的文章標(biāo)題,其實(shí)文件名不影響
date: 2015-09-01 20:33:26      #用命令會自動生成,也可以自己寫,所以文章時間可以改
categories: xxx                #自定義文章的分類
tags: xxx                      #tag,為文章添加標(biāo)簽,方便搜索
 ---
    

注意點(diǎn)

  • 如果在博客文章列表中,不想全文顯示,可以增加 ``, 后面的內(nèi)容就不會顯示在列表。
  • Markdown標(biāo)題標(biāo)準(zhǔn)寫法寫法需要在"#"和后面字符之間加一個空格,如果不加空格 有些引擎就解析不了

Markdown

  • Windows下可以使用 MarkdownPad2
  • Mac 建議使用 Mou 這款免費(fèi)且十分好用的 Markdown 編輯器
  • Web 端上,推薦簡書這款產(chǎn)品

插件

可以在package.json中查看已經(jīng)安裝的插件

添加RSS

 $ npm install hexo-generator-feed --save
  

然后,到博客目錄 /public 下,會有atom.xml生成 再到_config.yml 里配置一下

   feed:
        type: atom      #type 表示類型, 是 atom 還是 rss2.
        path: atom.xml  #path 表示 Feed 路徑
        limit: 20       #limit 最多多少篇最近文章
         

添加Sitemap

Sitemap 的提交主要的目的,是要避免搜索引擎的爬蟲沒有完整的收錄整個網(wǎng)頁的內(nèi)容,所以提交 Sitemap 是能夠補(bǔ)足搜索引擎的不足,進(jìn)而加速網(wǎng)頁的收錄速度,達(dá)到搜尋引擎友好的目的。

hexo-generator-sitemap

 $ npm install hexo-generator-sitemap --save
    

同樣在_config.yml 里配置一下

 sitemap:
     path: sitemap.xml
     #path 表示 Sitemap 的路徑. 默認(rèn)為 sitemap.xml.
     

對于國內(nèi)用戶還需要安裝插件 hexo-generator-baidu-sitemap, 顧名思義是為百度量身打造的. 安裝

 $ npm install hexo-generator-baidu-sitemap --save

然后在_config.yml里配置一下

  baidusitemap:
      path: baidusitemap.xml
            

添加搜索

 $ npm install hexo-generator-search
  

其他插件

Plugins·hexojs/hexo

主題

默認(rèn)的是landscape,這里有大量的主題列表

安裝喜歡的主題

$ git clone <repository> themes/themeName

需要在_config.yml 中更改theme: themeName 更改主題后需要重新 hexo g 生成頁面
在主題的_config.yml文件里面可以修改頭像,友情鏈接等等,配置需要展示的頁面元素,一般里面都會有介紹

評論

在Hexo中,默認(rèn)使用的評論是國外的Disqus,不過因為國內(nèi)的”網(wǎng)絡(luò)環(huán)境”問題,我們改為國內(nèi)的多說評論系統(tǒng)。
需要設(shè)置 short_name:字段,這個字段為你多說填寫的站點(diǎn)名字,比如我的域名:chenao0727github.duoshuo.com,那么我的short_name: chenao0727github

404頁面

GitHub Pages 自定義404頁面非常容易,直接在根目錄下創(chuàng)建自己的404.html就可以。但是自定義404頁面僅對綁定頂級域名的項目才起作用,GitHub默認(rèn)分配的二級域名是不起作用的,使用hexo server在本機(jī)調(diào)試也是不起作用的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,406評論 6 538
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,034評論 3 423
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,413評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,449評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,165評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,559評論 1 325
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,606評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,781評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,327評論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,084評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,278評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,849評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,495評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,927評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,172評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,010評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,241評論 2 375

推薦閱讀更多精彩內(nèi)容