前言
想要有一個自己的博客,拿來記平時的筆記邪乍。但是又不想去博客平臺注冊賬號,平臺那么多对竣,選擇也是件讓人頭大的事情庇楞。又不想自己買服務(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,簡潔大方不花哨哩照。
這里給一個其他主題介紹的傳送門:
配置
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
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主頁地址娃善。其他的參見配置文檔的說明论衍。
創(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 可以用哦。