Hexo + Github Pages, 創(chuàng)建個人博客

前言

想要有一個自己的博客,拿來記平時的筆記邪乍。但是又不想去博客平臺注冊賬號,平臺那么多对竣,選擇也是件讓人頭大的事情庇楞。又不想自己買服務(wù)器專門搭建一個博客服務(wù)。怎么辦呢否纬,用Hexo + Github Pages吕晌,就可以很容易的擁有一個自己的博客了。

簡介

Hexo是一款Node.js開發(fā)的博客框架临燃。它快速睛驳、簡潔烙心、高效,支持Markdown語法乏沸,是一款簡單易用的博客框架淫茵。既可以部署到自己的服務(wù)器,又可以生成靜態(tài)資源文件屎蜓,放在Github Pages當作個人博客使用成箫,無需自己買服務(wù)器部署颖榜。

Github Pages支持創(chuàng)建自己的靜態(tài)頁面康栈,并提供Github的二級域名訪問述吸。

安裝和使用

Node.js + npm

安裝Node.js和npm請詳見Node.js官網(wǎng)Hexo官網(wǎng)也有相關(guān)的介紹說明扼劈。這里我們從Hexo的安裝開始介紹驻啤。

Git

因為我們使用 Github Pages 服務(wù)做博客,所以 git 是必須安裝的荐吵。
如果沒有安裝的話骑冗,去 git 官網(wǎng)下載安裝即可。
mac 可以直接用 brew install git 命令安裝先煎。
Git 的使用教程不再此文范圍內(nèi)贼涩,所以不做介紹。推薦官網(wǎng)手冊廖雪峰的Git學習教程薯蝎。廖大神寫了對Git的介紹到安裝到使用詳細且易懂的教程遥倦。

Hexo

安裝Hexo
$ sudo npm install hexo-cli -g
用Hexo創(chuàng)建一個博客項目
$ hexo init <blog-folder>
啟動博客服務(wù)

hexo init 創(chuàng)建好項目之后,進入項目目錄cd <blog-folder>
然后輸入命令hexo server 或者 hexo s便可以啟動博客服務(wù)占锯。

$ hexo server

啟動成功后有提示:

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

瀏覽器訪問 http://localhost:4000便可以看到博客頁面了袒哥。

創(chuàng)建一篇文章
$ hexo new <filename>

此命令執(zhí)行完之后,會在生成 source/_posts/filename.md 文件消略。用編輯器打開文件堡称,開始編輯文檔內(nèi)容,這便是博客文檔的編輯了艺演。推薦使用 Markdown 語法却紧。

創(chuàng)建一個頁面
$ hexo new page <page-folder-name>

此命令執(zhí)行完之后,會在生成 source/<page-folder-name>/index.md 文件胎撤。

Next主題安裝

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

關(guān)于博客主題晓殊,博主選了很久決定用 Next,簡潔大方不花哨哩照。
這里給一個其他主題介紹的傳送門:

  1. 我是知乎的傳送門,請點我
  2. 我是 github 的傳送門,請點我

配置

Hexo 配置

Hexo的配置文檔為 _config.yml
這里介紹幾個主要的配置項:

Site基本信息配置:
# Site
title: 你的博客的名字
subtitle: 你的博客的subtitle
description: 你的博客的描述
author: 你的名字
language: zh-Hans # 語言挺物,默認是en懒浮。這個是簡體中文
timezone: 時區(qū) # 默認是電腦的時區(qū)
favicon: /favicon.ico  # 把favicon.ico文件拷貝至source下飘弧,這個默認的路徑识藤。
avatar: /avatar.jpg # 把你的頭像圖片拷貝到source目錄下。名字你自己定次伶。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 你的 Github Pages 訪問地址痴昧。
博客主題配置:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 配置你的主題為 next
博客部署配置項:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git # 我們要用 Github Pages,所以這里 type 為 git
  repo: 你的 github repository 的地址 # 查看code冠王,有一個綠色的 clone or download, 我選的是https
  branch: master

點擊這里可以帶你去Hexo官方的配置文件介紹

Next 配置

Next的配置文檔為 themes/next/_config.yml
同樣這里只介紹介個主要的配置項:

menu 設(shè)置
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/ # 啟用分類
  tags: /tags/ # 啟用標簽
  archives: /archives/ # 啟用歸檔赶撰, hexo 按時間歸檔
  about: /about/ # 啟用關(guān)于

要啟用這些 menu,需要 hexo 創(chuàng)建好這幾個 page:

$ hexo new page categories # 生成 source/categories/index.md
$ hexo new page tags # 生成 source/tags/index.md
$ hexo new page about # 生成 source/about/index.md

archives是 hexo 會默認有的

創(chuàng)建好之后這些page后柱彻,需要對tags和categories下的index.md稍作修改

source/categories/index.md:
---
title: categories
date: 2017-08-11 16:49:50
type: "categories"
comments: false
---

source/tags/index.md: 
---
title: tags
date: 2017-08-11 16:49:50
type: "tags"
comments: false
---

修改scaffolds/post.md, 添加上

tags:
categories:

這兩項豪娜,然后用 hexo new 創(chuàng)建文章后,在tags: 后添加 tag哟楷,在 categories: 后添加分類瘤载,就行了。單個 tag 或 分類卖擅,可以直接寫鸣奔,如果是多個的話,寫成[a,b,c]這種形式惩阶。

博客樣式設(shè)置
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

Next官方給出了四種可選方案挎狸,博主把這四個都試了一遍,決定用第四個断楷,Gemini锨匆。啟用的方式就是去掉注釋,把不要的注釋掉脐嫂。

文章折疊
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

默認是顯示全文的统刮。官方給出兩個解決方案,一個是將 auto_excerpt 里的 enable 設(shè)置為 true账千。但是這種方式不推薦侥蒙,會將你文章的格式去掉。官方推薦的做法是匀奏,在你文檔中想要折疊提示"閱讀全文"的地方加上

<!--more-->
開啟文章版權(quán)聲明
# Declare license on posts
post_copyright:
  enable: true # 把這個項設(shè)置為true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

開啟之后鞭衩,會在每一篇文章中顯示版權(quán)聲明。

開啟social network links
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social: # 去掉這里的注釋
  #LinkLabel: Link
  GitHub: 你的github主頁地址

博主只加了github主頁地址娃善。其他的參見配置文檔的說明论衍。

點擊這里可以帶你去Next官方的主題設(shè)置教程

創(chuàng)建 Github Pages

首先要有一個 Github 賬號。然后創(chuàng)建一個 repository聚磺。你可以在 Github 上看到 綠色的 new repository坯台。

點擊之后進入創(chuàng)建頁面:

取一個名字,勾選 Initialize this repository with a README瘫寝,然后點擊綠色的創(chuàng)建蜒蕾。

創(chuàng)建完之后稠炬,到 Settings 選項:

到 Github Pages 那一項去:

選擇 master branch ,然后點擊 save咪啡。然后你會看到一個你 Pages 主頁的地址首启。這就是你以后的博客訪問地址了。

部署至 Github Pages

前面配置章節(jié)講了如何配置 Hexo 的 repo撤摸,所以這時候毅桃,當我們準備好時,先執(zhí)行 hexo clean 清掉之前的數(shù)據(jù)和頁面准夷,再執(zhí)行 hexo generate 生產(chǎn)新的頁面, 最后執(zhí)行部署命令 hexo deploy钥飞,便成功部署到了 Github Pages。
即:

$ hexo clean
$ hexo generate
$ hexo deploy

Github Pages 有短時間的緩存衫嵌,所以稍等片刻代承,訪問我們的 Github Pages 頁面,就可以看到博客頁面啦渐扮。

尾聲

至此论悴,我們便成功擁有了一個屬于自己的博客。
可以將博客項目提交到 Github 管理墓律,作為自己的博客備份膀估,這樣在可以使用網(wǎng)絡(luò)和電腦的地方我們都可以方便的寫博客了。

此外耻讽,除了 Github 提供 Pages 這樣的服務(wù)察纯,國內(nèi)的 Coding 也提供有 Coding Pages 可以用哦。

點此查看我的個人博客

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末针肥,一起剝皮案震驚了整個濱河市饼记,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌慰枕,老刑警劉巖具则,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異具帮,居然都是意外死亡博肋,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門蜂厅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來匪凡,“玉大人,你說我怎么就攤上這事掘猿〔∮危” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵稠通,是天一觀的道長衬衬。 經(jīng)常有香客問我轻绞,道長,這世上最難降的妖魔是什么佣耐? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮唧龄,結(jié)果婚禮上兼砖,老公的妹妹穿的比我還像新娘。我一直安慰自己既棺,他們只是感情好讽挟,可當我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著丸冕,像睡著了一般耽梅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上胖烛,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天眼姐,我揣著相機與錄音,去河邊找鬼佩番。 笑死众旗,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的趟畏。 我是一名探鬼主播贡歧,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼赋秀!你這毒婦竟也來了利朵?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤猎莲,失蹤者是張志新(化名)和其女友劉穎绍弟,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體著洼,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡晌柬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了郭脂。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片年碘。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖展鸡,靈堂內(nèi)的尸體忽然破棺而出屿衅,到底是詐尸還是另有隱情,我是刑警寧澤莹弊,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布涤久,位于F島的核電站涡尘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏响迂。R本人自食惡果不足惜考抄,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蔗彤。 院中可真熱鬧川梅,春花似錦、人聲如沸然遏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽待侵。三九已至丢早,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間秧倾,已是汗流浹背怨酝。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留那先,地道東北人凫碌。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像胃榕,于是被迫代替她去往敵國和親盛险。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2 350

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