hexo+github搭建個人博客
前言:
有那么多的博客平臺,為什么要搭建個人博客?
- 基于共享平臺的策略會審核發(fā)布內(nèi)容并可能隨時被刪
- 你是否想搭建專屬的個性化博客,定義自己的精美頁面
- 作為一個編程從業(yè)者,有一個專門記錄自己成長的博客可以作為求職的一個技能棧介紹
本系列教程將搭建一個這樣的博客Hackt0's Blog預(yù)覽(博客還在完善中)
原文鏈接
準(zhǔn)備工作
- github賬號
- node.js 、git
本文環(huán)境
- Window11/Windows10 x64
- node.js v16.11.1(使用最新版本運行hexo server 是會出現(xiàn)告警,但是不影響使用,如果介意,可以使用低版本)
- Git v2.33.1
- hexo v5.4.0
準(zhǔn)備工作
創(chuàng)建github倉庫
首先在gitHub官網(wǎng)注冊一個賬號(注冊的用戶名會和之后的博客域名相關(guān),可以直接想好,避免二次修改),由于github在外網(wǎng),可能出現(xiàn)無法訪問的情況,可以參考解決github訪問失敗 - 簡書 (jianshu.com)
注冊完成后會收到一份郵件,要點擊完成下注冊驗證
以新建賬號為例做介紹,創(chuàng)建一個倉庫
create repository.pngRepository name一欄填上
用戶名.github.io,如上圖用戶名為shuhan520,那么對應(yīng)的Repository name就是shuhan520.github.io,再勾選一下Add a README file選項用于快速生成項目頁面,其余選項全部默認(rèn)即可創(chuàng)建后可以在Settings-Pages看到自己的專屬域名了(
不推薦使用projectpage,如果使用其他名稱生成的域名會帶有路徑,搭建博客時會出現(xiàn)路徑導(dǎo)致的資源訪問問題),此時訪問網(wǎng)頁是剛剛創(chuàng)建的README文檔內(nèi)容,沒有勾選Add a README file選項的需要添加內(nèi)容才可以生成GithubPages.png上圖Custom domain可以綁定其他域名
配置SSH Key
可以使用Git官網(wǎng)下載和安裝git,安裝完成后鼠標(biāo)右鍵空白處菜單欄會出現(xiàn)
git bash here選項,設(shè)置個人郵箱和用戶名$ git config --global user.name "你的GitHub用戶名" $ git config --global user.email "你的GitHub注冊郵箱"生成ssh-key文件
$ ssh-keygen -t rsa -C "你的GitHub注冊郵箱"生成過程中需要設(shè)置生成路徑、密碼,默認(rèn)空白即可;注意使用默認(rèn)路徑時是否存在提示already exists,如果有可以輸入'n'退出,重設(shè)路徑或者使用現(xiàn)有ssh-key(郵箱相同時)
找到生成的.ssh的文件夾中的id_rsa.pub,記事本打開復(fù)制全部內(nèi)容即可
可以在SSH and GPG keys (github.com)點擊New SSH Key,title為任意內(nèi)容,key輸入剛剛復(fù)制的key文件內(nèi)容,點擊Add SSH Key即可
任意位置打開cmd命令行窗口輸入
$ ssh git@github.com看到以下內(nèi)容即可(初次訪問可能需要添加GitHub域名到可信域名,確認(rèn)連接時輸入yes即可)
PTY allocation request failed on channel 0
Hi shuhan520! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.
安裝node.js
可以使用node.js官網(wǎng)下載和安裝node.js,打開控制臺輸入以下命令可正常輸出版本號即安裝完成
$ node -v $ npm -v
至此所有的準(zhǔn)備工作已經(jīng)完成
博客搭建
框架選取
快速構(gòu)建博客可以選擇hexo,hugo,wordpress等框架,本文使用的時hexo,因為靜態(tài)頁面搭建相對簡單,檢索時發(fā)現(xiàn)hexo擁有很多美化主題和美化教程,同時自動根據(jù)markdown文檔識別文章列表、分類、標(biāo)簽、翻頁等動態(tài)內(nèi)容,相對于小白比較容易上手
hexo安裝
新建一個單獨的目錄用于搭建博客,在新建目錄下打開cmd命令行輸入以下命令
$ npm install -g hexo
安裝完成后輸入以下命令初始化
$ hexo init
hexo會自動下載相關(guān)文件到本地,此時可以通過以下命令開啟本地預(yù)覽
$ hexo g
$ hexo s
打開瀏覽器訪問 http://localhost:4000即可看到未發(fā)布的頁面效果(本地訪問可以使用瀏覽器隱私模式,避免因緩存而導(dǎo)致修改效果無法正常顯示)
如果提示端口占用可以使用以下命令更改端口
$ hexo server -p 5000 #更改端口到5000
推送到Github
安裝github插件
$ npm install hexo-deployer-git --save
修改hexo主目錄下的站點配置文件_config.yml,修改最下方deploy為如下內(nèi)容,yml以縮進表示層級關(guān)系,所以務(wù)必要使用空格對齊
deploy:
type: git
repo: git@github.com:`your username`/`your username`.github.io.git
branch: main
推送到github倉庫:
$ hexo d
如果推送時提示
nothing to commit, working tree clean
請清除本地緩存,重新生成后推送:
$ hexo clean && hexo g
$ hexo d
至此,可以使用github分配的個人域名訪問到博客了
關(guān)于更多配置和美化由于簡書平臺支持的md格式有限,可以訪問hexo 個人博客美化 | Hackt0's Blog

