使用框架Hexo在Github上搭建個人博客

leozhao
·
·
IPFS
·
寫於2018年1月26日的一篇文章,域名到期了,等去中心化域名註冊好了續上。

Hexo+Github [Mac環境]假如你有一個Github帳號,我們就可以開始了,如果沒有,就去註冊好了。想想不是很難的事吧,一個郵箱就行了,別的都不需要。

1. 配置遠程和本地Github

1.1 在Github 上創建一個倉庫(Repo)

登陸Github網址,用你的賬號登陸進去,點右上角的+ ,彈出菜單選擇New repository ,在彈出的Repository name下面的文本框內按照yourname.github.io這種格式輸入,然後選中

Public , 最後點擊綠色的Create repository創建成功。

重新登陸,點右上角你的頭像,在彈出的菜單中選中Your profile ,會發現“youname.github.io”分支創建成功,點擊進去,在右邊找到Settings ,在左側欄最下面找到Deploy keys ,點擊Add deploy key ,輸入你的”key” ,密匙的求解過程請參見Git密匙,至此遠程倉庫部分已經配置完成。

如果你對git很感興趣,或者,對git的命令行方式很頭疼的,可以閱讀此物: Git入門教材

⚠️我的git倉庫名字為zhaodongchun.github.io,用你自己的名字好了.

1.2 確認本地已經安裝好git 和npm

在終端輸入下面兩條命令,確認已經安裝好git和npm,如果電腦還沒裝這兩個東西的,請參照官方文檔安裝: Git入門教材+ npm中文文檔

git --version
npm --version

2. 配置Hexo

1) 安裝hexo

先通讀官方文檔hexo自動部署網站,不需要看內容,快速翻一遍知道有這個工具在這裡就可以了,以後需要時再調用它。然後終端輸入以下命令

git --version
npm --version

2) 創建本地工作目錄

先登陸到github,點擊你的分支yourname.github.io ,在右邊有個綠色的按鈕Clone or download ,點開後點擊copy to clipboard把自己的git地址拷貝出來,在終端cd到你希望把站點放置的位置,下面我cd到Desktop了

cd ~/Desktop
git clone https://github.com/zhaodongchun/zhaodongchun.github.io.git

3)初始化你的本地站點

hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
hexo generate
hexo server

在終端打完以上命令後,如果最後顯示Database saved ,代表本地站點已經初始化完成,可以終端裡按住ctrl的同時點擊http://localhost:4000/查看你的站點了,需要注意的是這個效果是hexo默認模版landscape的效果,我們看看怎麼更換模版為Next模版。

4)設置個人模版

這裡涉及兩個東西,一個是Hexo,一個是Next,我們先到Hexo模版,先看看都有哪些模版可供我們選擇,如果你點擊模版下面的大標題名字後會進入到github的源文件地址,和創建本地工作目錄一樣,可以把它的Git地址拷貝出來。先以next模版為例,先定位到Hexo站點目錄下,在終端輸入以下命令安裝

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

安裝完成後,修改配置文件_config.yml中的theme字段為next後保存,至此我們完成了站點配置。在終端繼續輸入以下命令完成模版調試,如果再此出現Database saved ,代表本地站點已經初始化完成,可以終端裡按住ctrl的同時點擊http://localhost:4000/查看你的站點了

hexo server --debug

5) 使用Atom碼文章

先把Atom下載下來,官網直接下載安裝或在終端輸入下面命令也可以,如果對Atom還不熟悉沒關係,先從官方文檔開始逐漸建立Atom語法吧,在線閱讀: 飛行手冊

給Atom 安裝一個命令行面板,Atom 裡同時按command+,調出setting面板,定位到install選項,在文本框中搜索platformio-ide-terminal後點擊install安裝atom包,安裝完成後按command+shift+t在下面會出現一個終端,這個包的作用就是解決總是來回切換atom和終端的問題。

完成上面的操作後,我們對包大概有了個概念,下面繼續安裝一個markdown包,點擊Atom菜單下的Preference的左側倒數第二項+ install ,輸入markdown ,依次安裝幾個包

  • markdown-scroll-sync
  • linter-markdown
  • markdown-writer
  • markdown-toc
  • markdown-pdf
  • markdown-preview

然後就是隨便折騰一會,看看這幾個都實現什麼功能,接下來用markdown書寫文章的過程中會經常使用這幾個包

/Desktop/zhaodongchun.github.io/zhaodongchun.github.io ,這是我的目前位置,在mac終端輸入ls查看你是否在根路徑下,然後終端輸入atom .在atom中打開所有文件,然後使用快捷鍵command+shift+t打開atom終端,mac的終端就可以關閉了,在左側欄定位到source文件夾下的_posts文件夾,展開後有一個hello-world.md文件,這個文件就是網站上看到的源文件。

熟悉以下幾個快捷鍵以後會很方便

  • command+w 關閉當前標籤
  • command+shift+m 終端
  • ctrl+shift+m 預覽
  • “>” 塊引用
  • “-” 任務列表
  • “0.” 有序列表

再回去翻翻Next模版,設置下站点配置文件主题配置文件,設置語言和暱稱,基本上博客就可以了,保存後在終端輸入下面調試命令,如果再此出現Database saved ,代表本地站點已經初始化完成,可以在瀏覽器輸入http://localhost:4000/查看你的站點了。

 hexo server --debug

3. 部署到Github 上

把本地文件上傳到github遠程前,我們需要告訴atom上傳到的路徑,先登陸github,進入zhaodongchun.github.io這個分支,點擊綠色的clone or download按鈕拷貝出來路徑,再進入atom,左側根目錄會有一個_config.yml文件,下面我們設置下這個配置文件,先把拷貝出來的路徑粘貼到url後面,注意截止到/ ,將root後面改成你的github上的倉庫一樣,repo後面的直接把你拷貝出來的粘貼就行了,注意:後面的空格不要少,這樣atom就知道上傳給誰了。

修改完成後保存,在atom終端輸入下面命令,在github上查看上傳結果,如果發現文件已經顯示,就可以進入github你的分支下的settings,往下翻找到GitHub Pages這裡,將source下的None改為master branch ,點擊保存後,會出現綠色的一條提示Your site is published at https://konglongyinger.github.io/zhaodongchun.github.io/ ,後面鏈接就是你的網址了,現在你可以點擊看看效果。

 hexo deploy

4. 調試網站

  • 如果每次在本地修改文章,可以用下面命令調試預覽
hexo s --debug
  • 如果改動了配置文件,在上傳到github前最好使用清理命令,清除public目錄
hexo clean
  • 如果完成階段性任務了可以用下面命令上傳到github
 hexo deploy

5. 域名綁定

首先你的有個域名,舉例來說我是從 百度買的,有了域名後再分三步走。

1) 配置CNAME

在hexo文件夾下的source中新建一個文本文檔, 裡邊輸入剛才我們買到的域名的二級域名。舉例來說,我申請的是zhaodongchun.com ,就填寫zhaodongchun.com ,然後保存為CNAME .注意大寫的CNAME.

2) 配置解析服務器

接下來進域名服務商的後台進行域名解析設置,添加CNAME記錄類型,解析線路默认就好了,記錄值為zhaodongchun.github.io ,配置好後我們本地重新上傳到github。

3) 配置站點設置文件重定向

還記得我們沒有綁定域名之前設置的配置文件嗎,綁定域名後需要重新設置下urlroot ,否則css有可能會丟失,將其設置回默認,如下設置:

4)好,到此為止,重新執行下面命令將文件上傳到github,瀏覽器輸入你的域名就可以正常登陸了。

 hexo clean
hexo g
hexo d
CC BY-NC-ND 2.0 授權

喜歡我的作品嗎?別忘了給予支持與讚賞,讓我知道在創作的路上有你陪伴,一起延續這份熱忱!