使用Hexo和GithubPage搭建個人主頁

個人博客:http://lixiaohui.live

0. 說在前面的話(必看)

0.1. 思路總覽

使用hexo搭建Github page的思路如下:

其中我們把網(wǎng)站整個本體上傳到xiaohuilee.github.iohexo分支;由hexo生成的靜態(tài)文件上傳到master分支,hexo分支的內(nèi)容用于維護(hù)Github Page本體,master分支的內(nèi)容用于渲染Github Page。

0.2. 需要的必備兩個前提條件:

0.2.0. NodeJS

hexo是基于Node搭建的一套輕網(wǎng)絡(luò)框架,安裝依賴包以及安裝Hexo都需要用到node,為此Node是必須的。從官網(wǎng)下載并安裝Nodejs,直接下一步即可。

0.2.1. Git Bash

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

下載鏈接在這里:

linux下的安裝(引用自官方文檔):

Debian/Ubuntu
For the latest stable version for your release of Debian/Ubuntu

sudo apt-get install git

For Ubuntu, this PPA provides the latest stable upstream Git version

sudo add-apt-repository ppa:git-core/ppa 
sudo apt update;sudo apt install git

Fedora

yum install git (up to Fedora 21)
dnf install git (Fedora 22 and later)

Arch Linux

pacman -S git

1. 第一次安裝搭建Github Page

1.1. 創(chuàng)建repository

在github建立一個名為username.github.io的repository。
其中username為Github賬號名,比如我的是xiaohuilee.github.io。

1.2. git clone你的博客項目地址

git clone https://github.com/XiaohuiLee/xiaohuilee.github.io.git

1.3. 切換分支

進(jìn)入clone的項目目錄,注意此時是在master分支,而master分支平常放生成的博客頁面,所以我們現(xiàn)在創(chuàng)建一個hexo分支,用來管理hexo相關(guān)文件。

git checkout -b hexo

1.4. 安裝hexo,以及相關(guān)擴(kuò)展依賴

建議把npm安裝源改為國內(nèi)的,淘寶就有提供,這樣能提高安裝速度。命令:npm config set registry https://registry.npm.taobao.org

npm install -g hexo-cli

把當(dāng)前文件夾的文件都移到外面去(包括.git倉庫目錄)

hexo init // 初始化

初始化完成后馬上把文件移回來(一般只會有README.MD文件和.git目錄)
注意:hexo init要求當(dāng)前目錄是一個空目錄,否則git bash會報錯。

npm install // 安裝依賴
npm install hexo-deployer-git --save // 安裝deployer擴(kuò)展

1.5. 改變博客主題

我這里用的是:huno。


首先克隆huno的github倉庫到本地。

git clone https://github.com/letiantian/huno.git themes/huno

1.6. 修改_config.yml文件

在根目錄xiaohuilee.github.io下有配置文件_config.yml,里面存儲的是Hexo的一些配置信息,使用vim _config.yml打開編輯。

1.6.1. 修改主題

找到theme一行,修改成如下:

theme: huno

注意theme:后面的空格不能省略。

1.6.2. 修改部署方式和部署目標(biāo)

deploy:
type: git
repo: https://github.com/XiaohuiLee/xiaohuilee.github.io.git
branch: master

1.6.3. 修改自己的個人信息

此外其他相關(guān)配置信息都改成你自己的,比如author這些。

1.6.4. 啟用圖片資源文件夾

對于那些想要更有規(guī)律地提供圖片和其他資源以及想要將他們的資源分布在各個文章上的人來說,Hexo也提供了更組織化的方式來管理資源。這個稍微有些復(fù)雜但是管理資源非常方便的功能可以通過將config.yml文件中的 post_asset_folder 選項設(shè)為 true 來打開。

當(dāng)資源文件管理功能打開后,Hexo將會在你每一次通過hexo new [layout] <title>命令創(chuàng)建新文章時自動創(chuàng)建一個文件夾。這個資源文件夾將會有與這個 markdown 文件一樣的名字。將所有與你的文章有關(guān)的資源放在這個關(guān)聯(lián)文件夾中之后,你可以通過下列標(biāo)簽引用方式來引用它們,這樣你就得到了一個更簡單而且方便得多的工作流。

{% asset_img slug [title] %}

比如:

{% asset_img example.jpg This is an example image %}

1.7. 編寫第一篇博文

hexo new "your blog title"

然后會在source/_posts下建立一個your-blog-title.md的文件,你可以編輯此文件書寫你想寫的博客內(nèi)容(Markdown格式)。
然后生成博客Html文件以及啟動本地測試的服務(wù)器。

hexo generate & hexo server

終端會提示:

INFO  Generated: js/jquery.min.js
INFO  Generated: images/background-cover.jpg
INFO  52 files generated in 2.25 s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

打開瀏覽器并訪問http://localhost:4000就可以看到自己的博客了。
到此為止,我們已經(jīng)在本地測試成功編寫博客文章,接下來我們需要把整個網(wǎng)站內(nèi)容(src)部署到github上。

1.8. 部署到github

使用命令:

hexo generate -d 

終端會嘗試生成網(wǎng)站靜態(tài)文件并彈出github用戶登錄窗口以供身份認(rèn)證,輸入github用戶名和密碼就可以了。成功提示如下:

Branch 'master' set up to track remote branch 'master' from 'https://github.com/XiaohuiLee/xiaohuilee.github.io.git'.
To https://github.com/XiaohuiLee/xiaohuilee.github.io.git
   d8b8f18..95710ab  HEAD -> master
INFO  Deploy done: git

1.9. 將網(wǎng)站本體提交到Github。

這是為了保持多終端編寫博客功能的必要條件。

git add .
git commit -m 'hexo init'
git push -u origin hexo

注意上傳至hexo分支

1.10. 此時可以在瀏覽器輸入xiaohuilee.github.io來訪問你的博客。

至此你的博客已經(jīng)成功搭建!

2. 在其他電腦上如何編寫博客并保持同步。

2.1. clone自己Github上的博客倉庫

需要注意的是clone的應(yīng)該是hexo分支。

2.2. 安裝必備環(huán)境

npm install -g hexo-cli
npm install
npm install hexo-deployer-git --save

2.3. 正常博客書寫發(fā)布流程即可。

注意不要使用hexo init命令,因為倉庫中已存在。

hexo new "Another post"
//編寫完后
hexo generate -d
//部署完后記得把自己本體也上傳至hexo分支
git add .
git commit -m 'hexo updated from another pc'
git push -u origin hexo

完。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容