使用hexo與github搭建免費個人博客

一、介紹

Hexo是一款快速、簡潔且高效的博客框架,支持markdown等語法,另外具有強大的插件系統(tǒng)和眾多的插件,高度可定制。

github是目前最為流行的源碼托管網(wǎng)站之一,我們在創(chuàng)建github賬戶時,會被分配一個靜態(tài)的虛擬服務器(只能伺服靜態(tài)資源,并且每月有流量限制,不過也綽綽有余)。訪問<用戶名>.github.io這個地址,實際上就是我們的github個人主頁。

二、安裝

  1. 最新版本的GITNode.js
  2. 安裝Hexo腳手架
npm install -g hexo-cli

三、建站

請執(zhí)行如下命令創(chuàng)建一個工程目錄。

hexo init <folder>
cd <folder>
npm install

你會得到如下目錄:

├── _config.yml
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes

_config.yml

網(wǎng)站的配置信息,您可以在此配置大部分的參數(shù)。

package.json

應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝,您可以自由移除。

scaffolds

模版文件夾。當您新建文章時,Hexo 會根據(jù) scaffold 來建立文件。

Hexo的模板是指在新建的markdown文件中默認填充的內(nèi)容。例如,如果您修改scaffold/post.md中的Front-matter內(nèi)容,那么每次新建一篇文章時都會包含這個修改。

source

資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外,開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾,而其他文件會被拷貝過去。

themes

主題文件夾。Hexo會根據(jù)主題來生成靜態(tài)頁面。

四、配置

我們可以在_config.yml中修改大部分的配置,其中有些配置是必須要修改的。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://halzhan.cn # 填入博客地址
root: / # 如果博客地址在子目錄,請將子路徑填入
permalink: :year/:month/:day/:title/
permalink_defaults:

另外一個是站點的基礎配置:

# Site
title: Hal Zhan # 站點標題
subtitle: 不拘一格、Geek # 站點副標題
description: 
author: Hal Zhan(風起云涌Hal) # 作者
language: zh-Hans # 編碼(漢字的話使用這個既可以了)
timezone:

其他的配置詳見官方文檔-配置

完成上述配置后,我們可以使用hexo server本地伺服站點。如果需要在控制臺中顯示更多debug信息,可以加上--debug選項。

五、發(fā)布

我們需要在github上預先創(chuàng)建一個空的倉庫,請注意這個倉庫的名稱必須叫做:<用戶名>.github.io,例如本例中的倉庫名稱叫做:halzhan.github.io

我們需要將本地目錄與遠程倉庫聯(lián)系起來。回到根目錄下,執(zhí)行如下命令:

git init
...
git add .
git commit -m "init project"
git remote add origin "git@github.com:HalZhan/halzhan.github.io.git"
git push origin master

注:推薦再創(chuàng)建一個分支(本例中創(chuàng)建了一個hexo分支),用于保存我們的站點源碼,而master分支用于存放最終發(fā)布的站點文件。

git checkout -b hexo

安裝一個模塊:

npm install --save hexo-deployer-git

再回到根目錄下_config.yml文件中,對發(fā)布選項做一些配置:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:HalZhan/halzhan.github.io.git # Git地址(http/https/ssh皆可)
  branch: master # 所要發(fā)布到的分支名稱

發(fā)布的話請使用如下命令:

hexo clean && hexo g && hexo d

再次訪問<用戶名>.github.io,如果一切順利應該可以看到剛剛發(fā)布的站點。

六、主題

github上有許多非常優(yōu)秀的hexo主題,這里推薦一個比較流行的主題,next,首先需要將這個主題下載到我們的項目里:

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

返回到項目根目錄下的_config.yml文件中,搜索字段theme,將其值改為next,然后可以執(zhí)行命令hexo server --debug本地查看一下效果。

next主題有許多配置選項,我們可以在themes/next目錄下更改_config.yml里選項的值。

例如顯示社交鏈接:

social:
  GitHub: https://github.com/halzhan || github # github地址
  E-Mail: mailto:halzhan163@163.com || envelope # 郵件
  Weibo: https://weibo.com/halzhan || weibo # 微博主頁
  LinkedIn: https://www.linkedin.com/in/hal-zhan-a0041587/ || linkedin # 領英主頁
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

顯示查看更多按鈕(首頁文章內(nèi)容截取,這樣就不會在首頁展示全部內(nèi)容)

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

啟用Gemini風格的next主題:

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

每種主題都會有許多配置選項,可以自行嘗試修改并查看效果。

七、SEO優(yōu)化

八、常見問題

1. 主題同步

這個問題是比較頭疼的,因為目前hexo主題都是通過git clone的方式克隆到本地來的,然而在提交站點源碼到遠程倉庫時,themes文件夾下的主題文件是不會提交到倉庫里的,因此我們?nèi)绻牧酥黝}文件下的一些設置,這部分設置由于沒有提交會被丟失,這帶來了極大的不便。為此,我們決定采用官方推薦的fork+subtree的方式來管理主題。

  • 刪除themes目錄下的next文件夾,并將修改push到github
git add .
git commit -m "delete next"
git push
  • 進入next的github主頁,fork之

  • 待fork完成后綁定next主題為子項目

git remote add -f next git@github.com:HalZhan/hexo-theme-next.git
git subtree add --prefix=themes/next next master --squash
  • 更新子項目
git fetch next master
git subtree pull --prefix=themes/next next master --squash
  • 從子目錄push到遠程倉庫
git subtree push --prefix=themes/next next master
  • 提交并發(fā)布本地修改到遠程倉庫
git add .
git commit -m "next theme"
git push

現(xiàn)在再去遠程倉庫看themes/next/就有內(nèi)容了,并且跟子項目的遠程倉庫可以保持更新,在主項目中修改也可以push到子項目的遠程。這樣就不必擔心主題配置丟失了。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

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