網(wǎng)站示例:與李的個人博客
一作岖、搭建GithubPages
1、在GitHub上創(chuàng)建一個名為"yourname.github.io"的倉庫
如我的GitHub賬戶名稱為hanguilin敦间,那么我就需要創(chuàng)建一個名為hanguilin.github.io的倉庫
2、進入倉庫,進入Settings
找到GitHub Pages
第一部分是個人主頁訪問地址快集,初始化應(yīng)該為http://yourname.github.io。
第二部分是表示網(wǎng)站根目錄/與gh-pages分支進行關(guān)聯(lián)廉白。
第三部分是選擇GitHub自帶的主題个初。
第四部分是關(guān)聯(lián)到自定義域名,你的自定義域名需要解析到y(tǒng)ourname.github.io域名上猴蹂。拿阿里云舉例院溺,需要進入域名控制臺進行域名解析,選擇CNAME方式將自定義域名解析到y(tǒng)ourname.github.io域名磅轻。
第五部分是使用https珍逸,勾選之后,會自動為你的域名添加https支持聋溜。
我們在這里去選擇一個主題:
選擇之后根據(jù)提示將初始化代碼進行提交谆膳。
訪問http://yourname.github.io,就可以看到初始化的個人主頁撮躁。
二漱病、使用Hexo模板
個人主頁搭建好之后,發(fā)現(xiàn)頁面很簡單把曼,沒辦法支撐自己更多的功能展現(xiàn)杨帽。所以我們可以用其他技術(shù)來美化我們的頁面,如hexo嗤军。
hexo
hexo官網(wǎng): hexo
hexo簡介:是一個基于nodejs 的靜態(tài)博客網(wǎng)站生成器注盈,只需一條指令即可部署到 GitHub Pages, Heroku 或其他平臺。
因為hexo基于nodejs叙赚,所以使用hexo之前需要安裝node環(huán)境老客,安裝過程可以瀏覽器搜索寓落,網(wǎng)上很多相關(guān)教程谍肤。
初始化一個hexo項目:
# 安裝hexo腳手架
npm install hexo-cli -g
# 創(chuàng)建一個blog的項目
hexo init blog
# 進入blog文件夾
cd blog
# 下載庫包
npm install
# 本地運行,默認端口4000
hexo server
替換hexo項目默認模板
如果hexo項目的默認模板(landscape)不符合你的審美笼恰,那可以在hexo主題庫中挑選主題進行替換冤荆。
hexo主題庫:https://hexo.io/themes/
將下載好的主題庫放入blog/themes中朴则,再打開blog目錄下的_config.yml配置文件,修改其中的theme參數(shù),值為blog/themes中你新加主題的名字乌妒。
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aac3e5502655454f951e8f8c0056b054~tplv-k3u1fbpfcp-zoom-1.image" style="zoom:67%;" />
設(shè)置github倉庫
打開blog目錄下的_config.yml配置文件汹想,修改其中的deploy參數(shù)
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec2f679dec2944e19c9610afa1029a6f~tplv-k3u1fbpfcp-zoom-1.image" style="zoom:67%;" />
type: git表示代碼用git進行管理
repo表示倉庫路徑
branch表示推送的分支
hexo常用命令
-
hexo clean
清空public文件夾
-
hexo g
根據(jù)md文件生成對應(yīng)的html
-
hexo s
在本地運行
-
hexo d
發(fā)布到Github Pages中
三、本地化Markdown編輯器
推薦使用Typora+PicGo+GitHub圖床撤蚊,具體方法請參考博客《MarkDown本地編輯神組合》古掏。